Agent Skills
› ibelick/ui-skills
ibelick/ui-skills
GitHub强制执行UI设计基线，规范Tailwind CSS、组件库、动画及排版标准，防止AI生成代码混乱。支持快速修复间距、层级等问题，并提供文件审查与具体修复建议。
Install All Skills
npx skills add ibelick/ui-skills --all -g -y
Skills in Collection (7)
强制执行UI设计基线，规范Tailwind CSS、组件库、动画及排版标准，防止AI生成代码混乱。支持快速修复间距、层级等问题，并提供文件审查与具体修复建议。
需要快速清理或润色界面时
检查UI代码是否符合设计规范时
npx skills add ibelick/ui-skills --skill baseline-ui -g -y
根据产品仓库或公开网站提取设计规范，生成DESIGN.md文档。支持本地代码库分析与网页DOM逆向，收集设计令牌与视觉模式，建立持久化UI上下文，不修改源代码。
用户要求记录界面设计语言
需要重构产品的视觉系统
从现有证据中提取设计令牌和指南
为编码Agent提供持久的UI上下文
npx skills add ibelick/ui-skills --skill create-design-md -g -y
用于审计和修复HTML无障碍问题，涵盖ARIA标签、键盘导航、焦点管理及色彩对比度等。适用于添加交互控件、表单或审查WCAG合规性时，提供最小化精准修复建议。
审查UI组件的WCAG合规性
修复表单验证与错误状态
实现对话框焦点 trapping
优化键盘导航体验
npx skills add ibelick/ui-skills --skill fixing-accessibility -g -y
审计并修复HTML元数据，包括标题、描述、规范URL、Open Graph标签、Twitter卡片、JSON-LD结构化数据及robots指令。用于SEO优化、社交分享预览修复及新页面元数据配置。
添加或修改页面标题和描述
修复社交分享预览（OG/Twitter卡片）
设置规范URL和索引控制
添加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执行，确保界面一致性且保留产品身份。
用户要求审查、优化或清理界面
调查设计系统漂移
准备设计交接
npx skills add ibelick/ui-skills --skill improve-ui -g -y
UI技能路由层，用于在明确UI目标时通过CLI选择最小必要技能集并加载上下文进行实现。
需要执行UI相关开发任务
Agent需根据目标选择合适的前端技能
npx skills add ibelick/ui-skills --skill ui-skills-root -g -y
