Agent Skills
› ibelick/ui-skills
ibelick/ui-skills
GitHub提供前端UI代码的标准化检查与修复建议，涵盖排版、布局、动画及无障碍等规范，确保界面一致性并防止AI生成劣质代码。
Install All Skills
npx skills add ibelick/ui-skills --all -g -y
Skills in Collection (9)
提供前端UI代码的标准化检查与修复建议，涵盖排版、布局、动画及无障碍等规范，确保界面一致性并防止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
构建自由画布以探索、比较和迭代内容。通过对话修改源码并实现实时预览，支持注册表管理、位置调整及版本对比，强调安全隔离与代码结构规范。
需要可视化探索或对比多个方案
创建交互式预览组件
npx skills add ibelick/ui-skills --skill create-canvas -g -y
从代码仓库或公开网站提取设计语言、令牌和视觉规范，生成标准化的 DESIGN.md 文档。旨在为编码 Agent 提供持久化的 UI 上下文，严格限制仅修改设计文档，不触碰源代码。
需要记录界面设计语言
重建视觉系统
提取设计令牌
给编码 Agent 提供 UI 上下文
npx skills add ibelick/ui-skills --skill create-design-md -g -y
用于审计和修复前端UI的无障碍问题，涵盖ARIA标签、键盘导航、焦点管理及对比度等WCAG合规性检查。
审查HTML无障碍合规性
修复交互控件和表单的无障碍缺陷
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
npx skills add ibelick/ui-skills --skill fixing-metadata -g -y
用于审计和修复UI动画性能问题，包括布局抖动、合成属性使用不当及滚动关联运动等。通过提供规则指导优化CSS/JS动画，提升页面流畅度。
动画卡顿或过渡不流畅
审查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技能的入口路由层，用于判断任务是否涉及UI开发。若涉及，则通过CLI工具按规则筛选并加载最小可用技能上下文以指导实现；否则返回无需技能。
用户提出明确的UI开发目标
在Codex、Cursor或Claude Code中需要选择UI相关技能
npx skills add ibelick/ui-skills --skill ui-skills-root -g -y
