prof-ramos/shadcn-ui-skill

O que shadcn-ui-skill faz?

Habilidade abrangente de shadcn/ui para Claude Code - Guias de instalação, exemplos de componentes e melhores práticas para usar shadcn/ui em projetos React

Visão Geral

Esta habilidade capacita o Claude Code a trabalhar com shadcn/ui, uma coleção de componentes React reutilizáveis construídos com Radix UI e Tailwind CSS. Ela fornece assistência contextual para:

• Instalar e configurar shadcn/ui do zero
• Usar componentes de UI com exemplos práticos
• Personalizar temas e estilos
• Seguir padrões de acessibilidade e boas práticas

Plataformas Suportadas

• Claude Code (recomendado)
• Cline e Roo Code (compatível com arquivos .clinerules)

Instalação

Via Claude Code

Adicione o arquivo de habilidade ao seu projeto ou use o comando abaixo:

# Clone ou baixe o repositório da habilidade
# https://github.com/prof-ramos/shadcn-ui-skill

Para Cline / Roo Code

Copie o conteúdo de SKILL.md para o arquivo .clinerules na raiz do seu projeto.

Uso

Uma vez instalada, o Claude Code usará automaticamente esta habilidade ao detectar um projeto shadcn/ui. Exemplos de comandos que funcionam melhor:

"Adicione um componente de diálogo que usa shadcn/ui" "Como personalizar o tema no shadcn/ui?" "Mostre um exemplo de formulário com validação usando shadcn/ui"

Componentes Principais

A habilidade inclui orientação sobre estes componentes comuns:

• Button - Botões com variantes (default, secondary, outline, ghost, link)
• Card - Contêineres com cabeçalho, conteúdo e rodapé
• Dialog - Janelas modais acessíveis
• Form - Construção de formulários com validação
• Input - Campos de entrada com estilos consistentes
• Select - Menus suspensos estilizados
• Table - Tabelas de dados responsivas
• Tabs - Navegação por abas

Exemplo de Código

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export default function Home() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Criar Projeto</CardTitle>
        <CardDescription>Configure seu novo projeto em segundos.</CardDescription>
      </CardHeader>
      <CardContent>
        <Button variant="default">Começar</Button>
      </CardContent>
    </Card>
  )
}

Personalização de Tema

O shadcn/ui usa variáveis CSS para temas. Exemplo:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
  }
}

Boas Práticas

• Sempre importe componentes do diretório @/components/ui/*
• Use o sistema de variantes (variant) para consistência visual
• Aproveite os componentes Radix UI para acessibilidade nativa
• Mantenha o arquivo components.json atualizado para configuração do projeto
• Para formulários complexos, combine shadcn/ui com react-hook-form e zod

Recursos Adicionais

• Documentação oficial do shadcn/ui
• Repositório GitHub
• Radix UI Primitives

Licença

MIT