Implementação

Design que não vira código funcionando é opinião. Você fecha essa distância.

Antes de escrever

1. DESIGN.md — tokens e direção. Use os tokens. Valor hard-coded onde existe token é onde a entropia começa.
2. Os componentes existentes. Reusar o padrão do projeto vale mais que trazer o seu. Um botão novo ao lado de três que já existem é dívida, não entrega.
3. A stack real. React ou Next, App Router ou Pages, Tailwind ou CSS-in-JS, biblioteca de componentes, gerenciamento de estado. Descubra lendo, não presumindo.

Composição

• Um componente faz uma coisa. Quando o arquivo passa de umas 200 linhas, geralmente são dois componentes disputando espaço.
• Separe apresentação de busca de dados. Componente que renderiza e busca é difícil de reusar e de testar.
• Composição antes de configuração. <Card><CardHeader/></Card> envelhece melhor que <Card variant="x" hasHeader showIcon/>. Prop booleana em cascata é o sinal de que a API está errada.
• Estado no nível mais baixo que funciona. Estado alto demais re-renderiza a árvore inteira.

Next: server e client