Agent Skills
› ibelick/ui-skills
ibelick/ui-skills
GitHub强制规范UI代码质量，修复间距、层级、排版及布局问题。提供快速清理和润色界面方案，涵盖Stack、组件、交互、动画、排版等约束，防止AI生成杂乱代码。
Install All Skills
npx skills add ibelick/ui-skills --all -g -y
Skills in Collection (7)
强制规范UI代码质量，修复间距、层级、排版及布局问题。提供快速清理和润色界面方案，涵盖Stack、组件、交互、动画、排版等约束，防止AI生成杂乱代码。
需要快速清理或润色用户界面时
检查UI文件是否符合设计规范时
npx skills add ibelick/ui-skills --skill baseline-ui -g -y
从代码仓库或公开网站提取界面设计语言、视觉系统及设计令牌，生成标准化的 DESIGN.md 文档。用于为编码代理提供持久化的 UI 上下文和约束，确保设计一致性，不修改源代码。
需要记录产品的界面设计规范
需要从现有项目或网站重构视觉系统
需要提取设计令牌以提供给编码 Agent
npx skills add ibelick/ui-skills --skill create-design-md -g -y
用于审计和修复 HTML 无障碍问题，涵盖 ARIA 标签、键盘导航、焦点管理及 WCAG 合规性。支持审查文件并报告违规项及具体修复建议。
添加或修改按钮、表单等交互控件
审查代码以符合 WCAG 无障碍标准
npx skills add ibelick/ui-skills --skill fixing-accessibility -g -y
用于审计和修复 HTML 页面元数据，包括标题、描述、规范 URL、Open Graph、Twitter 卡片及 JSON-LD 结构化数据。确保 SEO 正确性、社交分享预览正常及索引策略合规。
添加或修改页面标题和描述
修复 Open Graph 或 Twitter 卡片标签
设置规范 URL 和 robots 指令
新增结构化数据 (JSON-LD)
配置 Favicon 和应用图标
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 Skills 的路由层，用于在 Agent 进行 UI 相关工作时，通过 CLI 选择最小且最有用的技能上下文以指导实现。
用户有明确的 UI 开发目标
需要加载 UI 相关的技能上下文
npx skills add ibelick/ui-skills --skill ui-skills-root -g -y
