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
根据产品仓库或公开网站提取设计规范，生成包含设计语言、Token和视觉系统的DESIGN.md文档。支持源码与URL两种模式，严格区分证据来源，不修改业务代码，为UI开发提供持久化上下文。
用户要求记录界面设计语言或视觉系统
需要从现有代码或网站提取设计Token
需要为编码Agent提供持久的UI上下文
npx skills add ibelick/ui-skills --skill create-design-md -g -y
审计并修复HTML无障碍问题，涵盖ARIA标签、键盘导航、焦点管理及对比度等。用于添加交互控件、表单或审查WCAG合规性时触发。
审查UI组件的WCAG合规性
修复ARIA标签和键盘导航问题
处理焦点管理和模态框行为
检查表单错误提示和颜色对比度
npx skills add ibelick/ui-skills --skill fixing-accessibility -g -y
用于审计和修复HTML元数据（标题、描述、规范URL、OG标签等）的Skill。适用于添加SEO元数据、修复社交分享预览、审查Open Graph标签及确保新页面元标签正确。
添加或修改页面标题、描述和规范链接
实现Open Graph或Twitter卡片元数据
设置图标、manifest或主题色
构建共享SEO组件或布局元数据默认值
添加JSON-LD结构化数据
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问题并生成自包含的实现计划。仅读取源码，不修改文件，专用于界面审查、优化及设计交接场景。
审查界面一致性
优化UI布局或样式
检查设计系统漂移
准备设计交接
npx skills add ibelick/ui-skills --skill improve-ui -g -y
作为 UI Skills 的路由层，用于在 Agent 进行 UI 开发时，通过 CLI 工具智能选择最精简且相关的技能上下文，以提升实现效率。
需要执行 UI 相关任务
需要加载前端界面特定技能
npx skills add ibelick/ui-skills --skill ui-skills-root -g -y
