Ui Skills

核心用法

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

核心用法

ui-skills 是一套面向 AI Agent 的 UI 开发约束规范，采用纯 Markdown 文档形式，涵盖 Stack、Components、Interaction、Animation、Typography、Layout、Performance、Design 八大维度。开发者可直接引用这些规则约束 Agent 的代码生成行为，确保输出符合现代 React + Tailwind CSS 最佳实践。

关键约束速览

• 技术栈：强制使用 Tailwind CSS 默认值、motion/react 动画、cn 工具函数
• 组件基础：必须使用 Base UI/React Aria/Radix 等无障碍原语，禁止手动重建键盘行为
• 动画规范：默认禁止动画，必须使用时仅动画 transform/opacity，时长 ≤200ms
• 交互细节：禁用 h-screen 用 h-dvh，禁止输入框拦截粘贴，错误信息就近显示

显著优点

1. 零执行风险：纯文档类型（T-MD），无可执行代码、无依赖、无数据收集
2. 权威实践来源：基于 React 生态主流方案（Tailwind、Radix、Framer Motion）的行业共识
3. 无障碍优先：强制要求 aria-label、键盘导航、prefers-reduced-motion 支持
4. 性能导向：明确禁止布局动画、大模糊滤镜、will-change 滥用等性能陷阱

潜在局限

• 无自动校验机制：规范需人工或 Agent 自觉遵守，无工具链强制约束
• 框架绑定较深：主要面向 React + Tailwind CSS 生态，Vue/Svelte 等场景需适配
• 版本兼容未说明：未标注 Tailwind v3/v4、React 18/19 等版本差异处理
• 设计约束偏保守：禁止渐变、多色、发光效果等，可能限制创意表达场景

适合人群

• 使用 AI Agent 生成 React/Tailwind 界面的前端开发者
• 追求代码一致性、无障碍合规、性能优化的团队
• 需要快速约束 Agent 输出质量的代码审查者

常规风险

| 风险项 | 等级 | 说明 |

|--------|------|------|

| 代码执行风险 | 无 | 纯 Markdown，零可执行代码 |

| 供应链攻击 | 无 | 无第三方依赖 |

| 数据隐私 | 无 | 无数据收集，符合 GDPR/CCPA |

| 外部链接 | 极低 | 仅 1 个 Base UI 文档引用，HTTPS 可信源 |

> ⚠️ 注意：安全认证仅反映当前版本状态，未来更新建议重新审查。