Communitygithub.com

chakra-ui/chakra-ui-builder

Crie componentes e layouts de UI responsivos e acessíveis usando o Chakra UI v3, instale ou configure o Chakra UI em projetos novos e existentes e projete temas escaláveis usando tokens, tokens semânticos, receitas e slot receitas.

O que é chakra-ui-builder?

Esta skill capacita o agente a construir, instalar, configurar e tematizar interfaces de usuário utilizando o Chakra UI v3. Ela é acionada sempre que o usuário solicitar a criação de qualquer componente de UI (como botões, formulários, cartões, barras de navegação, dashboards, landing pages, tabelas de preços) ou layouts usando Chakra UI; quiser adicionar o Chakra UI a um projeto, configurar o `ChakraProvider`, executar snippets CLI, ajustar o modo de cores ou corrigir problemas de wrapping de provider; ou fizer perguntas sobre theming — definição de cores da marca, tokens de design, tokens semânticos, valores de modo escuro, receitas de componentes, slot receitas, typegen ou ejeção do tema padrão. Também cobre a criação de gráficos (barras, linhas, etc.) com Chakra UI. A skill é compatível com agentes como Claude Code, Cursor e Codex, e funciona interpretando descrições em linguagem natural para gerar o código React/TypeScript correspondente, manipular instalação de dependências e modificar arquivos de tema. Ela se baseia na documentação oficial do Chakra UI v3, incluindo a arquitetura de tokens, receitas e slot receitas, para gerar código consistente e escalável.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/chakra-ui/chakra-ui/tree/main/skills/chakra-ui-builder

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que chakra-ui-builder faz?

Crie componentes e layouts de UI responsivos e acessíveis usando o Chakra UI v3, instale ou configure o Chakra UI em projetos novos e existentes e projete temas escaláveis usando tokens, tokens semânticos, receitas e slot receitas. Use esta skill sempre que um usuário pedir para construir, criar ou gerar qualquer componente de UI, página, formulário, dashboard, barra de navegação, cartão, seção de landing page, tabela de preços ou layout usando o Chakra UI; quiser adicionar o Chakra UI a um projeto, configurar o ChakraProvider, executar snippets CLI, configurar o modo de cores ou corrigir o wrapping do provider; ou perguntar sobre theming — definição de cores da marca, tokens de design, tokens semânticos, valores de modo escuro, receitas de componentes, slot receitas, typegen, ou ejetar o tema padrão. Ative esta skill em qualquer solicitação de construção, configuração ou theming com Chakra UI ou de gráficos, mesmo que de forma casual — "adicione minhas cores da marca", "crie um estilo de cartão reutilizável", "construa um gráfico de barras", "mostre-me um gráfico de linhas", "faça um formulário de login", "construa uma barra lateral", "adicione Chakra ao meu app".

Habilidades Relacionadas