Sky-Cube 组件库封装Skill
适用场景
封装可复用组件库:基础组件(按钮/表单/弹窗)与业务组件,统一 API 设计、主题化、文档与发布规范。
执行步骤
- 边界确认:区分基础组件(无业务语义,进组件库)与业务组件(含业务逻辑,业务仓库维护),避免组件库被业务污染。
- API 设计:Props 单向数据流,变更走事件回调;支持 v-model/slot 扩展点;Props 命名 camelCase,默认值完整,类型严格(禁止 any)。
- 封装实现:组件单一职责、无副作用、不直接请求接口;展示层与逻辑层分离;样式 scoped + CSS 变量,支持主题覆盖。
- 主题化:色彩/间距/圆角/字号抽 design token(CSS 变量),支持亮/暗模式与运行时换肤;token 文档化。
- 文档:每个组件必须有可运行的使用示例、Props/Events/Slots 表格、边界说明;文档随代码同步更新。
- 质量与发布:单元测试覆盖核心交互,版本语义化,发布前跑 lint/test/build,变更写 changelog。
规范要点
- 组件命名 PascalCase,事件 kebab-case 向外暴露,内部状态禁止外部直接修改。
- Props 必须完整类型定义与默认值;禁止在组件内修改 Props(单向数据流)。
- 禁止在组件库中写死业务字段/接口/文案,业务差异通过 Props/slot 注入。
- 样式隔离必须可靠(scoped/CSS Modules/CSS-in-JS 统一选一种),禁止依赖全局选择器。
- 无障碍:可交互组件支持键盘操作与 aria 属性,状态可读。
- 版本发布:破坏性变更走主版本号升级,提供迁移说明。
输出模板
## 组件封装方案
组件清单:名称/用途/分类(基础或业务)
API 设计:Props/Events/Slots 签名
主题 token 表:token 名/默认值/说明
文档与示例:每个组件的使用示例 + 边界说明
自检清单
- 基础组件与业务组件边界清晰
- Props 类型完整、单向数据流、无 any 滥用
- 样式隔离与主题 token 化
- 每个组件有可运行示例与 API 文档
- 测试覆盖核心交互,版本语义化