为AI智能体提供结构化UI约束规范，涵盖组件、动画、性能等最佳实践，提升界面一致性与可访问性
说明：
## 核心用法
UI Skills 是一套面向AI智能体的**观点式界面约束规范**，旨在指导大语言模型生成高质量、一致性的用户界面代码。它并非可执行代码库，而是一组严格的MUST/SHOULD/NEVER规则集合，覆盖现代React/Tailwind技术栈的完整开发流程。
规范采用分层架构：
– **Stack层**：强制使用Tailwind CSS默认设计令牌、motion/react动画库、tw-animate-css微动效
– **Components层**：强制采用Base UI/React Aria/Radix等可访问原语，禁止混用不同底层系统
– **Interaction层**：规范破坏性操作使用AlertDialog、错误就近展示、禁止阻断粘贴等交互细节
– **Animation层**：严格限制动画实现方式——仅允许transform/opacity合成属性，禁止布局属性动画，时长上限200ms，必须支持prefers-reduced-motion
– **Typography/Layout/Performance/Design层**：覆盖文本渲染、层级管理、性能优化及视觉设计决策
## 显著优点
1. **权威性来源**：规范直接源自现代前端最佳实践（Framer Motion团队、Tailwind Labs、Radix UI设计理念），与业界主流工具链深度对齐
2. **可执行性强**：规则表述精确（MUST/SHOULD/NEVER），LLM可直接转化为代码审查清单或生成约束
3. **性能优先导向**：明确禁止布局抖动、强制合成层动画、限制blur/backdrop-filter滥用，契合Core Web Vitals优化目标
4. **可访问性内建**：强制aria-label、尊重reduce-motion、使用成熟可访问原语，降低合规成本
5. **一致性保障**：通过”项目既有原语优先””禁止混用系统”等规则，防止技术债务累积
## 潜在缺点与局限性
– **技术栈锁定**：深度绑定React+Tailwind生态，对Vue/Svelte/原生CSS项目适配需额外转换成本
– **灵活性受限**：”观点式”设计意味着部分决策（如禁止渐变、单强调色限制）可能与品牌需求冲突
– **无自动 enforcement**：纯文档规范，依赖LLM自觉遵守或配合lint工具（如eslint-plugin-tailwindcss）实现硬约束
– **更新滞后风险**：motion/react等依赖快速迭代，规范需人工维护同步
– **中文/复杂排版场景**：text-balance/text-pretty等属性在CJK环境兼容性需验证
## 适合人群
– **AI Agent开发者**：需为代码生成Agent设定UI输出边界
– **全栈工程师**：寻求React/Tailwind项目快速一致性方案
– **设计系统维护者**：作为代码审查checklist或生成式设计的约束输入
– **技术负责人**：规范团队AI辅助编码的输出质量标准
## 常规风险
– **误用风险**：若Agent未正确解析NEVER规则，可能生成违规代码（如动画width/height导致布局抖动）
– **过度约束**：严格规则可能抑制合理例外场景，需人工override机制
– **版本漂移**：Tailwind CSS v4、motion/react新API可能使部分规范过时
