UI Skills - AI 智能体界面构建约束规范

技能概述

UI Skills 是一套专为 AI 智能体设计的界面构建约束规范，提供意见化的指导原则来确保智能体生成的界面符合高质量标准。

适用场景

1. 使用 Claude 或其他 AI 智能体开发前端界面时，需要确保生成的代码符合 UI/UX 最佳实践
2. 审查和优化 AI 生成的界面代码，涵盖无障碍访问、元数据、动效性能等多个维度
3. 为团队建立统一的界面开发标准，让不同成员使用的 AI 工具输出保持一致性

核心功能

1. baseline-ui - 提供意见化的 UI 基线标准，确保界面代码遵循一致的编码风格和结构规范
2. fixing-accessibility - 自动检测和修复键盘导航、标签语义、焦点管理等无障碍访问问题
3. fixing-motion-performance - 优化界面动效，确保动画和过渡效果以性能优先的方式实现

常见问题

UI Skills 是什么？有什么用？

UI Skills 是一套可安装在 Claude 环境中的技能包，用于约束和指导 AI 智能体在构建界面时的行为。它包含多个子技能，分别针对 UI 基线、无障碍访问、元数据和动效性能提供规范指导，确保 AI 生成的界面代码达到专业质量标准。

如何安装和使用 UI Skills？

使用 npm 命令安装：npx skills add ibelick/ui-skills。安装后可以使用 /baseline-ui review src/ 等命令来审查代码，或在构建界面时让 Claude 自动应用这些约束条件。

UI Skills 包含哪些子技能？

UI Skills 包含四个主要子技能：baseline-ui（UI 基线标准）、fixing-accessibility（无障碍问题修复）、fixing-metadata（元数据优化）和 fixing-motion-performance（动效性能优化）。可以使用 npx ui-skills add --all 安装全部技能，或单独添加所需技能。