§1O problema
Nenhum código de interface era compartilhado: arquivos idênticos copiados entre apps (CSS e utilitários byte a byte iguais), cada tela com cor e estilo próprios, e mudar a marca exigia mexer em tudo.
§2O que eu construí
- Pacote de UIInstalado nos apps por caminho local (sem publicar no npm): dezenas de componentes, como Toast, Tabela, Calendário, Quadro kanban, Editor de recorrência, Cabeçalho e Shell.
- TokensTokens semânticos de cor, com tema claro e escuro, e tipografia fixa.
- StorybookUm arquivo por componente, em três grupos: Fundações, Átomos e Compostos.
- ScriptsScript de contraste (WCAG) e gerador dos ícones dos apps.
- Sync com ferramenta de designSincronização com uma ferramenta de design com IA (projeto com 33 componentes).
§3As partes difíceis
5 itens- 01
Regras duras
Só Tailwind, só tokens semânticos, @theme inline para o modo escuro não congelar.
- 02
Contraste verificado por script
Em fundos, cartões e superfícies, nos dois temas.
- 03
Ícones gerados por código
A partir do componente de marca, com checagem (--check).
- 04
Sync com a ferramenta de design
O conversor lê os tipos do pacote; o Storybook foi reorganizado para resolver os componentes pelo título, sem adaptação especial.
- 05
Armadilhas do dia a dia documentadas
Por exemplo, a variante dark: do Tailwind não funciona ali; o README tem a receita de instalação.
§4Resultado
- apps usando o pacote
- 14
- páginas no Storybook, uma por componente
- 67
Usado por 14 apps escolhidos. Storybook rodando localmente. Reorganização em julho de 2026: de 100 stories em 2 títulos para 67 páginas, uma por componente.
§5Stack
- React 19
- TypeScript
- Tailwind 4
- Storybook 10
- Python (script de contraste)
- Node (gerador de ícones)