用途
Frontend Patterns 是一个面向前端 UI 工作的辅助型技能，用于在开发或评审界面时补充可访问性、响应式布局、加载/错误状态、性能护栏以及 DESIGN.md 编写等方面的检查与建议。其核心原则是：界面存在的目的是帮助用户完成任务，每个 UI 决策都应让用户的任务更容易完成或让界面更可访问，即“为用户成功而设计，而非为审美偏好而设计”。
该技能属于建议性（advisory）技能。明确的用户指令、CLAUDE.md、仓库规范以及已批准的计划，优先于本技能中的任何建议。
主要能力
技能围绕以下参考文件组织，按当前 UI 任务需要选择性阅读：
- references/ui-state-and-feedback.md：加载/错误/空/成功状态的顺序、骨架屏与加载指示器的选择、变更反馈。
- references/accessibility-and-forms.md：面向 WCAG 的检查、键盘与焦点、标签、表单模式、移动端可用性。
- references/performance-and-layout.md：响应式检查、动效、溢出、URL 状态、性能护栏、明暗模式检查。
- references/design-md-authoring.md：根据截图、现有 UI、用户偏好或选定的灵感风格，创建或更新符合规范的项目本地 DESIGN.md。
- references/design-md-inspiration-index.md：仅在用户要求风格参考、品牌方向、情绪板或 DESIGN.md 风格示例时使用。
技能还提供组件输出清单、UX 评审清单、视觉设计清单、动效与动画规则、可访问性与表单指引、成功标准框架、反模式清单、设计系统漂移分类器、空间构图技巧，以及按钮、表单校验、加载状态、错误消息等组件模式示例。
使用方式
技能强调“铁律”：在理解用户流程之前，不要进行 UI 设计。若尚未梳理用户想要完成什么，就无法设计 UI。
设计思考（写代码前）需先确定：目的（该界面解决什么具体问题）、基调（选择一个美学方向并坚持，如极简、极繁、复古未来、自然、奢华、玩趣、编辑杂志风、粗野主义、装饰艺术、柔和粉彩、工业实用等）、约束（框架要求、性能预算、可访问性级别）、差异化（这个 UI 最让人记住的一点是什么）。
通用问题需先回答：用户想完成什么（具体任务而非功能）、步骤是什么（逐次点击）、可能出什么问题（每个错误状态）、谁可能遇到困难（可访问性需求）、现有模式是什么（项目约定）。
组件输出清单要求每个前端交付物包含：完整的 React 组件与 props 接口、样式方案（Tailwind 类或 styled-components）、如需要的状态管理实现、基础单元测试结构、组件的可访问性清单、性能考量与优化。
适用场景
适用于前端 UI 开发或评审中需要补充可访问性检查、响应式/布局验证、性能与加载状态检查，或在用户明确需要时提供可选风格建议的场景。也适用于根据截图、现有 UI、用户偏好或选定灵感风格编写或更新项目本地 DESIGN.md。
限制
该技能为建议性，不得用于覆盖明确的视觉方向、组件契约或已批准的工作流。资料中未提供关于收费、价格、平台支持范围、具体效果保证等信息。技能中的示例代码与规则应结合项目实际规范使用，明确的用户指令与仓库标准优先。