frontend-design

系统化诊断复杂 bug、测试失败和性能回退，按复现、最小化、假设、观测、修复、回归测试循环推进；当用户说 debug、diagnose、报错、失败、性能变慢时使用。

拷问需求、方案和文档，逐步确认术语、边界、异常、风险和待确认问题；当用户要求拷问需求、挑战方案、检查边界、基于文档追问细节时使用。

发现代码库架构深化机会，适用于用户要求改进架构、寻找重构点、拆分耦合模块、提升可测试性、让代码更适合 AI 理解和维护时使用。

生成可导入测试管理平台的手工测试用例 Excel，适用于用户要求测试用例 Excel、验收用例、用例导入表、把需求或实现转成测试用例表时使用。

梳理和补全业务功能需求，适用于把零散想法、口头需求、半成品 PRD、页面改造诉求整理成可执行需求说明；当用户提到需求分析、梳理需求、写需求文档、补全场景、功能规划时使用。

知识库型 Skill 示例，用动态表单系统作为脱敏样例，展示如何沉淀复杂系统的概念、数据流、控件体系、运行机制和排查入口；当用户想创建系统知识库 Skill 或理解动态表单类系统时使用。

使用测试驱动开发实现核心逻辑，适用于用户要求 TDD、红绿重构、先写测试再实现、用测试约束 AI 写代码，或需要为关键业务规则建立回归保护时使用。

审查 TypeScript、JavaScript、TSX 和通用前端逻辑质量，关注命名、类型安全、API 调用、状态管理、工具函数、性能、安全、错误处理和测试遗漏；当用户要求检查代码质量、审查 TS/JS/API/store/utils 时使用。

审查 Vue 组件质量，关注模板结构、Composition API、响应式数据、Props/Emits、生命周期、副作用清理、组件拆分和可测试性；当用户要求审查 Vue 文件、组件质量或组件设计时使用。

根据需求、页面、流程或变更说明编写可执行的手工测试用例 Markdown 清单；当用户要求手动测试、手工测试、验收用例、测试清单、UAT、冒烟、回归测试文档，且不是单元测试时使用。

代码审查协调入口。根据文件类型和审查目标分发到 code-quality-review、vue-component-review、page-review，并汇总审查结果；当用户要求全面审查、review 代码、提交前检查时使用。

创建通用中后台 CRUD 列表页面，包含搜索、表格、分页、新增/编辑表单、删除/停用、权限按钮和基础测试；当用户要求创建列表页、数据管理页、CRUD 页面时使用。