跳到主要内容

UI Skills - Agent 构建界面的 UI 打磨技能集

Summary​

UI Skills 是一组专门用于打磨 AI Agent 构建界面的技能集，兼容 Claude Code、Cursor、OpenCode 等。基础技能包括 Baseline UI（验证动画时长、排版比例、组件可访问性、防止 Tailwind CSS 反模式）、Fixing Accessibility（WCAG 合规审计）、Fixing Metadata（SEO 和社交分享优化）和 Motion Performance（动画性能审计）。高级技能将迪士尼 12 条动画原则应用于 Web 界面，使运动感自然有机。

Key Concepts​

  • UI Skills - Agent 界面打磨技能集
  • Accessibility - HTML 可访问性（ARIA、键盘导航、焦点管理、色彩对比）
  • WCAG - Web 内容无障碍指南
  • Motion Performance - 动画性能优化（布局抖动、合成器属性、滚动动画）
  • Tailwind CSS - 防止布局反模式

Detailed Content​

基础技能​

  • Baseline UI：验证动画时长、强制排版比例、检查组件 Accessibility、防止 Tailwind CSS 布局反模式
  • Fixing Accessibility：审计和修复 ARIA 标签、键盘导航、焦点管理、色彩对比、表单错误，确保 WCAG 合规
  • Fixing Metadata：页面标题、meta 描述、canonical URL、Open Graph、Twitter Cards、favicon、JSON-LD、robots 指令
  • Motion Performance：审计布局抖动、合成器属性、滚动关联动画、模糊效果

高级技能​

迪士尼 12 条动画原则应用于 Web 界面，使运动感自然、有机、人性化。

安装​

npx ui-skills add baseline-ui
  • Everything Claude Code
  • Frontend Development
  • Web Performance
  • Design Systems