O que shadcn-first faz?
Alguém mantém esse código depois de você. Cada div escrita manualmente com classes personalizadas e cada style={{}} é algo que eles precisam manter vivo – e ele se degrada. UI feita à mão também descarta silenciosamente a qualidade que vem de fábrica com a biblioteca: focus rings, estados hover e active, navegação por teclado, skeletons, estados vazios, ARIA.
A ordem. Nunca pule uma etapa.
- Bloco.
ui.shadcn.com/blockstem sidebars, dashboards, logins, tabelas de dados completos. Instale o bloco. - Componente. Se nenhum bloco servir, use um componente do registro.
- Componha dois ou três componentes.
- Escreva você mesmo. Só aqui, e a mensagem do commit deve nomear qual bloco ou componente você avaliou e por que não serviu.
Adapte o design ao componente, não o componente ao design. A marca e a linguagem visual são alcançadas por variáveis de tema em um único tema, nunca por CSS por tela junto ao componente.
Ferramentas, e qual usar
Dois servidores MCP estão configurados. Eles fazem trabalhos diferentes.
shadcn-official (npx shadcn@latest mcp) é ciente do projeto: ele lê o components.json do repositório. Use-o para o trabalho real.
| Ferramenta | Use para |
|---|---|
get_project_registries | confirmar se o projeto foi inicializado |
search_items_in_registries | encontrar o componente ideal, busca difusa |
list_items_in_registries | ver tudo disponível |
view_items_in_registries | ler o código-fonte real e as dependências de um componente antes de usá-lo |
get_item_examples_from_registries | copiar um exemplo real de uso em vez de adivinhar a API |
get_add_command_for_items | obter a linha exata npx shadcn add … e depois executá-la |
get_audit_checklist | executar depois de escrever código. Este é o portão de validação. |
shadcn (@jpisnice/shadcn-ui-mcp-server) opera no registro inteiro e conhece blocos e temas: list_blocks, get_block, list_themes, get_theme, get_component_demo. Use-o para a etapa 1 e para temas.
Se um projeto não tiver components.json, as ferramentas oficiais dão erro. Execute npx shadcn@latest init primeiro, depois continue.
Para interfaces de chat com IA, use prompt-kit (prompt-kit.com, compatível com shadcn): chat-container, message, prompt-input, scroll-button, markdown, code-block, loader. Mesma regra: instale em vez de recriar.
Componentes que as pessoas reinventam em vez de instalar
sidebar (colapsável, com menu do usuário no rodapé), command (paleta Cmd+K), table + bloco de tabela de dados TanStack, tabs, sheet, dialog, alert-dialog, popover, tooltip, skeleton, sonner (toasts), form (react-hook-form + zod), breadcrumb, resizable, scroll-area, avatar, badge, separator, dropdown-menu, select, collapsible, chart.
Se você se pegar construindo qualquer um desses manualmente, pare e instale.
Atalhos de teclado
Use Cmd+K para a paleta de comandos; essa é a convenção do cmdk que o componente command já entrega. Cmd+L é reservado pelo navegador para a barra de endereços e não pode ser interceptado de forma confiável no Chrome. Se alguém pedir Cmd+L, vincule Cmd+K, adicione Cmd+L oportunisticamente e explique o motivo.
Pronto significa medido, não apenas afirmado
Antes de reportar como concluído, execute get_audit_checklist e reporte os números:
- linhas de UI customizada removidas
- blocos e componentes instalados
- ocorrências restantes de
style={{}}(grep -rc 'style={{' src/) - por tela: elementos de
components/ui/versus escritos manualmente
Qualquer coisa ainda escrita manualmente deve estar lá com um motivo declarado, não ser ignorada. Uma captura de tela é a prova de que a tela renderiza; as contagens são a prova de que a regra foi seguida. Ambos, senão não está pronto.
Não faça
- Sem emojis na UI. Ícones SVG reais (Lucide já vem com shadcn).
- Sem texto dentro de círculos para logotipos de marca. Use caminhos SVG reais: SimpleIcons > svgl.app > gilbarbara/logos > favicon.
- No máximo uma ou duas cores de destaque. Sem bordas esquerdas coloridas em cards. Sem gradiente em todo elemento.
- Não faça fork de um componente para mudar uma cor. Altere a variável de tema.