Menú
NextJS frontend development patterns. Use when developing frontend code with NextJS, React, Tailwind, and TypeScript.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional 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?