UI Skills 模块化设计指南
15个独立skill模块化设计，专业团队的必备工具箱。包含无障碍审计、SEO优化、迪士尼动画原则等专业模块。
15个独立skill，模块化设计，专业团队的必备工具箱。
简介
UI Skills 不同于其他"大一统"的skill，它采用模块化设计，将前端开发的各种需求拆分为15个独立skill。你可以按需安装，只装你需要的。
核心优势：
- ✅ 模块化设计，按需安装
- ✅ 专业领域深入（无障碍、性能、SEO）
- ✅ 迪士尼动画原则支持
- ✅ 完全免费
与Impeccable的区别
| 特性 | Impeccable | UI Skills |
|---|---|---|
| 设计理念 | 一体化 | 模块化 |
| 学习曲线 | 低 | 中 |
| 深度 | 广泛但浅 | 专注且深 |
| 无障碍 | 基础 | 专业级 |
核心模块
1. baseline-ui - Tailwind CSS一致性
检查颜色变量、间距系统、组件命名、设计token使用。适合团队协作项目、设计系统构建。
2. fixing-accessibility ⭐ 推荐
专业级无障碍审计：ARIA标签、键盘导航、颜色对比度(WCAG 2.1)、屏幕阅读器、焦点管理。适合政府项目、企业应用。
3. fixing-metadata - SEO优化
meta标签、Open Graph、Twitter Card、结构化数据、sitemap配置。适合营销网站、内容平台、电商。
4. 12-principles-of-animation ⭐ 推荐
迪士尼动画12原则：挤压与拉伸、预备动作、演出布局、慢入慢出、弧形运动、节奏控制等。适合移动端App、游戏UI。
其他模块
| 模块 | 用途 |
|---|---|
| responsive-layout | 响应式布局检查 |
| dark-mode | 深色模式适配 |
| form-design | 表单设计最佳实践 |
| loading-states | 加载状态设计 |
| error-handling | 错误处理UI |
场景推荐
企业级后台
baseline-ui + fixing-accessibility + form-design
营销落地页
fixing-metadata + 12-principles-of-animation + loading-states
移动端App
12-principles-of-animation + responsive-layout + loading-states
与Impeccable配合
- 用 Impeccable
/polish快速美化 - 用 UI Skills
/fixing-accessibility做无障碍审计 - 用 UI Skills
/fixing-metadata做SEO优化
适合人群
推荐：专业前端团队、有SEO/无障碍需求的项目、追求极致性能的应用
不推荐：快速原型开发（用Impeccable）、个人小项目、刚入门前端
总结
| 需求 | 建议 |
|---|---|
| 只需要美化 | 用 Impeccable |
| 需要无障碍支持 | 加装 fixing-accessibility |
| 需要SEO优化 | 加装 fixing-metadata |
| 专业前端团队 | 完整安装 UI Skills |
核心价值：UI Skills 是 Impeccable 的专业级补充，不是替代品。
更多模块详情请访问 ui-skills.com