component

Name: component
Author: lightpointventures

36stars6forks

How to install component?

lightpointventures/claude-code-starter/component

$npx -y skills add lightpointventures/claude-code-starter --skill component

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# 生成 UI 组件
2
3	帮用户快速生成一个即用的 UI 组件。
4
5	## 步骤
6
7	### 1. 确定组件类型
8
9	如果用户已经说了想要什么，直接开始。
10
11	如果没有，展示常用组件列表：
12	> 你想生成什么组件？常见的有：
13	> - 导航栏（Navbar）
14	> - 登录/注册表单
15	> - 定价页（Pricing）
16	> - 卡片列表（Cards）
17	> - 页脚（Footer）
18	> - 数据表格（Table）
19	> - 弹窗/对话框（Modal）
20	> - 侧边栏（Sidebar）
21	> - 搜索框（Search）
22	> - 通知栏（Notification）
23	> - 上传区域（Upload）
24	> - 评论区（Comments）
25	>
26	> 也可以直接描述你想要的。
27
28	### 2. 检查项目技术栈
29
30	查看项目中使用的前端框架和 UI 库：
31	- 有 React/Vue/Svelte → 生成对应框架的组件
32	- 有 Tailwind/Bootstrap → 使用对应的样式方案
33	- 什么都没有 → 生成纯 HTML + CSS
34
35	同时观察项目已有组件的代码风格，保持一致。
36
37	### 3. 生成组件
38
39	生成的组件必须：
40	- 可以直接复制到项目中使用
41	- 响应式布局，移动端友好
42	- 包含基本的交互状态（hover、active、disabled）
43	- 表单类组件包含基本的输入验证
44	- 代码简洁，不过度封装
45
46	### 4. 展示并确认
47
48	生成后告诉用户组件放在了哪里，以及如何使用。
49
50	询问是否需要调整：
51	> 组件已生成。需要调整样式、布局或功能吗？

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

component

36stars6forks

View on GitHub

How to install component?

lightpointventures/claude-code-starter/component

$npx -y skills add lightpointventures/claude-code-starter --skill component

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# 生成 UI 组件
2
3	帮用户快速生成一个即用的 UI 组件。
4
5	## 步骤
6
7	### 1. 确定组件类型
8
9	如果用户已经说了想要什么，直接开始。
10
11	如果没有，展示常用组件列表：
12	> 你想生成什么组件？常见的有：
13	> - 导航栏（Navbar）
14	> - 登录/注册表单
15	> - 定价页（Pricing）
16	> - 卡片列表（Cards）
17	> - 页脚（Footer）
18	> - 数据表格（Table）
19	> - 弹窗/对话框（Modal）
20	> - 侧边栏（Sidebar）
21	> - 搜索框（Search）
22	> - 通知栏（Notification）
23	> - 上传区域（Upload）
24	> - 评论区（Comments）
25	>
26	> 也可以直接描述你想要的。
27
28	### 2. 检查项目技术栈
29
30	查看项目中使用的前端框架和 UI 库：
31	- 有 React/Vue/Svelte → 生成对应框架的组件
32	- 有 Tailwind/Bootstrap → 使用对应的样式方案
33	- 什么都没有 → 生成纯 HTML + CSS
34
35	同时观察项目已有组件的代码风格，保持一致。
36
37	### 3. 生成组件
38
39	生成的组件必须：
40	- 可以直接复制到项目中使用
41	- 响应式布局，移动端友好
42	- 包含基本的交互状态（hover、active、disabled）
43	- 表单类组件包含基本的输入验证
44	- 代码简洁，不过度封装
45
46	### 4. 展示并确认
47
48	生成后告诉用户组件放在了哪里，以及如何使用。
49
50	询问是否需要调整：
51	> 组件已生成。需要调整样式、布局或功能吗？

People who liked this also viewed

6 picks

Type