用途
Frontend Designer 是一个用于构建和审查生产级前端界面的技能，技术栈聚焦于现代 React、TailwindCSS v4 与 shadcn/ui。它通过六种模式覆盖从项目脚手架搭建到渲染界面审查的完整流程，适用于构建 UI 的场景。
主要能力（六种模式）
Mode A：Scaffold（脚手架）——创建带有完整现代前端技术栈的新项目。可选框架包括 Vite + React（SPA、无需 SSR、设置最快）、Next.js App Router（SSR/SSG、Server Components、生产级 Web 应用）、Remix（全栈、嵌套路由、渐进增强），未指定时默认 Vite + React。包含 Tailwind v4 以 CSS 为先的配置（无 tailwind.config.js，使用 @import "tailwindcss" 与 @theme {}）、shadcn/ui 初始化（npx shadcn@latest init）、字体排印与美学方向选择、文件结构规划。
Mode B：Component（组件）——设计并构建单个生产级组件。先对组件进行分类（确定是否需要 "use client"），收集设计意图（用途、交互、响应式行为、可访问性），选择原语（交互类组件使用 shadcn/ui 封装的 Radix UI 原语，不从零构建），再用 Tailwind v4 工具类与 @theme {} 中的 CSS 自定义属性实现。响应式采用 @container 查询而非媒体查询。
Mode C：Theme（主题）——配置或重构设计令牌系统。若参数含 tokens，执行令牌提取工作流：检索硬编码颜色与间距值，按 primitive → semantic → component 三层组织，生成 @theme {} 块。颜色系统使用 oklch；暗色模式通过 @custom-variant dark 与 .dark 选择器覆盖令牌；字体排印使用 clamp() 流式比例；并包含 RTL 逻辑属性转换（如 margin-left → margin-inline-start）。
Mode D：Refactor（重构）——将现有前端代码现代化。先执行预扫描清单，再按迁移模式逐文件改造（如 tailwind.config.js 迁移到 CSS-first @theme、@media 迁移到 @container 查询、手写下拉/模态框迁移到 Radix 原语、硬编码颜色迁移到设计令牌、类组件迁移到函数组件 + hooks 等），每改一个文件后验证，最后重跑预扫描确认改进。
Mode E：Audit（审查）——只读分析前端代码库质量，绝不修改代码。按六个维度评分：技术栈时效性、组件模式、设计令牌、CSS 现代性、字体排印、可访问性、视觉验证。报告分为 Critical（必须修复）、Warning（应当修复）、Suggestion（锦上添花）、Strengths（优点）与 Recommended Actions。
Mode F：Page/View（页面/视图）——设计并构建完整页面、路由、屏幕、仪表盘、落地页或应用外壳。先分类页面上下文（领域、用户任务、组件构成、集成方式），再从 shadcn/ui 原语与现有项目组件组合，页面级布局用媒体查询保持响应式，组件内部用容器查询保持响应式，并为数据页面提供有意义的加载、空与错误状态。
使用方式
通过 $ARGUMENTS 传入以下形式的输入：模式关键词 + 目标、自然语言 UI 描述或文件路径。路由规则示例：scaffold <name> / init <name> 进入 Scaffold；component <name> / create <name> 进入 Component；page <name> / view <name> / screen <name> 进入 Page/View；theme / tokens 进入 Theme；refactor <path> / style <path> 进入 Refactor；audit / audit <path> 进入 Audit。自然语言组件描述自动路由到 Component，页面描述自动路由到 Page/View，现有 .tsx/.jsx/.css 文件路径自动路由到 Refactor，错误信息自动路由到 Audit。空参数时展示模式与示例调用。对歧义输入，技能会通过分类判定环节消解后再路由；混合信号时会询问用户选择模式。
适用场景
- 从零搭建现代 React 前端项目
- 构建单个 UI 组件或整页界面
- 配置或重构设计令牌与主题系统
- 将旧前端代码现代化到当前最佳实践
- 对前端代码库做只读质量审查
限制
技能明确不适用于：后端 API、数据库设计与 DevOps 配置；测试框架（Jest、Vitest）——使用标准测试模式；状态管理库（Zustand、Redux、Jotai）——按项目需求选择；路由（React Router、TanStack Router）——参考框架专属文档；完整 SSR 框架配置（Next.js、Remix 超出 React 19 模式的配置）；构建工具与包管理——交由 javascript-conventions。遇到后端、API、数据库、DevOps、测试、状态、路由、构建工具等输入时，技能会拒绝并重定向到相关技能。此外，contrast-color() 为实验性功能（仅 Firefox 146+ 与 Safari TP 支持），需使用手动回退值。