Skill shadcn/ui para OpenClaw

Visão Geral do Skill shadcn/ui do OpenClaw

O skill shadcn/ui conecta o OpenClaw à biblioteca de componentes shadcn/ui, dando ao seu agente a capacidade de adicionar, configurar e compor componentes React acessíveis no seu projeto. Uma vez instalado, você pode criar funcionalidades completas de UI — formulários, tabelas de dados, navegação, diálogos e mais — usando descrições em português simples.

Diferente de bibliotecas de componentes tradicionais que são distribuídas como pacotes npm, o shadcn/ui copia o código-fonte dos componentes diretamente no seu projeto. Isso significa que você é dono de cada linha de código e pode personalizar os componentes sem lutar contra abstrações de biblioteca. O skill shadcn/ui do OpenClaw torna esse fluxo de trabalho ainda mais rápido ao lidar com seleção, instalação, composição e estilização de componentes por meio de conversa.

Fluxo de trabalho típico:

1. Peça ao OpenClaw para adicionar uma tabela de dados com ordenação e paginação.
2. O agente executa npx shadcn@latest add table e componentes relacionados, depois gera a implementação da tabela com as colunas especificadas.
3. Uma tabela de dados totalmente funcional e acessível aparece no seu projeto — pronta para personalizar.

Este skill é feito para projetos React e Next.js usando Tailwind CSS. Ele combina naturalmente com o skill Frontend Design para orientação de layout e UX e funciona bem junto com qualquer workflow de design system.

Pré-requisitos para o Skill shadcn/ui

Antes de instalar o skill shadcn/ui, certifique-se de ter:

• OpenClaw instalado e funcionando (v1.0+)
• Um projeto React ou Next.js com Tailwind CSS configurado
• Node.js v18+ e um gerenciador de pacotes (npm, pnpm ou bun)
• clawhub CLI instalado para gerenciamento de skills

Verifique sua configuração:

# Verificar versão do OpenClaw
openclaw --version

# Verificar versão do Node.js
node --version

# Verificar se o Tailwind CSS está configurado
npx tailwindcss --help

Se você está iniciando um novo projeto, o agente pode ajudá-lo a inicializar um projeto Next.js com shadcn/ui pré-configurado usando npx shadcn@latest init.

Como Instalar o Skill shadcn/ui

Instale o skill shadcn/ui com um único comando:

npx clawhub@latest install shadcn-ui

Para verificar a instalação:

clawhub list

Você deve ver shadcn-ui na lista de skills instalados.

Configuração do Skill shadcn/ui

O skill shadcn/ui não requer chaves de API ou autenticação externa. Ele funciona com os arquivos locais do seu projeto e o CLI do shadcn.

Inicialização do Projeto

Se o seu projeto ainda não tem o shadcn/ui configurado, o agente pode inicializá-lo:

# Inicializar shadcn/ui no seu projeto
npx shadcn@latest init

Isso cria um arquivo de configuração components.json na raiz do seu projeto com as seguintes configurações:

| Configuração | Descrição | |---------|-------------| | style | Variante de estilo do componente (default ou new-york) | | tailwind.baseColor | Cor base para o tema (slate, gray, zinc, etc.) | | tailwind.cssVariables | Se deve usar variáveis CSS para tematização | | aliases.components | Alias de caminho de importação para componentes | | aliases.utils | Alias de caminho de importação para funções utilitárias |

Personalização de Tema

Personalize o tema padrão editando suas variáveis CSS ou pedindo ao agente para ajustar as cores:

/* Exemplo: Variáveis de tema personalizadas em globals.css */
@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
  }
}

Importante: os componentes shadcn/ui são copiados para o código-fonte do seu projeto. Você tem controle total sobre cada componente — não há dependências ocultas nem abstrações bloqueadas.

Exemplos de Uso do Skill shadcn/ui

1. Adicionar um Formulário Completo

Você: "Crie um formulário de cadastro de usuário com campos para nome, e-mail, senha e uma caixa de seleção de termos. Adicione validação usando zod."

O agente instala os componentes necessários (form, input, checkbox, button, label) usando npx shadcn@latest add, depois gera um componente de formulário completo com validação de esquema zod, mensagens de erro e labels acessíveis. O formulário segue os padrões do React Hook Form e está pronto para conectar à sua API.

2. Construir uma Tabela de Dados

Você: "Adicione uma tabela de dados para exibir usuários com colunas para nome, e-mail, cargo e status. Inclua ordenação, filtragem e paginação."

O agente adiciona o componente table e constrói uma tabela de dados completa usando @tanstack/react-table. Ele gera definições de colunas, controles de filtro, manipuladores de ordenação e paginação — tudo com tipagem TypeScript adequada e atributos de acessibilidade.

3. Criar um Layout de Dashboard

Você: "Configure um layout de dashboard com uma barra lateral retrátil, barra de navegação superior, breadcrumbs e uma área de conteúdo principal."

O agente instala os componentes sidebar, navigation-menu, breadcrumb e separator, depois os monta em um layout responsivo com alternância de barra lateral amigável para dispositivos móveis e estrutura HTML semântica adequada.

4. Adicionar uma Paleta de Comandos

Você: "Adicione uma paleta de comandos como a do VS Code com o atalho Ctrl+K que permite aos usuários buscar páginas e ações."

O agente instala os componentes command e dialog, configura o listener de atalho de teclado e cria um menu de comandos pesquisável com itens agrupados, ícones e manipuladores de navegação.

5. Compor uma Página de Configurações

Você: "Construa uma página de configurações com abas para Perfil, Conta, Notificações e Aparência. Use cards dentro de cada aba para agrupar opções relacionadas."

O agente instala os componentes tabs, card, switch, select e separator, depois constrói uma interface completa de configurações com campos de formulário, toggles e seletores dropdown organizados em grupos lógicos de abas.

Segurança e Melhores Práticas

Siga estas diretrizes ao usar o skill shadcn/ui:

• Revise o código gerado. O agente gera código de componentes diretamente no seu projeto. Sempre revise novos arquivos e alterações antes de fazer commit, especialmente manipuladores de formulários e integrações com API.
• Valide a entrada do usuário. O shadcn/ui fornece componentes de UI, não validação de entrada. Sempre combine formulários com validação no lado do servidor usando bibliotecas como zod ou yup, e sanitize as entradas antes de processá-las.
• Mantenha as dependências atualizadas. Os componentes shadcn/ui dependem de primitivos Radix UI e outros pacotes. Execute npm audit periodicamente e atualize dependências vulneráveis.
• Use HTML semântico. O agente gera marcação acessível por padrão, mas verifique se modificações personalizadas preservam os atributos ARIA e a navegação por teclado.
• Siga o padrão de componentes. Mantenha os componentes shadcn/ui no diretório designado de componentes (ex.: components/ui/). Evite modificá-los inline — estenda-os por composição. Consulte a Lista de Verificação de Segurança para orientações gerais do OpenClaw.

Solução de Erros Comuns

"components.json not found"

Seu projeto ainda não foi inicializado com o shadcn/ui.

# Inicializar shadcn/ui no seu projeto
npx shadcn@latest init

Siga as instruções para selecionar seu estilo, cor base e aliases de importação. O agente também pode executar isso por você.

"Module not found: Can't resolve '@/components/ui/button'"

O alias de caminho de importação não corresponde à configuração do seu projeto.

1. Verifique o caminho do alias configurado no seu components.json.
2. Verifique se o seu tsconfig.json possui aliases de caminho correspondentes:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3. Se estiver usando Next.js, reinicie o servidor de desenvolvimento após alterar o tsconfig.json.

"Tailwind CSS classes not applying"

O Tailwind não está processando o diretório de arquivos de componentes.

1. Verifique se o seu tailwind.config.js inclui o caminho dos componentes:

module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
}

2. Certifique-se de que o globals.css importa as diretivas do Tailwind (@tailwind base; @tailwind components; @tailwind utilities;).
3. Reinicie o servidor de desenvolvimento.