Menu
当用户想做导航栏、卡片、弹窗、侧边栏、定价页等 UI 组件时使用 — 生成可直接使用的 UI 组件
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
当用户踩坑后想记录经验教训、当调试完想防止同样的问题再次发生、当做了重要技术决策想记录时使用 — 自动更新 CLAUDE.md 的已知陷阱和决策日志
当用户首次使用模板、想配置项目信息、需要填写 CLAUDE.md 占位符时使用 — 通过问答自动填写项目信息
当用户想检查无障碍性、添加 ARIA 标签、修复键盘导航或对比度问题时使用 — 检查并修复网站无障碍性问题
当用户想写接口、创建 API、生成后端端点、做增删改查接口时使用 — 生成 RESTful API 端点，包含路由、验证和错误处理
当用户想加登录、注册、用户认证、OAuth、JWT、权限控制时使用 — 为项目添加完整的用户认证系统
当用户想搭建博客、做个人网站、写技术文章、建内容站时使用 — 从零生成完整的博客网站
| name | component |
| description | 当用户想做导航栏、卡片、弹窗、侧边栏、定价页等 UI 组件时使用 — 生成可直接使用的 UI 组件 |
帮用户快速生成一个即用的 UI 组件。
如果用户已经说了想要什么，直接开始。
如果没有，展示常用组件列表：
你想生成什么组件？常见的有：
- 导航栏（Navbar）
- 登录/注册表单
- 定价页（Pricing）
- 卡片列表（Cards）
- 页脚（Footer）
- 数据表格（Table）
- 弹窗/对话框（Modal）
- 侧边栏（Sidebar）
- 搜索框（Search）
- 通知栏（Notification）
- 上传区域（Upload）
- 评论区（Comments）
也可以直接描述你想要的。
查看项目中使用的前端框架和 UI 库：
同时观察项目已有组件的代码风格，保持一致。
生成的组件必须：
生成后告诉用户组件放在了哪里，以及如何使用。
询问是否需要调整：
组件已生成。需要调整样式、布局或功能吗？