用途：在已建立设计令牌与 UX 模式的前提下，指导前端组件的结构化构建，涵盖组件架构、布局选择、状态归属、响应式行为、无障碍、动效与渲染性能，面向组件开发、仪表盘、表单、导航与浮层等交互界面。前提是先调用 godmode:ux-patterns 确定模式与令牌值。
主要能力：一是组件架构，主张组合优于配置，编写前先确定语义结构、属性最小面、状态（默认、悬停、聚焦、激活、禁用、加载、错误、空）、变体、尺寸与响应式与无障碍要求。二是布局策略，按“单轴还是双轴、是否等尺寸”判断：页面骨架、等尺寸卡片网格、仪表盘等二维布局用 CSS Grid，导航行、表单行内组合、单轴分布用 Flexbox，均匀卡片可用 auto-fill/auto-fit 与 minmax()。三是状态归属，优先组件本地状态，服务端数据用专用服务端状态库，跨组件共享视层级用 Context，全局存储为最后手段。四是响应式方法，移动优先，按断点逐层增强，并给出导航、卡片网格、数据表、侧栏、表单、弹窗、主视觉在各端的适配参考。五是无障碍标准，覆盖可聚焦、可见焦点环、键盘激活、可访问名称、表单标签与错误关联、图片替代文本、对比度与减弱动效。六是动效与表单架构，含时长与缓动参考、错误就地展示、标签位于输入框上方、提交期间禁用按钮等。七是渲染性能，包括关键路径、懒加载、图片尺寸与 srcset、打包成本意识。
使用方式：作为技能在构建前端组件时调用，先完成 ux-patterns，再依检查清单逐项落实；配套文件 component-patterns.md 提供可复用组件蓝图。
限制：所有决策需以已确立的令牌与模式为前提；具体实现框架与项目配置、安装方式、收费与价格信息官方资料暂未提供。