Communitygithub.com

chakra-ui/chakra-ui-builder

使用Chakra UI v3构建响应式、无障碍的UI组件和布局,安装或配置Chakra UI到新项目和现有项目中,并利用Token、语义Token、Recipe和Slot Recipe设计可扩展的主题。

chakra-ui-builder 是什么?

该技能旨在帮助开发者快速使用Chakra UI v3构建用户界面。它支持从零开始创建组件、页面、表单、仪表盘、导航栏、卡片、落地页定价表等各种UI元素,也适用于在现有项目中添加或配置Chakra UI。技能涵盖了Chakra UI的核心功能,包括设置ChakraProvider、运行CLI代码片段、配置颜色模式以及修复Provider包裹问题。在主题定制方面,该技能提供了定义品牌颜色、设计Token和语义Token、设置暗模式值、编写组件Recipe和Slot Recipe、类型生成(typegen)以及抽离默认主题等全套能力。该技能智能识别自然语言请求,无论是像“添加我的品牌颜色”、“创建一个可复用的卡片样式”、“构建一个条形图”、“显示折线图”、“制作一个登录表单”还是“构建侧边栏”这样的随意表述,都能准确触发。它确保开发者能够高效、一致地构建无障碍且响应式的UI。

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

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

chakra-ui-builder 是做什么的?

使用Chakra UI v3构建响应式、无障碍的UI组件和布局,安装或配置Chakra UI到新项目和现有项目中,并利用Token、语义Token、Recipe和Slot Recipe设计可扩展的主题。当用户要求使用Chakra UI构建、创建或生成任何UI组件、页面、表单、仪表盘、导航栏、卡片、落地页、定价表或布局时;或者想要添加Chakra UI到项目、设置ChakraProvider、运行CLI代码片段、配置颜色模式或修复Provider包裹时;或者询问主题——定义品牌颜色、设计Token、语义Token、暗模式值、组件Recipe、Slot Recipe、类型生成(typegen)或抽离默认主题时,请使用此技能。在任何涉及Chakra UI构建、设置、主题或图表的请求时触发,无论表述如何随意——比如“添加我的品牌颜色”、“创建一个可复用的卡片样式”、“构建一个条形图”、“显示折线图”、“制作一个登录表单”、“构建侧边栏”、“向我的应用添加Chakra”。

相关技能