Component

当用户想做导航栏、卡片、弹窗、侧边栏、定价页等 UI 组件时使用 — 生成可直接使用的 UI 组件

lightpointventures 51914dd 1.5 KB Updated

File contents

生成 UI 组件

帮用户快速生成一个即用的 UI 组件。

步骤

1. 确定组件类型

如果用户已经说了想要什么,直接开始。

如果没有,展示常用组件列表:

你想生成什么组件?常见的有:

  • 导航栏(Navbar)
  • 登录/注册表单
  • 定价页(Pricing)
  • 卡片列表(Cards)
  • 页脚(Footer)
  • 数据表格(Table)
  • 弹窗/对话框(Modal)
  • 侧边栏(Sidebar)
  • 搜索框(Search)
  • 通知栏(Notification)
  • 上传区域(Upload)
  • 评论区(Comments)

也可以直接描述你想要的。

2. 检查项目技术栈

查看项目中使用的前端框架和 UI 库:

  • 有 React/Vue/Svelte → 生成对应框架的组件
  • 有 Tailwind/Bootstrap → 使用对应的样式方案
  • 什么都没有 → 生成纯 HTML + CSS

同时观察项目已有组件的代码风格,保持一致。

3. 生成组件

生成的组件必须:

  • 可以直接复制到项目中使用
  • 响应式布局,移动端友好
  • 包含基本的交互状态(hover、active、disabled)
  • 表单类组件包含基本的输入验证
  • 代码简洁,不过度封装

4. 展示并确认

生成后告诉用户组件放在了哪里,以及如何使用。

询问是否需要调整:

组件已生成。需要调整样式、布局或功能吗?

lightpointventures/claude-code-starter/tree/main/skills/component commit 51914ddc51

Frequently asked questions

npx skillmds@latest add lightpointventures/component