메뉴
NextJS frontend development patterns. Use when developing frontend code with NextJS, React, Tailwind, and TypeScript.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Code review knowledge. Use when reviewing an implementation against requirements, validating code quality, checking edge cases and security, or before opening a PR.
Systematic debugging knowledge. Use when diagnosing errors, investigating unexpected behavior, doing root cause analysis, or troubleshooting production issues.
QA and testing knowledge. Use when testing an implementation end-to-end — building a test plan, validating APIs with curl, driving the UI with Playwright, comparing against Figma, and documenting pass/fail with evidence.
Requirements refinement knowledge. Use when turning a vague request into a clear spec, defining API contracts, identifying affected repositories, or capturing scope and edge cases before coding.
AWS infrastructure patterns. Use when working with AWS services, secrets, ECS/EKS, RDS, S3, CloudWatch, or debugging infrastructure issues.
NestJS backend development patterns. Use when developing backend APIs with NestJS, TypeORM/Prisma, and TypeScript.
| name | frontend-nextjs |
| description | NextJS frontend development patterns. Use when developing frontend code with NextJS, React, Tailwind, and TypeScript. |
| triggers | ["nextjs","next","react","frontend","tailwind","typescript frontend","ui","components"] |
Use when developing frontend code in a NextJS project with React, Tailwind, and TypeScript.
src/
├── app/ # Routes, layouts, server components
├── components/
│ ├── ui/ # Design system primitives (shadcn/ui)
│ ├── common/ # Reusable generic components
│ ├── layout/ # Header, Footer, Sidebar
│ └── icons/
├── features/
│ └── <domain>/
│ ├── components/
│ ├── hooks/
│ ├── stores/
│ ├── services/
│ ├── constants/
│ └── types/
├── shared/
│ ├── hooks/
│ ├── utils/
│ ├── stores/
│ ├── services/
│ ├── constants/
│ └── types/
└── styles/
components/ui — Design system primitives onlycomponents/common — Generic components used across featuresfeatures/<domain> — Domain-specific UI and logic (isolated)shared/* — Truly global hooks, utils, servicesapp/* — Pages, layouts, data fetching; no business logic@/components/ui@/components/common@/features/<domain>@/shared/...Features must NOT import from other features.
use- prefix-store.ts suffix'use client' only when necessaryapp/* or features/<domain>/servicescn helper (clsx + tailwind-merge) for conditional classesstyle={{}}'use client' only where needed?