spnngl/agent-skills

UI 专家

此技能决定界面的外观并证明其对用户有效。代码习惯用法（TypeScript、React、Next.js、测试、lint）来自 ts-coding 技能：只要处理 .ts 或 .tsx 文件，就加载它。

工作流

1. 熟悉环境. 阅读 UI 的事实来源：package.json（react、next、tailwindcss、原始库：react-aria-components、@radix-ui/*、@base-ui-components/react 或 shadcn 的 components.json；图标集；@playwright/test、@axe-core/playwright）、包含 @import "tailwindcss" 和 @theme 的样式表、暗色模式机制、共享组件目录以及你正在更改的屏幕旁边的两到三个现有屏幕。项目现有的选择优先于此技能的默认值；重用它提供的原始组件、令牌、间距节奏和术语。 完成标准： 你能够说出样式系统、令牌文件、原始组件库、图标集、主题切换器、开发和运行工作的 URL 以及浏览器测试运行器（如果不存在则说明无）。

2. **确定设计概要. ** 在任何标记之前，将此块写入你的回复并以此为目标构建：

   用户和任务：   谁使用它，以及它服务的唯一任务
   视觉焦点：      用户眼睛首先落到的单个元素
   主要操作：      唯一的肯定性操作；破坏性操作单独命名
   密度：         稀疏 | 舒适 | 密集，与相邻屏幕匹配
   氛围：          一个形容词，结果必须达到（“精确”、“平静”、“温暖”）
   状态：        空、加载中、错误、部分、溢出、无权限：那些适用的状态
   

   布局、构图和视觉工艺：references/taste.md。 完成标准： 每个字段都包含一个针对此屏幕的具体答案，其具体程度足以让审查者能够拒绝对此进行的不符要求的构建。

3. 解析令牌. 将每个颜色、尺寸、间距、圆角、阴影和持续时间映射到步骤 1 中的语义令牌。如果缺少令牌，则在源代码处添加具有亮色值和暗色值的新令牌，遵循 references/tokens.md。 完成标准： diff 中不包含原始颜色、任意值（p-[13px]、bg-[#1a1a1a]）或任何可主题化属性的内联样式；每个新令牌都具有亮色值和暗色值；并且 node scripts/contrast.ts <theme.css>（路径相对于此技能的目录）通过。

4. 构建. 使用项目提供的原始组件（如果没有则使用 React Aria Components），以移动端优先的方式，遵循 规则 和 references/components.md。语义、键盘和 WCAG 细节： references/accessibility.md。界面文本： references/copy.md。 完成标准： 每个交互元素都覆盖了其适用的每个状态；每个数据视图都呈现了概要中指定的每个状态；并且无前缀的样式是 320px 布局。

5. 验证. 运行 ts-coding 的检查，然后运行 references/verification.md 中的静态和浏览器关卡：令牌漂移、表情符号、令牌对比度、亮色和暗色模式下的 axe、键盘、320px 回流、触摸目标大小、减少动画偏好。 完成标准： 每个关卡都退出并返回 0，并且你报告了每个关卡打印的内容；无法运行的关卡需报告为“未验证”并说明原因。

6. 审查. 在 1280 和 390 像素宽度下，分别以亮色和暗色模式截取工作截图，并包含概要中的每个状态；使用读取工具打开每个图像并点击每个控件。然后使用 references/review.md 论点进行反驳。当子代理工具可用时，将屏幕截图和该文件交给一个新的代理：一个未参与构建的评论者能更清晰地看到问题。 完成标准： 你已经查看了每张截图，每个控件都产生了可见的变化，并且每个严重或主要发现要么已修复，要么已报告给用户。

对于小修改（现有组件内的间距、颜色或文案调整）：运行步骤 1、3 和 5 的静态关卡，然后以亮色和暗色模式截取更改元素的截图并同时查看两者。

审查现有 UI：运行步骤 1，推导出并撰写步骤 2 的设计概要，针对它运行步骤 5 和 6，并按照 references/review.md 的格式报告。如果没有渲染服务，请说明并仅根据源代码能证明的内容限制发现。

规则

证据

• 只有在命令刚刚打印出对比度、通过或分数时，才能声明之；否则应说明“未验证”。跳过的关卡（无浏览器、无服务器）未测量任何内容。
• 关卡证明的是正确性，而非质量：从屏幕截图中判断层次结构和工艺水平。

层次结构

• 一个元素主导：设计概要中的视觉焦点是最大、最重或对比度最高的元素，其同级元素则更为安静。在营销和落地页中，展示字体应至少是正文字体大小的 2.5 倍；产品屏幕将页面标题保持在正文大小的一到两个台阶之上，其余部分由权重和位置决定。
• 间距向外增长：组内间隙 < 其容器的内边距 < 各部分之间的间距。
• 空状态填充其区域并命名第一个操作。页面应有意结束：摘要、页脚或下一步操作。

令牌和颜色

• 根据意图选择令牌：选择含义与操作匹配的令牌。破坏性操作在其触发器和确认中均使用破坏性令牌；主要操作用于标记每个视图中唯一的主肯定性操作。
• 每个状态都将颜色与图标或文本配对。一种强调色；中性色承载其余部分。
• 主题化只需在令牌源处进行一次编辑：每个屏幕都读取相同的语义令牌。
• 亮色与暗色遵循系统偏好；系统/亮色/暗色设置覆盖它并持久化保存（references/tokens.md）。

状态

• 交互元素：默认、悬停、获得焦点可见、按下、禁用、待定、无效、已选中。每个适用的状态在亮色和暗色模式下均应视觉上可区分；选择器见 references/components.md。
• 待定状态应通过旋转动画或进度标签（isPending、aria-busy）保持控件完整强度。禁用状态标记用户当前无法执行的操作，并在附近显示原因。
• 反馈报告发生了什么：成功提示在数据更改后出现，并且视图已经显示了该更改。

布局

• 移动端是基础：无前缀的实用类是手机布局；sm:、md:、lg: 用于在更宽屏幕上追加样式。在不同宽度下重用的组件应对其容器做出响应（@container、@md:）。
• 水平滚动的区域应显示可见提示：边缘渐变或滚动条。

防护栏

• 图标来自 lucide-react（或项目图标集）作为带有 currentColor 的 SVG。在 UI、文案、代码和提交中零表情符号。
• 表面之间通过完整的细线边框、表面层级或间距进行分隔。禁止在卡片、警告、提示或对话气泡的单侧使用彩色边框。
• 内容是真实的：合理的名称、长字符串、大数字、零项和一项。占位文案和调试控件永远不会在产品中渲染。

参考文档

加载与你当前分支匹配的一个：

• references/taste.md：劣质设计的迹象、构图、排版、颜色、深度；适合任何新屏幕或重新设计。
• references/tokens.md：Tailwind v4 @theme、语义令牌、系统主题及其覆盖设置、添加或审计令牌。
• references/components.md：React Aria Components、状态属性、表单、覆盖层、数据视图、图标、动效。
• references/accessibility.md：语义、键盘和焦点、对比度、WCAG 2.2 标准、强制色彩、RTL。
• references/copy.md：标签、错误、空状态、确认、提示、自动生成文案的特征。
• references/verification.md：漂移、表情符号和对比度扫描、渲染组件状态、Playwright 和 axe 关卡、截图矩阵。
• references/review.md：批判性视角、启发式方法、严重性、发现格式。