Frontend Workflow：前端项目总控
一、最高优先级：先读取项目
在修改任何文件之前，必须：
- 阅读项目根目录中的
AGENTS.md、CLAUDE.md、README 和其他适用的开发规范。 - 检查
package.json、锁文件、构建配置、路由配置和现有组件。 - 识别当前项目的技术栈、框架版本、UI 组件库、CSS 方案和运行命令。
- 如果是前后端分离项目，明确前端与后端的边界，不擅自修改后端接口契约。
- 如果项目已有设计系统、组件规范或页面风格，优先继承并完善，而不是推倒重做。
不得仅根据用户描述或目录名称判断技术栈，必须检查实际文件。
二、识别技术栈并决定技能使用方式
情况 A：React 项目
依次执行：
- frontend-design：确定视觉方向、设计规范和页面布局。
- frontend-production-shadcn：在确认项目兼容的前提下，实现组件、布局和交互。
- premium-ui：检查实际页面并推动修复。
只有在项目已采用或明确允许使用 React、Tailwind CSS 和 shadcn/ui 等相应技术时，才直接使用该技能的具体组件实现方案。
情况 B：Vue 3 项目
依次执行：
- frontend-design：确定视觉方向、设计规范和页面布局。
- 将 frontend-production-shadcn 仅作为设计规范和工程质量参考，不执行其中专属于 React、JSX、React Hooks 或 shadcn/ui 的实现指令。
- 使用项目现有的 Vue 3、TypeScript、路由、UI 组件库和 CSS 方案完成实现。
- premium-ui：检查实际页面并推动修复。
不得为了适配第二个 Skill 而把 Vue 3 项目迁移到 React。
情况 C：其他技术栈
先检查项目已有技术和约束。将 frontend-design 用于视觉规划，将 frontend-production-shadcn 中可迁移的设计原则作为参考，并使用当前项目适用的技术完成实现。最后使用 premium-ui 的评审方法验收。
三、严格执行三个阶段
阶段一：视觉设计
调用 frontend-design。
要求：
- 明确页面目标、主要用户和核心操作。
- 确定视觉方向、字体、色彩、间距、布局和信息层级。
- 提出有实质差异的设计方向，并说明最终选择理由。
- 形成可执行的设计规范，再开始实现。
阶段二：工程实现
根据技术栈调用 frontend-production-shadcn，或仅参考其中的设计原则。
要求：
- 先复用现有组件和依赖。
- 实现完整页面、导航、表单、响应式布局和交互状态。
- 处理加载、空数据、错误、禁用和成功反馈。
- 保留真实业务逻辑，不使用假交互冒充功能完成。
- 未经授权不得大规模重构或更换框架。
阶段三：视觉验收
调用 premium-ui，检查真实实现，而不只是阅读代码。
要求：
- 优先启动项目并使用可用的浏览器或截图工具检查页面。
- 检查排版、对齐、留白、色彩、层级、组件一致性和响应式表现。
- 检查按钮、表单、导航和主要交互是否有效。
- 记录设计目标与实际效果之间的差距。
- 对发现的问题进行修复，并重新检查。
如果环境没有浏览器或截图能力，必须明确说明无法完成真实视觉验收，不得声称已经检查过页面效果。
四、执行规则
- 每个阶段完成后，简要报告结论，再进入下一阶段。
- 如果某个 Skill 不存在、未被加载或无法执行，明确说明，并采用可行的替代方案。
- 不得假设其他 Skill 会自动运行；必要时明确请求调用或读取相应 Skill。
- 遵循用户的明确要求、项目规范和现有技术栈。
- 不为了追求视觉效果而牺牲可访问性、可维护性、性能或业务正确性。
- 完成后运行项目支持的构建、检查和测试命令，并汇报结果。
五、最终交付
完成后报告：
- 识别出的技术栈及版本。
- 采用的设计方向和关键设计决策。
- 修改的主要文件及功能。
- 三个阶段各自的执行情况。
- 构建、测试和实际视觉检查的结果。
- 尚未解决的问题和需要人工确认的事项。