# Modo código — construir tela, componente ou página DO ZERO

> Roteiro do modo **código** da skill `seed-ds` 2026.10.31+89194dea (canon de 2026-10-31), gerado por `06-validacao/geradores/gen-skill.py` a partir de https://ds.seed.eng.br. Caminhos deste arquivo são relativos à pasta da skill (onde está o `SKILL.md`).
> **Comece por aqui** quando o pedido for tela, componente, página, formulário, dashboard, código React/Tailwind/shadcn ou mockup estático de interface, **do zero**.

> Material que JÁ EXISTE não vem para cá: vai no **modo ADEQUAÇÃO**, que fica inteiro no `SKILL.md` porque
> começa medindo o que diverge antes de mexer.

Este modo é a **aplicação da regra de consulta** do `SKILL.md`, não um segundo caminho: índice → receita →
mínimo → 3 a 5 fatias além do mínimo, se a tarefa pedir.

0. **Que tela é? O SHELL primeiro, o gabarito depois.** Tela de produto (SIGA, app interno) **vive dentro do
   shell** `seed-componentes.md` §46 (rail · topbar · sidebar · conteúdo; SH1–SH23), que é o começo da receita
   "tela de produto". Só então abra o gabarito do CONTEÚDO (lista, tabela, painel, detalhe, quadro,
   configurações…) — ele é o que vai na região `conteudo`. A tela de referência de um gabarito pode estar
   publicada **sem a casca**: isso é bancada, não produto — a página `https://ds.seed.eng.br/telas/` diz, por gabarito, onde
   ele vive no produto (SH17, §46.4). Fora do shell só autenticação, página pública (§47) e documento
   exportado. Em 2026-09-14 uma tela do ERP nasceu sem rail por seguir o gabarito à risca; esta linha existe
   por isso.
1. **Tokens pelo registry** (`references/registry.md`): `@seed/tokens` (as variáveis `--seed-*`),
   `@seed/theme` (os apelidos do shadcn apontando para elas) e `@seed/fontes`. O código consome **só
   semânticos** (`--seed-text-primary`, `--seed-surface-brand-deep`…), nunca primitivo, nunca hex, nunca cor
   padrão do Tailwind. **Material (vidro e metal, §93, MA1–MA14):** só pelo item `@seed/material` —
   classes `.seed-mat-*` emitidas do módulo único, ligadas por `data-material="vidro-metal"` no `<html>`;
   nunca `backdrop-filter` nem gradiente de metal à mão. Vidro vai na navegação e nos cartões que flutuam;
   conteúdo denso, diálogos, menus, e-mail e impresso ficam opacos (MA3, MA12); quem cria fundo novo mede o
   contraste sobre ele com a régua rasterizada da casa (MA7). Regra, amostra viva e bancada: https://ds.seed.eng.br/material/.
2. **O componente**: a seção dele no `seed-componentes.md` v2.00 — estados, tamanhos, acessibilidade (WCAG 2.2
   AA é o piso), o contrato de bancada. Ache a seção pelo `_index.md` do canônico no ar, ou por
   `references/mapa/seed-componentes.md` (o mapa diz a seção e o endereço; o texto dela está no ar). Se a página
   da vitrine tiver bancada embutida, ela é o
   comportamento aprovado.
3. **A composição**: `seed-composicao.md` (leis CP1–CP32: grid, densidade, breakpoints, container queries).
4. **A tela**: os gabaritos em `https://ds.seed.eng.br/telas/` (shell, lista, tabela, painel, detalhe, chat, quadro, gantt…).
5. **Ícones**: `references/icones-nm4.md` (≈ 5111 tokens) — quando usar glifo do set SEED, quando importar
   do Lucide, quando criar.
6. **Camada de máquina** de toda página (§47, MK1–MK23: um h1, title/description, canônica, lang, alt, nav
   nomeada, JSON-LD por tipo, nunca marcar o que não se vê) e formulário legível por agente (type, inputmode,
   autocomplete, label, erro em aria-describedby).
7. **Prática de código com o DS**: `seed-praticas.md` §14 (React, Tailwind, shadcn com tokens) — depois do
   canon, e só no que não o contradiz; mockup do SIGA: §12–§13 (dados sintéticos inclusive).

Mockup estático é este modo com o rótulo "estático": mesmas seções, sem estado nem ARIA — diga no topo que é
mockup. Dados de exemplo: institucionais de `references/empresa.md`; pessoais **fictícios e óbvios** (nunca
reais — LGPD).

**Antes de entregar:** a FICHA (a seção "Antes de entregar" do `SKILL.md`, detalhe em `references/ficha.md`) e,
para tudo que o canon não cobrir, o pedido de cobertura preenchido (`references/pedido-de-cobertura.md`).