AgentSkillsCN

ui-consistency-guardian

确保 UI 设计的一致性，特别是新模块的视觉风格。在创建新组件、修改样式或引入新模块时调用。

中文原作
SKILL.md
--- frontmatter
name: "ui-consistency-guardian"
description: "确保 UI 设计的一致性，特别是新模块的视觉风格。在创建新组件、修改样式或引入新模块时调用。"

UI Consistency Guardian

该技能用于维护项目的视觉语言统一，确保所有新旧模块在色彩、圆角、阴影、间距和交互感上保持高度一致。

核心能力

  1. •视觉规范校验：强制执行项目的核心设计语言（如：圆角 rounded-[2.5rem], 背景 bg-white/glass, 阴影 shadow-xl shadow-gray-200/50）。
  2. •模块同步审计：在新模块引入时，自动对比现有核心页面（如 Home.tsx, Posture.tsx）的样式类名。
  3. •交互一致性检查：确保 Hover 状态、动画时长（如 duration-500）和微交互逻辑（如 hover:scale-105）在全站统一。
  4. •Tailwind 类名标准化：识别并替换非标准的 Tailwind 类名，确保使用预设的玻璃拟态和渐变文字效果。

调用时机

  • •创建新组件（Component）或新页面（Page）时。
  • •重构现有 UI 或修改全局样式（index.css）时。
  • •用户要求“检查 UI 一致性”或“优化视觉效果”时。

使用流程

  1. •扫描基准：读取 index.css 和 Home.tsx 以获取当前的 UI 基准规范。
  2. •审查目标：读取新模块的代码，识别其使用的 Tailwind 类名和布局模式。
  3. •对比差异：查找圆角大小、颜色深度、阴影样式等不一致的地方。
  4. •对齐修复：应用 SearchReplace 将目标模块的样式对齐到基准规范。
  5. •汇报详情：列出为了保持一致性而进行的每一处视觉调整。