// skills embutidas · 01

frontend-shadcn

Constrói frontends com ShadCN UI corretamente: inicializa a lib, adiciona componentes antes de usar e força tokens de tema em vez de CSS improvisado.

Abrir na documentação completa GitHub

Metadata

params source bundled Instalada por padrão no repositório Okami-Agent. path file skills/frontend-shadcn/SKILL.md triggers keywords shadcn, frontend, UI, componente, dashboard, página, tela, interface, landing loaded by tool use_skill carrega o corpo completo quando a tarefa casa com a skill.

Quando usar

Projeto React/Next precisa seguir ShadCN UI.
Tela ou dashboard precisa usar @/components/ui e Tailwind tokens.
Contrato contracts.ui.library: shadcn está ativo.

Quando não usar

HTML one-off sem app hospedada: use claude-design.
Projeto que declarou HeroUI: use frontend-heroui.
Quando o usuário pediu só copy ou documentação.

Fluxo recomendado

Garanta Next/React + TypeScript + Tailwind.
Rode npx shadcn@latest init se components.json ainda não existir.
Adicione cada componente antes de usar: npx shadcn@latest add button card input dialog.
Importe de @/components/ui/... e componha com tokens do tema.
Rode build/teste e deixe o ui_gate passar.

Regras

Sem <style> cru, style={{}} ou hex inline.
Não inventar componentes se a lib fornece o padrão.
task_complete só depois de build e gate passarem.

Checklist de conclusão

components.json existe.
@/components/ui resolve.
Componentes usados foram adicionados via CLI.
npm run build passa.

Catálogo de skillsLista geral das skills empacotadas.Skills, gates & tasteComo skills viram verificação.

Abrir esta página nos docs interativos