菜单
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?