Menu
NextJS frontend development patterns. Use when developing frontend code with NextJS, React, Tailwind, and TypeScript.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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?