Agent Skills
› ibelick/ui-skills
ibelick/ui-skills
GitHub规范前端UI代码质量，强制使用Tailwind、无障碍组件及性能优化动画，防止AI生成劣质界面。支持对文件进行审查并输出违规项与修复建议。
Install All Skills
npx skills add ibelick/ui-skills --all -g -y
Skills in Collection (8)
规范前端UI代码质量，强制使用Tailwind、无障碍组件及性能优化动画，防止AI生成劣质界面。支持对文件进行审查并输出违规项与修复建议。
需要快速清理或润色UI界面时
要求检查UI文件是否符合设计规范时
npx skills add ibelick/ui-skills --skill baseline-ui -g -y
构建全屏交互画布以浏览现有UI组件及其变体，支持平移缩放。严格遵循不修改组件源码、复用项目现有框架与约定的原则，按步骤实现路由、布局及主题适配功能。
需要可视化预览或探索UI组件库
构建组件展示与对比的交互式界面
npx skills add ibelick/ui-skills --skill component-canvas -g -y
从代码仓库或公开网站提取设计语言、令牌和视觉系统，生成标准化的 DESIGN.md 文档，为 UI 开发提供持久上下文。
需要记录产品界面设计规范
重建视觉系统设计系统
提取设计令牌与指导原则
为编码 Agent 提供 UI 上下文
npx skills add ibelick/ui-skills --skill create-design-md -g -y
用于审计和修复HTML无障碍问题，涵盖ARIA标签、键盘导航、焦点管理及色彩对比度等。适用于添加交互控件、表单或审查WCAG合规性时提供代码级修复建议。
审查UI组件的WCAG合规性
修复按钮、表单、对话框的无障碍缺陷
npx skills add ibelick/ui-skills --skill fixing-accessibility -g -y
用于审计和修复 HTML 元数据（标题、描述、规范 URL、OG/Twitter 标签、JSON-LD 等）的 Skill，确保 SEO 正确性、社交分享预览及结构化数据合规。
添加或修改页面元数据
修复 Open Graph 或 Twitter 卡片
设置规范 URL 和 robots 指令
构建共享 SEO 组件
npx skills add ibelick/ui-skills --skill fixing-metadata -g -y
用于审计和修复 UI 动画性能问题，如布局抖动、合成属性使用及滚动联动等。提供代码审查规则与优化建议，确保动画流畅无卡顿。
动画卡顿或过渡不流畅
审查 CSS/JS 动画性能
重构交互或过渡效果
npx skills add ibelick/ui-skills --skill fixing-motion-performance -g -y
审计现有产品界面与设计规范的符合度，识别UI问题并生成自包含的实现计划。严格只读，不修改源码，仅输出设计改进方案供其他Agent执行。
审查或优化界面
清理UI不一致
调查设计系统漂移
准备设计交接
npx skills add ibelick/ui-skills --skill improve-ui -g -y
UI技能路由层，用于在Agent执行UI相关任务时，通过CLI工具智能选择最小且最适用的技能上下文，实现精准加载与高效实施。
需要处理UI界面开发或优化
Agent拥有明确的UI目标但需确定具体技能
npx skills add ibelick/ui-skills --skill ui-skills-root -g -y
