sites-frontend-stack

Sites Frontend Stack — Next.js e Astro + Tailwind v4 + shadcn/ui

Stack padrão das duas trilhas suportadas pela squad sites, estrutura de projeto, tokens de design (definidos UMA vez, compartilhados), padrões de componente em cada stack e composição shadcn/ui.

1. Escolha de stack

A decisão entre Next.js, Astro ou Híbrido é responsabilidade exclusiva do sites-architect (workflow "Escolher stack — Next.js / Astro / Híbrido", registrado como ADR em docs/smart-memory/decisions/ADR-{N}-stack-choice.md). Esta skill não repete os critérios de decisão — ela cobre a implementação de cada stack já decidida. Resumo de quando cada uma costuma entrar:

• Next.js — área autenticada complexa, painel com muito estado no cliente, infraestrutura de API pesada (webhooks, filas, jobs).
• Astro — site majoritariamente de conteúdo (institucional, landing page, blog, documentação, portfólio) com SEO/Core Web Vitals como prioridade dura.
• Híbrido (de ilha — um projeto Astro com ilhas React pontuais — ou separado — dois deploys, conteúdo em Astro e app autenticado em Next.js) — quando o projeto tem as duas necessidades ao mesmo tempo.

Ver o corpo do sites-architect para a tabela completa de critérios e o formato do ADR antes de escolher a stack de um projeto novo.

2. Stack Next.js

Next.js (App Router) + TypeScript
Tailwind CSS v4 (@theme CSS-first)
shadcn/ui (componentes base)
Motion — pacote `motion`, import de `motion/react` (ex-Framer Motion)
Lucide React (ícones)
next/font (tipografia)

Estrutura de projeto (Next.js)

src/
├── app/
│   ├── layout.tsx        # Root layout
│   ├── page.tsx          # Home
│   ├── globals.css       # Tailwind + @theme (tokens)
│   └── [route]/
│       └── page.tsx
├── components/
│   ├── ui/               # shadcn components (nunca editar direto)
│   ├── sections/         # Seções de página (Hero, Features, CTA)
│   └── layout/           # Header, Footer
└── lib/
    └── utils.ts          # cn() e utilities