component-specification

Name: component-specification
Author: echoVic

554stars48forks

How to install component-specification?

echovic/boss-skill/component-specification

$npx -y skills add echoVic/boss-skill --skill component-specification

Installs into the current project.

Summary

UI组件规范，定义按钮、输入框、卡片等基础组件的变体、尺寸、状态

Files · 1

View on GitHub

SKILL.md

1	# UI组件规范
2
3	## 适用场景
4
5	基于设计系统，定义可复用的UI组件规范，确保组件在不同场景下的一致性和完整性。
6
7	## 组件设计原则
8
9	1. 完整性：考虑所有状态（默认、悬停、按下、聚焦、禁用、加载、错误）
10	2. 一致性：同类组件使用相同的设计语言
11	3. 可访问性：支持键盘导航、屏幕阅读器
12	4. 响应式：适配不同屏幕尺寸
13
14	## 基础组件规范
15
16	### 1. 按钮 (Button)
17
18	#### 变体
19
20	\| 变体 \| 用途 \| 视觉特征 \|
21	\|------\|------\|----------\|
22	\| Primary \| 主要操作（每个区域最多1个） \| 实心，品牌色背景，白色文字 \|
23	\| Secondary \| 次要操作 \| 描边，透明背景，品牌色文字 \|
24	\| Ghost \| 低优先级操作 \| 无边框，透明背景，灰色文字 \|
25	\| Danger \| 危险操作（删除、清空） \| 实心，红色背景，白色文字 \|
26	\| Link \| 文本链接 \| 无背景，品牌色文字，下划线 \|
27
28	#### 尺寸
29
30	\| 尺寸 \| 高度 \| 内边距 \| 字号 \| 圆角 \| 最小宽度 \|
31	\|------\|------\|--------\|------\|------\|----------\|
32	\| sm \| 32px \| 12px 16px \| 14px \| 6px \| 64px \|
33	\| md \| 40px \| 12px 20px \| 16px \| 8px \| 80px \|
34	\| lg \| 48px \| 16px 24px \| 16px \| 8px \| 96px \|
35
36	#### 状态
37
38	\| 状态 \| Primary 背景 \| Primary 文字 \| 边框 \| 其他 \|
39	\|------\|--------------\|--------------\|------\|------\|
40	\| 默认 \| `Primary` \| `White` \| - \| - \|
41	\| 悬停 \| `Primary-hover` \| `White` \| - \| cursor: pointer \|
42	\| 按下 \| `Primary-active` \| `White` \| - \| transform: scale(0.98) \|
43	\| 聚焦 \| `Primary` \| `White` \| 2px Primary 外发光 \| outline \|
44	\| 禁用 \| `Gray-200` \| `Gray-400` \| - \| cursor: not-allowed, opacity: 0.6 \|
45	\| 加载 \| `Primary` \| - \| - \| 显示 spinner，文字隐藏 \|
46
47	#### 图标按钮
48
49	\| 属性 \| 值 \|
50	\|------\|-----\|
51	\| 尺寸 \| 32px / 40px / 48px（正方形） \|
52	\| 图标大小 \| 16px / 20px / 24px \|
53	\| 圆角 \| radius-md 或 radius-full（圆形） \|
54
55	#### 代码示例
56
57	```tsx
58	// 主按钮
59	<Button variant="primary" size="md">确认</Button>
60
61	// 次要按钮
62	<Button variant="secondary" size="md">取消</Button>
63
64	// 危险按钮
65	<Button variant="danger" size="md">删除</Button>
66
67	// 禁用状态
68	<Button variant="primary" size="md" disabled>确认</Button>
69
70	// 加载状态
71	<Button variant="primary" size="md" loading>提交中</Button>
72
73	// 带图标
74	<Button variant="primary" size="md" icon={<IconCheck />}>保存</Button>
75
76	// 图标按钮
77	<IconButton variant="ghost" size="md" icon={<IconClose />} />
78	```
79
80	### 2. 输入框 (Input)
81
82	#### 尺寸
83
84	\| 尺寸 \| 高度 \| 内边距 \| 字号 \| 圆角 \|
85	\|------\|------\|--------\|------\|------\|
86	\| sm \| 32px \| 8px 12px \| 14px \| 6px \|
87	\| md \| 40px \| 10px 14px \| 16px \| 8px \|
88	\| lg \| 48px \| 12px 16px \| 16px \| 8px \|
89
90	#### 状态
91
92	\| 状态 \| 边框颜色 \| 背景色 \| 其他 \|
93	\|------\|----------\|--------\|------\|
94	\| 默认 \| `Gray-300` \| `White` \| - \|
95	\| 悬停 \| `Gray-400` \| `White` \| - \|
96	\| 聚焦 \| `Primary` \| `White` \| 2px Primary 外发光 \|
97	\| 错误 \| `Error` \| `White` \| 显示错误提示 \|
98	\| 禁用 \| `Gray-200` \| `Gray-50` \| cursor: not-allowed \|
99	\| 只读 \| `Gray-200` \| `Gray-50` \| - \|
100
101	#### 组成部分
102
103	```
104	┌─────────────────────────────────────────┐
105	│ [图标] [输入内容] [清除按钮] │
106	└─────────────────────────────────────────┘
107	前缀输入区域后缀
108	```
109
110	- 前缀：图标、文字（如"https://"）
111	- 输入区域：用户输入的内容
112	- 后缀：清除按钮、单位（如"元"）、操作按钮
113
114	#### 变体
115
116	\| 变体 \| 说明 \|
117	\|------\|------\|
118	\| Text \| 单行文本输入 \|
119	\| Textarea \| 多行文本输入 \|
120	\| Password \| 密码输入（带显示/隐藏切换） \|
121	\| Number \| 数字输入（带增减按钮） \|
122	\| Search \| 搜索输入（带搜索图标和清除按钮） \|
123
124	#### 代码示例
125
126	```tsx
127	// 基础输入框
128	<Input placeholder="请输入用户名" />
129
130	// 带标签
131	<Input label="用户名" placeholder="请输入用户名" />
132
133	// 带前缀图标
134	<Input prefix={<IconUser />} placeholder="请输入用户名" />
135
136	// 带后缀清除按钮
137	<Input clearable placeholder="请输入关键词" />
138
139	// 错误状态
140	<Input error="用户名不能为空" />
141
142	// 禁用状态
143	<Input disabled value="已禁用" />
144
145	// 多行文本
146	<Textarea rows={4} placeholder="请输入描述" />
147
148	// 密码输入
149	<Input type="password" placeholder="请输入密码" />
150
151	// 搜索输入
152	<Input type="search" placeholder="搜索..." />
153	```
154
155	### 3. 选择器 (Select)
156
157	#### 尺寸
158
159	与Input保持一致（sm / md / lg）
160
161	#### 状态
162
163	与Input保持一致
164
165	#### 下拉菜单
166
167	\| 属性 \| 值 \|
168	\|------\|-----\|
169	\| 最大高度 \| 256px（超出滚动） \|
170	\| 背景 \| `White` \|
171	\| 阴影 \| `shadow-lg` \|
172	\| 圆角 \| `radius-md` \|
173	\| 选项高度 \| 40px \|
174	\| 选项内边距 \| 10px 14px \|
175
176	#### 选项状态
177
178	\| 状态 \| 背景色 \| 文字颜色 \|
179	\|------\|--------\|----------\|
180	\| 默认 \| `White` \| `Gray-700` \|
181	\| 悬停 \| `Gray-50` \| `Gray-900` \|
182	\| 选中 \| `Primary-light` \| `Primary` \|
183	\| 禁用 \| `White` \| `Gray-400` \|
184
185	### 4. 复选框 (Checkbox)
186
187	#### 尺寸
188
189	\| 尺寸 \| 大小 \| 勾选图标 \|
190	\|------\|------\|----------\|
191	\| sm \| 16px \| 12px \|
192	\| md \| 20px \| 14px \|
193	\| lg \| 24px \| 16px \|
194
195	#### 状态
196
197	\| 状态 \| 边框 \| 背景 \| 勾选图标 \|
198	\|------\|------\|------\|----------\|
199	\| 未选中 \| `Gray-300` \| `White` \| - \|
200	\| 选中 \| `Primary` \| `Primary` \| `White` \|
201	\| 半选中 \| `Primary` \| `Primary` \| `White`（横线） \|
202	\| 禁用-未选中 \| `Gray-200` \| `Gray-50` \| - \|
203	\| 禁用-选中 \| `Gray-300` \| `Gray-300` \| `White` \|
204
205	### 5. 单选框 (Radio)
206
207	#### 尺寸
208
209	与Checkbox保持一致
210
211	#### 状态
212
213	\| 状态 \| 边框 \| 背景 \| 内圆 \|
214	\|------\|------\|------\|------\|
215	\| 未选中 \| `Gray-300` \| `White` \| - \|
216	\| 选中 \| `Primary` \| `White` \| `Primary`（8px圆点） \|
217	\| 禁用-未选中 \| `Gray-200` \| `Gray-50` \| - \|
218	\| 禁用-选中 \| `Gray-300` \| `Gray-50` \| `Gray-300` \|
219
220	### 6. 开关 (Switch)
221
222	#### 尺寸
223
224	\| 尺寸 \| 宽度 \| 高度 \| 圆点大小 \|
225	\|------\|------\|------\|----------\|
226	\| sm \| 32px \| 18px \| 14px \|
227	\| md \| 44px \| 24px \| 20px \|
228	\| lg \| 56px \| 30px \| 26px \|
229
230	#### 状态
231
232	\| 状态 \| 背景 \| 圆点位置 \|
233	\|------\|------\|----------\|
234	\| 关闭 \| `Gray-300` \| 左侧 \|
235	\| 开启 \| `Primary` \| 右侧 \|
236	\| 禁用-关闭 \| `Gray-200` \| 左侧 \|
237	\| 禁用-开启 \| `Primary`（opacity: 0.5） \| 右侧 \|
238
239	### 7. 卡片 (Card)
240
241	#### 规格
242
243	\| 属性 \| 值 \|
244	\|------\|-----\|
245	\| 背景 \| `White` \|
246	\| 圆角 \| `radius-lg` (12px) \|
247	\| 阴影

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-specification

554stars48forks

View on GitHub

How to install component-specification?

echovic/boss-skill/component-specification

$npx -y skills add echoVic/boss-skill --skill component-specification

Installs into the current project.

Summary

UI组件规范，定义按钮、输入框、卡片等基础组件的变体、尺寸、状态

Files · 1

View on GitHub

SKILL.md

1	# UI组件规范
2
3	## 适用场景
4
5	基于设计系统，定义可复用的UI组件规范，确保组件在不同场景下的一致性和完整性。
6
7	## 组件设计原则
8
9	1. 完整性：考虑所有状态（默认、悬停、按下、聚焦、禁用、加载、错误）
10	2. 一致性：同类组件使用相同的设计语言
11	3. 可访问性：支持键盘导航、屏幕阅读器
12	4. 响应式：适配不同屏幕尺寸
13
14	## 基础组件规范
15
16	### 1. 按钮 (Button)
17
18	#### 变体
19
20	\| 变体 \| 用途 \| 视觉特征 \|
21	\|------\|------\|----------\|
22	\| Primary \| 主要操作（每个区域最多1个） \| 实心，品牌色背景，白色文字 \|
23	\| Secondary \| 次要操作 \| 描边，透明背景，品牌色文字 \|
24	\| Ghost \| 低优先级操作 \| 无边框，透明背景，灰色文字 \|
25	\| Danger \| 危险操作（删除、清空） \| 实心，红色背景，白色文字 \|
26	\| Link \| 文本链接 \| 无背景，品牌色文字，下划线 \|
27
28	#### 尺寸
29
30	\| 尺寸 \| 高度 \| 内边距 \| 字号 \| 圆角 \| 最小宽度 \|
31	\|------\|------\|--------\|------\|------\|----------\|
32	\| sm \| 32px \| 12px 16px \| 14px \| 6px \| 64px \|
33	\| md \| 40px \| 12px 20px \| 16px \| 8px \| 80px \|
34	\| lg \| 48px \| 16px 24px \| 16px \| 8px \| 96px \|
35
36	#### 状态
37
38	\| 状态 \| Primary 背景 \| Primary 文字 \| 边框 \| 其他 \|
39	\|------\|--------------\|--------------\|------\|------\|
40	\| 默认 \| `Primary` \| `White` \| - \| - \|
41	\| 悬停 \| `Primary-hover` \| `White` \| - \| cursor: pointer \|
42	\| 按下 \| `Primary-active` \| `White` \| - \| transform: scale(0.98) \|
43	\| 聚焦 \| `Primary` \| `White` \| 2px Primary 外发光 \| outline \|
44	\| 禁用 \| `Gray-200` \| `Gray-400` \| - \| cursor: not-allowed, opacity: 0.6 \|
45	\| 加载 \| `Primary` \| - \| - \| 显示 spinner，文字隐藏 \|
46
47	#### 图标按钮
48
49	\| 属性 \| 值 \|
50	\|------\|-----\|
51	\| 尺寸 \| 32px / 40px / 48px（正方形） \|
52	\| 图标大小 \| 16px / 20px / 24px \|
53	\| 圆角 \| radius-md 或 radius-full（圆形） \|
54
55	#### 代码示例
56
57	```tsx
58	// 主按钮
59	<Button variant="primary" size="md">确认</Button>
60
61	// 次要按钮
62	<Button variant="secondary" size="md">取消</Button>
63
64	// 危险按钮
65	<Button variant="danger" size="md">删除</Button>
66
67	// 禁用状态
68	<Button variant="primary" size="md" disabled>确认</Button>
69
70	// 加载状态
71	<Button variant="primary" size="md" loading>提交中</Button>
72
73	// 带图标
74	<Button variant="primary" size="md" icon={<IconCheck />}>保存</Button>
75
76	// 图标按钮
77	<IconButton variant="ghost" size="md" icon={<IconClose />} />
78	```
79
80	### 2. 输入框 (Input)
81
82	#### 尺寸
83
84	\| 尺寸 \| 高度 \| 内边距 \| 字号 \| 圆角 \|
85	\|------\|------\|--------\|------\|------\|
86	\| sm \| 32px \| 8px 12px \| 14px \| 6px \|
87	\| md \| 40px \| 10px 14px \| 16px \| 8px \|
88	\| lg \| 48px \| 12px 16px \| 16px \| 8px \|
89
90	#### 状态
91
92	\| 状态 \| 边框颜色 \| 背景色 \| 其他 \|
93	\|------\|----------\|--------\|------\|
94	\| 默认 \| `Gray-300` \| `White` \| - \|
95	\| 悬停 \| `Gray-400` \| `White` \| - \|
96	\| 聚焦 \| `Primary` \| `White` \| 2px Primary 外发光 \|
97	\| 错误 \| `Error` \| `White` \| 显示错误提示 \|
98	\| 禁用 \| `Gray-200` \| `Gray-50` \| cursor: not-allowed \|
99	\| 只读 \| `Gray-200` \| `Gray-50` \| - \|
100
101	#### 组成部分
102
103	```
104	┌─────────────────────────────────────────┐
105	│ [图标] [输入内容] [清除按钮] │
106	└─────────────────────────────────────────┘
107	前缀输入区域后缀
108	```
109
110	- 前缀：图标、文字（如"https://"）
111	- 输入区域：用户输入的内容
112	- 后缀：清除按钮、单位（如"元"）、操作按钮
113
114	#### 变体
115
116	\| 变体 \| 说明 \|
117	\|------\|------\|
118	\| Text \| 单行文本输入 \|
119	\| Textarea \| 多行文本输入 \|
120	\| Password \| 密码输入（带显示/隐藏切换） \|
121	\| Number \| 数字输入（带增减按钮） \|
122	\| Search \| 搜索输入（带搜索图标和清除按钮） \|
123
124	#### 代码示例
125
126	```tsx
127	// 基础输入框
128	<Input placeholder="请输入用户名" />
129
130	// 带标签
131	<Input label="用户名" placeholder="请输入用户名" />
132
133	// 带前缀图标
134	<Input prefix={<IconUser />} placeholder="请输入用户名" />
135
136	// 带后缀清除按钮
137	<Input clearable placeholder="请输入关键词" />
138
139	// 错误状态
140	<Input error="用户名不能为空" />
141
142	// 禁用状态
143	<Input disabled value="已禁用" />
144
145	// 多行文本
146	<Textarea rows={4} placeholder="请输入描述" />
147
148	// 密码输入
149	<Input type="password" placeholder="请输入密码" />
150
151	// 搜索输入
152	<Input type="search" placeholder="搜索..." />
153	```
154
155	### 3. 选择器 (Select)
156
157	#### 尺寸
158
159	与Input保持一致（sm / md / lg）
160
161	#### 状态
162
163	与Input保持一致
164
165	#### 下拉菜单
166
167	\| 属性 \| 值 \|
168	\|------\|-----\|
169	\| 最大高度 \| 256px（超出滚动） \|
170	\| 背景 \| `White` \|
171	\| 阴影 \| `shadow-lg` \|
172	\| 圆角 \| `radius-md` \|
173	\| 选项高度 \| 40px \|
174	\| 选项内边距 \| 10px 14px \|
175
176	#### 选项状态
177
178	\| 状态 \| 背景色 \| 文字颜色 \|
179	\|------\|--------\|----------\|
180	\| 默认 \| `White` \| `Gray-700` \|
181	\| 悬停 \| `Gray-50` \| `Gray-900` \|
182	\| 选中 \| `Primary-light` \| `Primary` \|
183	\| 禁用 \| `White` \| `Gray-400` \|
184
185	### 4. 复选框 (Checkbox)
186
187	#### 尺寸
188
189	\| 尺寸 \| 大小 \| 勾选图标 \|
190	\|------\|------\|----------\|
191	\| sm \| 16px \| 12px \|
192	\| md \| 20px \| 14px \|
193	\| lg \| 24px \| 16px \|
194
195	#### 状态
196
197	\| 状态 \| 边框 \| 背景 \| 勾选图标 \|
198	\|------\|------\|------\|----------\|
199	\| 未选中 \| `Gray-300` \| `White` \| - \|
200	\| 选中 \| `Primary` \| `Primary` \| `White` \|
201	\| 半选中 \| `Primary` \| `Primary` \| `White`（横线） \|
202	\| 禁用-未选中 \| `Gray-200` \| `Gray-50` \| - \|
203	\| 禁用-选中 \| `Gray-300` \| `Gray-300` \| `White` \|
204
205	### 5. 单选框 (Radio)
206
207	#### 尺寸
208
209	与Checkbox保持一致
210
211	#### 状态
212
213	\| 状态 \| 边框 \| 背景 \| 内圆 \|
214	\|------\|------\|------\|------\|
215	\| 未选中 \| `Gray-300` \| `White` \| - \|
216	\| 选中 \| `Primary` \| `White` \| `Primary`（8px圆点） \|
217	\| 禁用-未选中 \| `Gray-200` \| `Gray-50` \| - \|
218	\| 禁用-选中 \| `Gray-300` \| `Gray-50` \| `Gray-300` \|
219
220	### 6. 开关 (Switch)
221
222	#### 尺寸
223
224	\| 尺寸 \| 宽度 \| 高度 \| 圆点大小 \|
225	\|------\|------\|------\|----------\|
226	\| sm \| 32px \| 18px \| 14px \|
227	\| md \| 44px \| 24px \| 20px \|
228	\| lg \| 56px \| 30px \| 26px \|
229
230	#### 状态
231
232	\| 状态 \| 背景 \| 圆点位置 \|
233	\|------\|------\|----------\|
234	\| 关闭 \| `Gray-300` \| 左侧 \|
235	\| 开启 \| `Primary` \| 右侧 \|
236	\| 禁用-关闭 \| `Gray-200` \| 左侧 \|
237	\| 禁用-开启 \| `Primary`（opacity: 0.5） \| 右侧 \|
238
239	### 7. 卡片 (Card)
240
241	#### 规格
242
243	\| 属性 \| 值 \|
244	\|------\|-----\|
245	\| 背景 \| `White` \|
246	\| 圆角 \| `radius-lg` (12px) \|
247	\| 阴影

People who liked this also viewed

6 picks

Type