Menu
通用创建提案技能。根据需求是否有设计稿或 UI 描述、是否有接口、是页面还是功能组件等可选条件，决定设计稿分析、接口与数据层、以及实现后的 UI 还原验收等步骤。适用于各类需求提案，不限于纯 UI 页面。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
提供 Vue 项目中页面 CSS 的命名规范。在编写页面样式或重构 CSS 时使用此技能。
提供 Vue 3 + Vite + TypeScript 项目的目录结构规范和代码组织建议。在创建新页面、组件、API 模块或重构项目结构时使用此技能。
定义 Vue 项目中 TypeScript 类型（Interface/Type）的命名规范。在定义公共类型或业务模型时调用此技能。
引导并执行 Vue 代码模块化拆分；在收到新需求或单文件代码臃肿、复用逻辑出现时调用，拆分为业务组件/公共组件、TypeScript 类型文件、hooks。
规范并校验 Vue 项目目录结构；在创建/移动/重命名文件夹或文件、生成脚手架、新增组件/页面时调用。
指导创建符合规范的API接口，包括TypeScript类型定义、接口文件组织、请求响应拦截处理。当需要创建新的API接口时使用本技能。
| name | create-proposal |
| description | 通用创建提案技能。根据需求是否有设计稿或 UI 描述、是否有接口、是页面还是功能组件等可选条件，决定设计稿分析、接口与数据层、以及实现后的 UI 还原验收等步骤。适用于各类需求提案，不限于纯 UI 页面。 |
当需要为一个需求创建 OpenSpec 提案（proposal、tasks、spec）时使用本技能。需求可能是：
本技能根据「是否有设计稿/UI 描述」「是否有接口」「交付形态（页面/组件/其它）」等条件，决定执行哪些步骤、产出哪些任务。
在写 proposal / tasks / spec 之前，先确认下列条件，以便后续步骤按需执行。
| 条件 | 选项 | 影响 |
|---|---|---|
| 是否有设计稿或 UI 要求描述 | 有 / 无 | 有 → 可选用 design-analysis 产出 UI 分析清单；实现后可有 UI 还原验收步骤 |
| 是否有接口（已提供或约定） | 有 / 无 / 未就绪 | 有 → 正常对接；无 → 可不做数据层；未就绪 → mock，见项目 Mock 数据策略 |
| 交付形态 | 新页面 / 功能组件 / 能力模块 / 其它 | 决定目录结构（routes vs components）、tasks 模板 |
| 是否仅样式/还原类 | 是 / 否 | 是 → 重点在 design-analysis + 验收 |
当需求包含界面且有设计稿（.pen、figma链接、设计图、标注）或有明确 UI 描述时：
.agents/skills/design-analysis/SKILL.mddocs/样式还原/<名称>-UI分析清单.md这样后续开发可以依据分析清单精确实现，实现后的验收也以此清单为基准。不限定「必须先分析再写提案」：可以边写提案边分析，或先分析再写提案，只要在开发前有一份分析清单即可。
在 tasks 中可写明：页面/组件开发须依据 docs/样式还原/<名称>-UI分析清单.md 实现布局与样式。
若交付形态是页面或功能组件，根据 .agents/rules/04-组件规范.md 判断组件放置位置：
src/components/<name>/src/routes/<page>/components/<name>/ 或对应功能目录下涉及页面时，常见约定：
.module.scssinterfaces/ 下为文件夹，含 model.ts、api.ts.agents/rules/08-通用约束.md）若需求涉及接口（已提供或未就绪）：
.agents/rules/03-项目结构.md 等规范，在 tasks 中安排 interfaces/、http/ 等。interfaces/<feature>/ 下定义 model.ts、api.ts，在 http/ 下提供 mock；tasks 中标注「mock，后续替换」。若不涉及接口，可省略或仅写「无后端依赖」。
根据需求类型书写，建议包含：
若有设计稿或 UI：可写「图标/图片使用占位元素」「开发依据 docs/样式还原/xxx-UI分析清单.md」等。
按交付形态与条件勾选任务，例如：
index.module.scss、与布局一致的结构；若有分析清单则写「依据 xxx-UI分析清单 实现」。index.tsx、index.module.scss、占位与规范。interfaces/<feature>/、http/<feature>.ts 或 mock。.agents/skills/ui-verification/SKILL.md 进行 UI 还原验收，产出问题清单并反思分析不足」。定义需求规格：场景、验收标准、可选的状态与边界。若有 UI，可引用分析清单中的「验证检查清单」作为验收参考。
当需求包含界面且有设计稿并已产出 UI 分析清单时，在实现完成后需要进行 UI 还原验收时：
.agents/skills/ui-verification/SKILL.md当开发涉及 UI 还原（有设计稿或分析清单）时，可对照以下检查项自检；更完整项见 docs/样式还原/<名称>-UI分析清单.md 中的「验证检查清单」。
布局：区域位置、尺寸、间距是否与分析清单/设计稿一致；对齐方式（如 flex-start vs center）是否正确。
样式：颜色、字体、字号、字重、圆角、边框、阴影、效果（如 backdrop-filter）是否一致。
元素：是否缺少区块、图标、占位图；占位尺寸与比例是否正确。
交互：默认/hover/active 等状态是否还原（若有设计）。
create-route、create-component 等技能中「涉及 UI 还原时」可引用：.agents/skills/create-proposal/SKILL.md 中的「样式还原验证检查清单」及对应页面的 docs/样式还原/<名称>-UI分析清单.md。
.agents/rules/03-项目结构.md - 目录结构、Mock 数据策略.agents/rules/04-组件规范.md - 组件放置决策.agents/rules/08-通用约束.md - 占位元素等.agents/rules/09-样式规范.md - 设计稿颜色提取.agents/skills/design-analysis/SKILL.md - 设计稿分析（有设计稿时使用，产出 UI 分析清单）.agents/skills/ui-verification/SKILL.md - UI 验收（实现后需验收时使用）