with one click
前端组件开发方法论,包括组件设计原则、状态管理、样式实现和性能优化
npx skills add https://github.com/echoVic/boss-skill --skill frontend-component-developmentCopy and paste this command into Claude Code to install the skill
前端组件开发方法论,包括组件设计原则、状态管理、样式实现和性能优化
npx skills add https://github.com/echoVic/boss-skill --skill frontend-component-developmentCopy and paste this command into Claude Code to install the skill
BMAD 全自动研发流水线编排器。编排 9 个专业 Agent(PM、架构师、UI 设计师、Tech Lead、Scrum Master、开发者、QA、DevOps)从需求到部署一气呵成。 Triggers: 'boss mode', '/boss', '全自动开发', '从需求到部署', '帮我做一个', 'build this', 'ship it', '全流程', '自动化开发', '一键开发', 'start a project', 'new feature' Does NOT trigger: - 单文件修改或简单 bug 修复(直接编辑即可) - 纯代码阅读或解释(使用 read 工具) - 已有 pipeline 正在运行时的重复启动 Output: 完整项目代码 + PRD/架构/UI/测试/部署文档,写入 .boss/<feature>/ 目录
自动生成 CHANGELOG,基于 git 提交历史和 pipeline 产物信息,遵循 Conventional Commits 和 Keep a Changelog 规范
从CEO/战略视角进行商业价值评审,评估市场契合度、ROI、竞争优势、风险和战略对齐
设计变体模式,产出2-3个设计方案及 tradeoff 分析,供用户选择后确定最终方案
前端测试编写指南,包括单元测试、集成测试和E2E测试的编写方法和最佳实践
Playwright E2E 测试完整方法论,涵盖项目初始化、Page Object Model、认证复用、API Mock、视觉回归、多浏览器测试、CI 集成和调试技巧
| name | frontend/component-development |
| description | 前端组件开发方法论,包括组件设计原则、状态管理、样式实现和性能优化 |
| type | methodology |
| agent | boss-frontend |
| 状态类型 | 管理方式 | 适用场景 |
|---|---|---|
| 本地状态 | useState/ref | 组件内部状态(表单输入、展开/收起) |
| 共享状态 | Context/Store | 跨组件共享(用户信息、主题) |
| 服务端状态 | Query库/SWR | API 数据缓存和同步 |
| URL 状态 | Router | 页面参数、筛选条件 |
ui-design.json > ui-spec.md > 项目现有样式 > 框架默认值
当 .boss/<feature>/ui-design.json 存在时:
读取 tokens:映射为 CSS 变量或主题对象
// 示例:从 tokens 生成 CSS 变量
const colors = uiDesign.tokens.colors;
// --color-primary: #007AFF
解析 pages 和 frames:推导页面结构和布局
pages[].frames[] 提取页面组件层级frames[].layout 获取布局约束(宽度、间距、对齐)实现 prototype.links:推导导航和交互
复用 components:提取可复用组件
components[] 识别通用组件(Button、Input、Card)实现前端 API 调用前,必须阅读:
// services/api/users.ts
export const userApi = {
async getUser(id: string): Promise<User> {
const response = await fetch(`/api/users/${id}`);
return response.json();
},
async createUser(data: CreateUserRequest): Promise<User> {
const response = await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(data),
});
return response.json();
},
};
后端未就绪时,基于 architecture.md §5 创建 Mock:
// services/api/users.mock.ts
export const mockUserApi = {
async getUser(id: string): Promise<User> {
return { id, name: 'Mock User', email: 'mock@example.com' };
},
};
| 测试类型 | 占比 | 工具示例 |
|---|---|---|
| 单元测试 | 70% | Jest + Testing Library |
| 集成测试 | 20% | Testing Library |
| E2E 测试 | 10% | Playwright/Cypress |
实现组件前:
实现组件后: