By dding-g
Next.js 15+ App Router 패턴 - Server Components, Server Actions, 데이터 페칭
프론트엔드 개발을 위한 Claude Code 플러그인 마켓플레이스
/plugin marketplace add dding-g/ddingg-claude-marketplace
# 공통 스킬
/plugin install common-skills@ddingg-marketplace
# 플랫폼별 스킬
/plugin install nextjs-app-router@ddingg-marketplace
/plugin install vite-csr@ddingg-marketplace
/plugin install react-native@ddingg-marketplace
# PR 에이전트
/plugin install pr-agents@ddingg-marketplace
# Maestro E2E 테스트
/plugin install react-native-test-maestro@ddingg-marketplace
# 유틸리티
/plugin install utils@ddingg-marketplace
# Slack 알림
/plugin install slack-notify@ddingg-marketplace
# 저장소 클론
git clone https://github.com/dding-g/ddingg-claude-marketplace.git
# 로컬 마켓플레이스 추가
/plugin marketplace add ./ddingg-claude-marketplace
# 플러그인 설치
/plugin install common-skills@ddingg-marketplace
ddingg-claude-marketplace/
├── .claude-plugin/
│ └── marketplace.json # 마켓플레이스 카탈로그
│
├── plugins/
│ ├── common-skills/ # 공통 스킬 (6개)
│ ├── nextjs-app-router/ # Next.js 15+ App Router
│ ├── vite-csr/ # Vite CSR/SPA
│ ├── react-native/ # React Native/Expo
│ ├── react-native-test-maestro/ # Maestro E2E 테스트
│ ├── pr-agents/ # PR 에이전트 (5개)
│ ├── utils/ # 유틸리티 (commit, hooks)
│ ├── codebase-onboarding/ # 코드베이스 온보딩 도구
│ ├── slack-notify/ # Slack 알림 (commit 후 자동 알림)
│ ├── agents-md/ # AGENTS.md 작성 패턴
│ └── react-table-patterns/ # TanStack React Table 패턴
│
└── .claude/ # 마켓플레이스 개발용 (배포 안됨)
프레임워크 독립적인 공통 프론트엔드 스킬
| 스킬 | 핵심 내용 |
|---|---|
| writing-good-code | 이름 짓기, 함수 분리, 조건문, Early Return |
| typescript-patterns | 타입 추론, 유틸리티 타입, 제네릭, 타입 좁히기 |
| react-patterns | 상태 관리 판단, Suspense, React 19 패턴 |
| fsd-architecture | 언제 FSD를 쓸까? 실용적 적용법 |
| react-query-patterns | Query Factory, queryOptions/mutationOptions 패턴 |
| zod-validation | 폼 검증, API 응답 검증, 핵심 패턴 3가지 |
Next.js 15+ App Router 전용 스킬
Vite + React SPA 전용 스킬
React Native/Expo 전용 스킬
PR 코드 리뷰 에이전트
| 에이전트 | 역할 | 커맨드 |
|---|---|---|
| PR Review | 코드 품질, 보안, 성능 | /review |
| PR Summary | 변경사항 요약 | /summary |
| Test Check | 테스트 커버리지 | /test-check |
| Security | 보안 취약점 | /security |
| Architecture | FSD 아키텍처 검증 | /arch |
React Native Maestro E2E 테스트 도구
| 커맨드/에이전트 | 역할 |
|---|---|
/maestro | 전체 워크플로우 실행 (설정 → 플랜 → 검증 → 테스트) |
| maestro-test-plan | 테스트 플랜 작성 전문가 |
| flow-validation | 플로우 파일 검증 전문가 |
| tester | 테스트 실행 및 분석 전문가 |
유틸리티 명령어
| 커맨드 | 설명 |
|---|---|
/commit | Conventional commit 형식으로 커밋 및 push |
/commit --no-push | 커밋만 하고 push 생략 |
Slack 알림 플러그인
| 기능 | 설명 |
|---|---|
| PostToolUse Hook | git commit 성공 시 자동 Slack 알림 |
/notify-slack | 수동으로 작업 완료 알림 전송 |
환경 변수: SLACK_WEBHOOK_URL 필요
AGENTS.md 파일 작성 패턴
TanStack React Table 사용 패턴
스킬은 관련 키워드 감지 시 자동 활성화됩니다.
PR 에이전트는 커맨드로 실행:
/review
/summary
/security
이 마켓플레이스를 개발/유지보수하기 위한 로컬 명령어:
| 커맨드 | 설명 |
|---|---|
/add-plugin <name> | 새 플러그인 추가 |
/add-skill <name> | 플러그인에 새 스킬 추가 |
/add-agent <name> | 플러그인에 새 에이전트 추가 |
/validate-structure | 마켓플레이스 구조 검증 |
/optimize-skills | SKILL.md 파일 품질 분석 및 최적화 제안 |
/generate-readme | README 자동 생성 |
kebab-casePascalCaseuseCamelCaseSCREAMING_SNAKE_CASE모든 파일은 Claude Code 공식 플러그인 스펙을 준수합니다:
name, version, description, author, keywords, hooks 필드만 사용 (category 등 미지원)PreToolUse, PostToolUse 등), matcher와 hooks 배열 사용name, description)name, description, tools)name, description)Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub dding-g/ddingg-claude-marketplace --plugin nextjs-app-router유틸리티 - Git commit, ship(commit-push-pr) 명령어
공통 프론트엔드 스킬 - TypeScript, React, FSD 아키텍처, React Query, Zod 검증
PR 코드 리뷰 에이전트 - 코드 품질, 보안, 테스트, 아키텍처 검증
Vite + React SPA 패턴 - React Router, Zustand, 코드 스플리팅
React Native Maestro 테스트 도구
Next.js development expertise with skills for App Router, Server Components, Route Handlers, Server Actions, and authentication patterns
Next.js 16 with App Router, Server Components, Server Actions, Cache Components. Use for React 19.2 apps, SSR, or encountering async params, proxy.ts migration, use cache errors.
Expert Next.js 16 + React 19 with App Router, Server Components, Prisma 7, and Better Auth
React, Next.js, and TanStack Start development
Use this agent for expert assistance with web development tasks using React, Next.js, NestJS, and other modern web frameworks with TypeScript and Tailwind CSS. This includes code analysis, component creation, debugging, performance optimization, and architectural decisions. Examples: <example>Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are not rendering correctly' assistant: 'Let me use the web-dev agent to analyze your Next.js routing setup and provide a solution' <commentary>This is a Next.js-specific routing issue, so the web-dev agent will provide targeted guidance.</commentary></example> <example>Context: User needs a reusable React component with Tailwind CSS. user: 'I need a card component that matches my app's Tailwind-based design system' assistant: 'I'll use the web-dev agent to create a TypeScript-based React card component styled with Tailwind CSS, following your app's design patterns' <commentary>The user requires a component that aligns with their Tailwind CSS design system, so the web-dev agent ensures compatibility.</commentary></example>
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). Proactively activates in projects with cacheComponents: true, providing patterns for 'use cache' directive, cacheLife(), cacheTag(), cache invalidation, and parameter permutation rendering.