Agent Skills
› ibelick/ui-skills
ibelick/ui-skills
GitHub强制实施 UI 编码规范，防止 AI 生成代码混乱。通过 Tailwind CSS、无障碍组件及动画约束，快速修复间距、排版和布局问题，提升界面质量与一致性。
Install All Skills
npx skills add ibelick/ui-skills --all -g -y
Skills in Collection (7)
强制实施 UI 编码规范，防止 AI 生成代码混乱。通过 Tailwind CSS、无障碍组件及动画约束，快速修复间距、排版和布局问题，提升界面质量与一致性。
需要快速清理或润色 UI 代码时
审查文件是否符合 UI 基线规范时
npx skills add ibelick/ui-skills --skill baseline-ui -g -y
从代码库或网站提取设计语言、Token及规范，生成标准化的DESIGN.md文档。为UI开发提供持久上下文，支持仓库与URL双模式证据收集，确保设计决策有据可依且不修改源代码。
需要记录产品界面设计语言
重构视觉系统并提取设计Token
为编码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、Open Graph标签、Twitter卡片、JSON-LD结构化数据和robots指令。适用于SEO优化、社交分享预览修复及新页面元标签配置。
添加或修改页面标题和描述
实现Open Graph或Twitter卡片元数据
设置规范URL和robots指令
添加JSON-LD结构化数据
修复社交分享预览
npx skills add ibelick/ui-skills --skill fixing-metadata -g -y
用于审查和修复UI动画性能问题，如布局抖动、合成属性使用不当及滚动联动优化。适用于CSS/JS动画开发、交互重构及性能代码审查场景。
动画卡顿或过渡不流畅
审查CSS/JS动画性能
添加或修改UI动画
重构卡顿的交互或过渡
npx skills add ibelick/ui-skills --skill fixing-motion-performance -g -y
审计现有产品界面与设计规范的一致性，识别UI问题并生成自包含的实施计划。严格只读，不修改源码，专为设计系统漂移检查和设计交付准备，供其他Agent执行后续开发任务。
审查或改进界面
清理用户界面
调查设计系统漂移
准备设计交付
npx skills add ibelick/ui-skills --skill improve-ui -g -y
UI技能路由层，用于在Agent进行UI相关工作时，通过CLI工具智能选择最精简且有用的UI技能上下文以指导实现。
需要执行UI相关开发任务
Agent具有明确的UI目标
npx skills add ibelick/ui-skills --skill ui-skills-root -g -y
