核心用法
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可能使部分规范过时