Nextjs Architect — Modular
Esta skill segue o modelo de modularização da nestjs-architect: conteúdo dividido em seções versionadas, checklist e referência rápida.
⚠️ PASSO 0: CARREGAR MÓDULOS OBRIGATÓRIOS (SEMPRE PRIMEIRO!)
ANTES DE FAZER QUALQUER COISA, execute:
# 🔴 OBRIGATÓRIOS: Carregar sempre no início
Read .claude/skills/nextjs-architect/sections/activation.md
Read .claude/skills/nextjs-architect/sections/architecture.md
Read .claude/skills/nextjs-architect/sections/data-state-cache.md
# 🟡 SOB DEMANDA: Carregar conforme contexto da tarefa
# - sections/ui-tailwind.md (quando trabalhar com componentes UI/shadcn)
# - sections/forms.md (quando implementar formulários/Server Actions)
# - sections/security.md (quando adicionar auth/roles/validação)
# - sections/performance-dx.md (quando otimizar bundle/Web Vitals)
# - sections/anti-patterns.md (quando revisar código)
# - checklists/quality.md (validação final antes de entregar)
Sem estes módulos obrigatórios, você NÃO tem informação suficiente para arquitetar apps Next.js 15 corretamente.
Nota: Caminhos são relativos à raiz do projeto (onde .claude/ está localizado).
Como usar
1) SEMPRE exiba este disclaimer no início da resposta:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎨 NEXTJS ARCHITECT SKILL ATIVADA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Stack: Next.js 15 (App Router), React 19, shadcn/ui
Abordagem: Server-First, Feature-First, RSC
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Aplique as seções relevantes (arquitetura, dados/estado/cache, UI/Tailwind, formulários, segurança, performance/DX, anti-patterns) conforme o problema.
- Formate a resposta com título curto + bullets por área + caminhos em backticks + blocos
ts/tsx quando houver código.
- Valide com
checklists/quality.md; rejeite itens listados em sections/anti-patterns.md.
- Use
SKILL-QUICK-REF.md para um guia de bolso e README.md para visão geral.
Estrutura
.claude/skills/nextjs-architect/
├─ SKILL.md # instruções de orquestração (este arquivo)
├─ README.md # visão geral e quando ativar
├─ SKILL-QUICK-REF.md # gatilhos e árvore base
├─ sections.yaml # índice das seções
├─ sections/ # conteúdo modular
└─ checklists/quality.md # checklist final de entrega
Recursos Modulares
🔴 Módulos OBRIGATÓRIOS (carregar sempre no PASSO 0):
sections/activation.md → Gatilhos, persona, formato de saídasections/architecture.md → Estrutura feature-first, server-first patternssections/data-state-cache.md → Server Components, RSC, cache strategies
🟡 Módulos SOB DEMANDA (carregar quando necessário):
sections/ui-tailwind.md → shadcn/ui, Tailwind semântico, acessibilidadesections/forms.md → Server Actions, validação, loading statessections/security.md → Auth (cookies/JWT), CSRF, XSS, rate limitingsections/performance-dx.md → Bundle optimization, Web Vitals, DX toolssections/anti-patterns.md → Código para evitar (Client Components desnecessários, etc.)checklists/quality.md → Checklist de qualidade final
Quando carregar módulos sob demanda:
- UI/Tailwind: quando criar/revisar componentes visuais
- Forms: quando implementar formulários com Server Actions
- Security: quando adicionar autenticação, autorização ou validação de input
- Performance: quando otimizar bundle size, Core Web Vitals ou SEO
- Anti-patterns: quando revisar código existente ou fazer code review
Manutenção
- Versão: 2.0.0
- Criado: 2025-12-06
- Atualizado: 2025-12-12
- v1.0.0: Versão inicial modular
- v2.0.0: Adicionado carregamento obrigatório de módulos + disclaimer visível + gatilhos explícitos na description
- Revisar quando: Next.js/React atualizar versão major, shadcn/ui atualizar componentes, ou Tailwind 4.0 lançar
1---2name: nextjs-architect3description: SEMPRE use quando trabalhar com Next.js 15/React 19 + shadcn/ui + Tailwind. Arquiteta apps server-first/feature-first com decisões de estado, cache, forms, segurança e performance.4---5
6# Nextjs Architect — Modular
7
8Esta skill segue o modelo de modularização da `nestjs-architect`: conteúdo dividido em seções versionadas, checklist e referência rápida.
9
10## ⚠️ PASSO 0: CARREGAR MÓDULOS OBRIGATÓRIOS (SEMPRE PRIMEIRO!)
11
12**ANTES DE FAZER QUALQUER COISA, execute:**
13
14```bash
15# 🔴 OBRIGATÓRIOS: Carregar sempre no início
16Read .claude/skills/nextjs-architect/sections/activation.md
17Read .claude/skills/nextjs-architect/sections/architecture.md
18Read .claude/skills/nextjs-architect/sections/data-state-cache.md
19
20# 🟡 SOB DEMANDA: Carregar conforme contexto da tarefa
21# - sections/ui-tailwind.md (quando trabalhar com componentes UI/shadcn)
22# - sections/forms.md (quando implementar formulários/Server Actions)
23# - sections/security.md (quando adicionar auth/roles/validação)
24# - sections/performance-dx.md (quando otimizar bundle/Web Vitals)
25# - sections/anti-patterns.md (quando revisar código)
26# - checklists/quality.md (validação final antes de entregar)
27```
28
29**Sem estes módulos obrigatórios, você NÃO tem informação suficiente para arquitetar apps Next.js 15 corretamente.**
30
31**Nota:** Caminhos são relativos à raiz do projeto (onde `.claude/` está localizado).
32
33---
34
35## Como usar
36
37**1) SEMPRE exiba este disclaimer no início da resposta:**
38
39```
40━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
41🎨 NEXTJS ARCHITECT SKILL ATIVADA
42━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
43Stack: Next.js 15 (App Router), React 19, shadcn/ui
44Abordagem: Server-First, Feature-First, RSC
45━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
46```
47
482) Aplique as seções relevantes (arquitetura, dados/estado/cache, UI/Tailwind, formulários, segurança, performance/DX, anti-patterns) conforme o problema.
493) Formate a resposta com título curto + bullets por área + caminhos em backticks + blocos `ts/tsx` quando houver código.
504) Valide com `checklists/quality.md`; rejeite itens listados em `sections/anti-patterns.md`.
515) Use `SKILL-QUICK-REF.md` para um guia de bolso e `README.md` para visão geral.
52
53## Estrutura
54
55```
56.claude/skills/nextjs-architect/
57├─ SKILL.md # instruções de orquestração (este arquivo)
58├─ README.md # visão geral e quando ativar
59├─ SKILL-QUICK-REF.md # gatilhos e árvore base
60├─ sections.yaml # índice das seções
61├─ sections/ # conteúdo modular
62└─ checklists/quality.md # checklist final de entrega
63```
64
65## Recursos Modulares
66
67### 🔴 Módulos OBRIGATÓRIOS (carregar sempre no PASSO 0):
68- `sections/activation.md` → Gatilhos, persona, formato de saída
69- `sections/architecture.md` → Estrutura feature-first, server-first patterns
70- `sections/data-state-cache.md` → Server Components, RSC, cache strategies
71
72### 🟡 Módulos SOB DEMANDA (carregar quando necessário):
73- `sections/ui-tailwind.md` → shadcn/ui, Tailwind semântico, acessibilidade
74- `sections/forms.md` → Server Actions, validação, loading states
75- `sections/security.md` → Auth (cookies/JWT), CSRF, XSS, rate limiting
76- `sections/performance-dx.md` → Bundle optimization, Web Vitals, DX tools
77- `sections/anti-patterns.md` → Código para evitar (Client Components desnecessários, etc.)
78- `checklists/quality.md` → Checklist de qualidade final
79
80**Quando carregar módulos sob demanda:**
81- UI/Tailwind: quando criar/revisar componentes visuais
82- Forms: quando implementar formulários com Server Actions
83- Security: quando adicionar autenticação, autorização ou validação de input
84- Performance: quando otimizar bundle size, Core Web Vitals ou SEO
85- Anti-patterns: quando revisar código existente ou fazer code review
86
87## Manutenção
88
89- **Versão:** 2.0.0
90- **Criado:** 2025-12-06
91- **Atualizado:** 2025-12-12
92 - v1.0.0: Versão inicial modular
93 - v2.0.0: Adicionado carregamento obrigatório de módulos + disclaimer visível + gatilhos explícitos na description
94- **Revisar quando:** Next.js/React atualizar versão major, shadcn/ui atualizar componentes, ou Tailwind 4.0 lançar
majiayu000