component-development

Name: component-development
Author: echoVic

554stars48forks

How to install component-development?

echovic/boss-skill/component-development

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

Installs into the current project.

Summary

前端组件开发方法论，包括组件设计原则、状态管理、样式实现和性能优化

Files · 1

View on GitHub

SKILL.md

1	# 前端组件开发方法论
2
3	## 组件设计原则
4
5	### 单一职责原则
6	- 每个组件只负责一个功能模块
7	- 复杂组件拆分为多个子组件
8	- 容器组件（逻辑）与展示组件（UI）分离
9
10	### 可复用性设计
11	- 通过 Props/属性实现组件配置化
12	- 避免硬编码业务逻辑
13	- 提供合理的默认值
14	- 支持插槽/children 扩展
15
16	### 组件命名规范
17	- 使用 PascalCase 命名组件
18	- 名称应清晰描述组件功能
19	- 避免过于通用的名称（如 Item、Component）
20	- 文件名与组件名保持一致
21
22	## 状态管理策略
23
24	### 状态分类
25	\| 状态类型 \| 管理方式 \| 适用场景 \|
26	\|----------\|----------\|----------\|
27	\| 本地状态 \| useState/ref \| 组件内部状态（表单输入、展开/收起） \|
28	\| 共享状态 \| Context/Store \| 跨组件共享（用户信息、主题） \|
29	\| 服务端状态 \| Query库/SWR \| API 数据缓存和同步 \|
30	\| URL 状态 \| Router \| 页面参数、筛选条件 \|
31
32	### 状态提升原则
33	- 状态放在最近的公共父组件
34	- 避免过度提升导致不必要的重渲染
35	- 使用 Context 避免 Props 层层传递
36
37	### 副作用管理
38	- 使用框架的副作用 Hook（useEffect/onMounted）
39	- 清理订阅和定时器
40	- 依赖数组准确声明
41	- 避免在渲染函数中执行副作用
42
43	## 样式实现规范
44
45	### UI 规范优先级
46	```
47	ui-design.json > ui-spec.md > 项目现有样式 > 框架默认值
48	```
49
50	### ui-design.json 集成
51	当 `.boss/<feature>/ui-design.json` 存在时：
52	1. 读取 tokens：映射为 CSS 变量或主题对象
53	```typescript
54	// 示例：从 tokens 生成 CSS 变量
55	const colors = uiDesign.tokens.colors;
56	// --color-primary: #007AFF
57	```
58
59	2. 解析 pages 和 frames：推导页面结构和布局
60	- 从 `pages[].frames[]` 提取页面组件层级
61	- 从 `frames[].layout` 获取布局约束（宽度、间距、对齐）
62
63	3. 实现 prototype.links：推导导航和交互
64	- 按钮点击跳转
65	- 表单提交流程
66	- 模态框打开/关闭
67
68	4. 复用 components：提取可复用组件
69	- 从 `components[]` 识别通用组件（Button、Input、Card）
70	- 实现为独立组件文件
71
72	### 样式编写原则
73	- 使用项目约定的样式方案（CSS Modules/Tailwind/CSS-in-JS）
74	- 响应式设计：移动端优先或桌面端优先（按项目约定）
75	- 使用设计系统的间距、颜色、字体变量
76	- 避免魔法数字，使用语义化变量
77
78	### 无障碍实现
79	- 添加正确的 ARIA 属性（role、aria-label、aria-describedby）
80	- 确保键盘导航可用（tabindex、focus 样式）
81	- 表单元素关联 label
82	- 图片添加 alt 文本
83
84	## 性能优化技巧
85
86	### 渲染优化
87	- 使用 Memo/shouldComponentUpdate 避免不必要的重渲染
88	- 列表渲染使用稳定的 key
89	- 虚拟滚动处理长列表
90	- 避免在渲染函数中创建新对象/函数
91
92	### 代码分割
93	- 路由级别的懒加载
94	- 大型组件按需加载
95	- 第三方库按需引入
96
97	### 资源优化
98	- 图片懒加载和响应式图片
99	- 使用 WebP 等现代图片格式
100	- SVG 图标内联或雪碧图
101
102	## API 契约管理
103
104	### 契约来源
105	实现前端 API 调用前，必须阅读：
106	1. architecture.md §5（API 设计）：获取端点列表、请求/响应格式
107	2. 后端共享类型（如有）：复用类型定义
108
109	### API 调用层设计
110	```typescript
111	// services/api/users.ts
112	export const userApi = {
113	async getUser(id: string): Promise<User> {
114	const response = await fetch(`/api/users/${id}`);
115	return response.json();
116	},
117
118	async createUser(data: CreateUserRequest): Promise<User> {
119	const response = await fetch('/api/users', {
120	method: 'POST',
121	body: JSON.stringify(data),
122	});
123	return response.json();
124	},
125	};
126	```
127
128	### 错误处理
129	- 统一错误处理：按 architecture.md 定义的错误格式
130	- 用户友好的错误提示
131	- 网络错误重试机制
132	- 加载和错误状态展示
133
134	### Mock 策略
135	后端未就绪时，基于 architecture.md §5 创建 Mock：
136	```typescript
137	// services/api/users.mock.ts
138	export const mockUserApi = {
139	async getUser(id: string): Promise<User> {
140	return { id, name: 'Mock User', email: 'mock@example.com' };
141	},
142	};
143	```
144
145	## 组件测试策略
146
147	### 测试金字塔
148	\| 测试类型 \| 占比 \| 工具示例 \|
149	\|----------\|------\|----------\|
150	\| 单元测试 \| 70% \| Jest + Testing Library \|
151	\| 集成测试 \| 20% \| Testing Library \|
152	\| E2E 测试 \| 10% \| Playwright/Cypress \|
153
154	### 单元测试覆盖
155	- 组件渲染：关键元素是否存在
156	- Props 变化：不同 Props 下的渲染结果
157	- 用户交互：点击、输入、表单提交
158	- Hooks 逻辑：自定义 Hook 的状态变化
159
160	### 集成测试覆盖
161	- 组件间交互：父子组件通信
162	- 状态管理：全局状态变化对组件的影响
163	- 路由导航：页面跳转和参数传递
164
165	### E2E 测试覆盖（必须）
166	- 创建流程：填写表单 → 提交 → 验证结果
167	- 编辑流程：打开编辑 → 修改 → 保存 → 验证
168	- 删除流程：点击删除 → 确认 → 验证消失
169	- 列表展示：加载列表 → 筛选 → 分页
170	- 核心业务流程：完整用户路径
171
172	## 实现检查清单
173
174	实现组件前：
175	- [ ] 阅读 ui-design.json（如有）和 ui-spec.md
176	- [ ] 阅读 architecture.md §5 API 设计
177	- [ ] 探索项目现有组件模式和样式方案
178	- [ ] 确认状态管理方案（本地/共享/服务端）
179
180	实现组件后：
181	- [ ] 组件符合单一职责原则
182	- [ ] 添加必要的 Props 类型定义
183	- [ ] 实现响应式布局
184	- [ ] 添加无障碍属性
185	- [ ] 编写单元测试（70%）
186	- [ ] 编写集成测试（20%）
187	- [ ] 编写 E2E 测试（10%，必须）
188	- [ ] 测试覆盖率达标
189	- [ ] 代码通过 Lint 检查

People who liked this also viewed

6 picks

Type

hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026262k37k
request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026165k181k
analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026161k507
explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026161k507
ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026160k181k
scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026149k181k

component-development

554stars48forks

View on GitHub

How to install component-development?

echovic/boss-skill/component-development

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

Installs into the current project.

Summary

前端组件开发方法论，包括组件设计原则、状态管理、样式实现和性能优化

Files · 1

View on GitHub

SKILL.md

1	# 前端组件开发方法论
2
3	## 组件设计原则
4
5	### 单一职责原则
6	- 每个组件只负责一个功能模块
7	- 复杂组件拆分为多个子组件
8	- 容器组件（逻辑）与展示组件（UI）分离
9
10	### 可复用性设计
11	- 通过 Props/属性实现组件配置化
12	- 避免硬编码业务逻辑
13	- 提供合理的默认值
14	- 支持插槽/children 扩展
15
16	### 组件命名规范
17	- 使用 PascalCase 命名组件
18	- 名称应清晰描述组件功能
19	- 避免过于通用的名称（如 Item、Component）
20	- 文件名与组件名保持一致
21
22	## 状态管理策略
23
24	### 状态分类
25	\| 状态类型 \| 管理方式 \| 适用场景 \|
26	\|----------\|----------\|----------\|
27	\| 本地状态 \| useState/ref \| 组件内部状态（表单输入、展开/收起） \|
28	\| 共享状态 \| Context/Store \| 跨组件共享（用户信息、主题） \|
29	\| 服务端状态 \| Query库/SWR \| API 数据缓存和同步 \|
30	\| URL 状态 \| Router \| 页面参数、筛选条件 \|
31
32	### 状态提升原则
33	- 状态放在最近的公共父组件
34	- 避免过度提升导致不必要的重渲染
35	- 使用 Context 避免 Props 层层传递
36
37	### 副作用管理
38	- 使用框架的副作用 Hook（useEffect/onMounted）
39	- 清理订阅和定时器
40	- 依赖数组准确声明
41	- 避免在渲染函数中执行副作用
42
43	## 样式实现规范
44
45	### UI 规范优先级
46	```
47	ui-design.json > ui-spec.md > 项目现有样式 > 框架默认值
48	```
49
50	### ui-design.json 集成
51	当 `.boss/<feature>/ui-design.json` 存在时：
52	1. 读取 tokens：映射为 CSS 变量或主题对象
53	```typescript
54	// 示例：从 tokens 生成 CSS 变量
55	const colors = uiDesign.tokens.colors;
56	// --color-primary: #007AFF
57	```
58
59	2. 解析 pages 和 frames：推导页面结构和布局
60	- 从 `pages[].frames[]` 提取页面组件层级
61	- 从 `frames[].layout` 获取布局约束（宽度、间距、对齐）
62
63	3. 实现 prototype.links：推导导航和交互
64	- 按钮点击跳转
65	- 表单提交流程
66	- 模态框打开/关闭
67
68	4. 复用 components：提取可复用组件
69	- 从 `components[]` 识别通用组件（Button、Input、Card）
70	- 实现为独立组件文件
71
72	### 样式编写原则
73	- 使用项目约定的样式方案（CSS Modules/Tailwind/CSS-in-JS）
74	- 响应式设计：移动端优先或桌面端优先（按项目约定）
75	- 使用设计系统的间距、颜色、字体变量
76	- 避免魔法数字，使用语义化变量
77
78	### 无障碍实现
79	- 添加正确的 ARIA 属性（role、aria-label、aria-describedby）
80	- 确保键盘导航可用（tabindex、focus 样式）
81	- 表单元素关联 label
82	- 图片添加 alt 文本
83
84	## 性能优化技巧
85
86	### 渲染优化
87	- 使用 Memo/shouldComponentUpdate 避免不必要的重渲染
88	- 列表渲染使用稳定的 key
89	- 虚拟滚动处理长列表
90	- 避免在渲染函数中创建新对象/函数
91
92	### 代码分割
93	- 路由级别的懒加载
94	- 大型组件按需加载
95	- 第三方库按需引入
96
97	### 资源优化
98	- 图片懒加载和响应式图片
99	- 使用 WebP 等现代图片格式
100	- SVG 图标内联或雪碧图
101
102	## API 契约管理
103
104	### 契约来源
105	实现前端 API 调用前，必须阅读：
106	1. architecture.md §5（API 设计）：获取端点列表、请求/响应格式
107	2. 后端共享类型（如有）：复用类型定义
108
109	### API 调用层设计
110	```typescript
111	// services/api/users.ts
112	export const userApi = {
113	async getUser(id: string): Promise<User> {
114	const response = await fetch(`/api/users/${id}`);
115	return response.json();
116	},
117
118	async createUser(data: CreateUserRequest): Promise<User> {
119	const response = await fetch('/api/users', {
120	method: 'POST',
121	body: JSON.stringify(data),
122	});
123	return response.json();
124	},
125	};
126	```
127
128	### 错误处理
129	- 统一错误处理：按 architecture.md 定义的错误格式
130	- 用户友好的错误提示
131	- 网络错误重试机制
132	- 加载和错误状态展示
133
134	### Mock 策略
135	后端未就绪时，基于 architecture.md §5 创建 Mock：
136	```typescript
137	// services/api/users.mock.ts
138	export const mockUserApi = {
139	async getUser(id: string): Promise<User> {
140	return { id, name: 'Mock User', email: 'mock@example.com' };
141	},
142	};
143	```
144
145	## 组件测试策略
146
147	### 测试金字塔
148	\| 测试类型 \| 占比 \| 工具示例 \|
149	\|----------\|------\|----------\|
150	\| 单元测试 \| 70% \| Jest + Testing Library \|
151	\| 集成测试 \| 20% \| Testing Library \|
152	\| E2E 测试 \| 10% \| Playwright/Cypress \|
153
154	### 单元测试覆盖
155	- 组件渲染：关键元素是否存在
156	- Props 变化：不同 Props 下的渲染结果
157	- 用户交互：点击、输入、表单提交
158	- Hooks 逻辑：自定义 Hook 的状态变化
159
160	### 集成测试覆盖
161	- 组件间交互：父子组件通信
162	- 状态管理：全局状态变化对组件的影响
163	- 路由导航：页面跳转和参数传递
164
165	### E2E 测试覆盖（必须）
166	- 创建流程：填写表单 → 提交 → 验证结果
167	- 编辑流程：打开编辑 → 修改 → 保存 → 验证
168	- 删除流程：点击删除 → 确认 → 验证消失
169	- 列表展示：加载列表 → 筛选 → 分页
170	- 核心业务流程：完整用户路径
171
172	## 实现检查清单
173
174	实现组件前：
175	- [ ] 阅读 ui-design.json（如有）和 ui-spec.md
176	- [ ] 阅读 architecture.md §5 API 设计
177	- [ ] 探索项目现有组件模式和样式方案
178	- [ ] 确认状态管理方案（本地/共享/服务端）
179
180	实现组件后：
181	- [ ] 组件符合单一职责原则
182	- [ ] 添加必要的 Props 类型定义
183	- [ ] 实现响应式布局
184	- [ ] 添加无障碍属性
185	- [ ] 编写单元测试（70%）
186	- [ ] 编写集成测试（20%）
187	- [ ] 编写 E2E 测试（10%，必须）
188	- [ ] 测试覆盖率达标
189	- [ ] 代码通过 Lint 检查

People who liked this also viewed

6 picks

Type