用途：该技能在涉及 UI 组件设计或构建时主动加载，指导使用 GoodVibes 的精度与分析工具完成 React、Vue、Svelte 组件的设计、实现与优化。触发场景包括构建组件或组件库、重构组件层级与组合模式、优化渲染性能、组织组件文件结构、实现设计系统或原子设计、跨框架迁移、审查组件架构可维护性。
主要能力：分六个阶段。发现阶段用 discover 查找组件文件、组合模式、状态管理、样式方案与性能钩子，用 precision_read 提取符号并阅读代表性组件。决策阶段依据 references/component-patterns.md 选择组织模式（原子设计、按功能、扁平、混合）、组合模式（children props、render props、复合组件、HOC、Hooks/Composables、插槽）与状态策略。实现阶段定义 TypeScript props 接口、编写组件逻辑、用 precision_write 组织文件（组件、测试、Storybook、index、types）。状态管理区分本地、提升与全局状态，并避免 prop drilling。性能阶段用 trace_component_state、analyze_render_triggers 检测问题，应用 useMemo、useCallback、memo、虚拟化与懒加载。可访问性阶段强调语义 HTML、ARIA 属性与键盘导航。
使用方式：技能包含 scripts/validate-components.sh 与 references/component-patterns.md。按阶段调用 discover、precision_read、precision_write 等工具，命令与代码保持原样。
适用场景：React、Vue、Svelte 组件开发与重构、设计系统建设、渲染性能优化。
限制：资料未提供安装方式、收费、价格、平台支持范围与效果数据，暂未提供。