React (Chakra UI)
一个帮助开发者快速生成Chakra UI React组件的AI技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React (Chakra UI)。 它的用途是：一个帮助开发者快速生成Chakra UI React组件的AI技能。 详细介绍见：https://321skill.com/skills/react-chakra-ui/ 请根据该页面的说明完成安装。
使用示例
“帮我用Chakra UI创建一个登录表单，包含邮箱和密码输入框、记住我复选框以及提交按钮，要求有校验提示和响应式布局。”，它会生成完整的表单组件JSX代码，包含FormControl、Input、Checkbox、Button等组件，并处理好错误状态和基础响应式断点。
介绍
这个Skill旨在解决开发者在构建React应用时，需要花费大量时间手动编写和调试Chakra UI组件代码的问题。它通过理解开发者的自然语言描述，直接生成符合Chakra UI设计规范和最佳实践的React组件代码，极大提升了前端开发的效率。
使用时，开发者只需向AI描述想要实现的UI组件或界面功能，例如“创建一个包含头像、用户名和操作按钮的用户卡片”，Skill便会生成对应的、可直接使用的Chakra UI代码片段，包括必要的导入语句、组件结构和样式属性。
它非常适合前端开发、全栈开发以及任何需要在React项目中快速搭建UI界面的开发者。对于不熟悉Chakra UI API的新手，它也是一个绝佳的学习工具。
建议在使用时，尽量清晰地描述组件的布局、交互状态（如hover）和响应式需求。虽然Skill能生成高质量的代码，但生成后仍需开发者根据具体业务逻辑进行微调和集成测试，以确保与项目其他部分完美融合。
核心特点
与通用的代码生成技能不同，它深度集成了Chakra UI的组件库、主题系统和样式道具，生成的代码不仅语法正确，更符合Chakra UI的设计哲学和配置模式，开箱即用。
注意事项
不适合生成与Chakra UI无关的UI框架（如Ant Design, Material-UI）代码或复杂的业务逻辑代码。
常见问题
它能生成完整的React页面吗？
可以生成页面的核心UI结构，但复杂的页面逻辑和状态管理仍需开发者补充。
需要提前安装Chakra UI吗？
是的，你需要在项目中安装并配置好@chakra-ui/react及相关依赖，生成的代码才能直接运行。