Communitygithub.com

chakra-ui/chakra-ui-builder

Construye componentes y diseños de interfaz de usuario responsivos y accesibles con Chakra UI v3, instala o configura Chakra UI en proyectos nuevos o existentes, y diseña temas escalables usando tokens, tokens semánticos, recetas y recetas de slots.

¿Qué es chakra-ui-builder?

Esta habilidad está diseñada para ayudar a desarrolladores y agentes de IA a construir, crear o generar cualquier componente de interfaz de usuario (páginas, formularios, paneles, barras de navegación, tarjetas, secciones de aterrizaje, tablas de precios, diseños) utilizando Chakra UI v3. También permite instalar o configurar Chakra UI en proyectos nuevos o existentes, configurar ChakraProvider, ejecutar fragmentos CLI, configurar el modo de color o corregir el envoltorio del proveedor. Además, soporta tareas de tematización avanzada, como la definición de colores de marca, tokens de diseño, tokens semánticos, valores de modo oscuro, recetas de componentes, recetas de slots, typegen o la extracción del tema predeterminado. La habilidad se activa con cualquier solicitud relacionada con la construcción, configuración o tematización de Chakra UI, incluso si se expresa de manera casual (por ejemplo, 'agrega mis colores de marca', 'haz un estilo de tarjeta reutilizable', 'construye un gráfico de barras', 'muéstrame un gráfico de líneas', 'hazme un formulario de inicio de sesión', 'construye una barra lateral', 'agrega Chakra a mi aplicación'), garantizando una experiencia fluida y accesible para desarrolladores.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace chakra-ui-builder?

Construye componentes y diseños de interfaz de usuario responsivos y accesibles con Chakra UI v3, instala o configura Chakra UI en proyectos nuevos o existentes, y diseña temas escalables usando tokens, tokens semánticos, recetas y recetas de slots. Usa esta habilidad siempre que un usuario solicite construir, crear o generar cualquier componente de interfaz de usuario, página, formulario, panel, barra de navegación, tarjeta, sección de aterrizaje, tabla de precios o diseño utilizando Chakra UI; desee agregar Chakra UI a un proyecto, configurar ChakraProvider, ejecutar fragmentos CLI, configurar el modo de color o corregir el envoltorio del proveedor; o pregunte sobre tematización — definición de colores de marca, tokens de diseño, tokens semánticos, valores de modo oscuro, recetas de componentes, recetas de slots, typegen o extracción del tema predeterminado. Actívala ante cualquier solicitud de construcción, configuración o tematización de Chakra UI o gráficos, por muy casual que sea la expresión — "agrega mis colores de marca", "haz un estilo de tarjeta reutilizable", "construye un gráfico de barras", "muéstrame un gráfico de líneas", "hazme un formulario de inicio de sesión", "construye una barra lateral", "agrega Chakra a mi aplicación".

Skills relacionados