什么是 component-architecture？
当任务涉及设计或构建 UI 组件时主动加载。当用户说“构建组件”、“创建表单”、“添加模式”、“设计布局”或“重构此页面”时使用。涵盖组件组成和层次结构、道具设计和类型、渲染优化（memo、useMemo、useCallback）、复合组件模式、受控与非受控表单、文件组织以及 React、Vue 和 Svelte 的可访问性。 来源：mgd34msu/goodvibes-plugin。
·component-architecture
*
component-architecture
✓当任务涉及设计或构建 UI 组件时主动加载。当用户说“构建组件”、“创建表单”、“添加模式”、“设计布局”或“重构此页面”时使用。涵盖组件组成和层次结构、道具设计和类型、渲染优化（memo、useMemo、useCallback）、复合组件模式、受控与非受控表单、文件组织以及 React、Vue 和 Svelte 的可访问性。
如何安装 component-architecture
通过命令行快速安装 component-architecture AI 技能到你的开发环境
- 打开终端: 打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等）
- 运行安装命令: 复制并运行以下命令：npx skills add https://github.com/mgd34msu/goodvibes-plugin --skill component-architecture
- 验证安装: 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
来源：mgd34msu/goodvibes-plugin。
SKILL.md
查看原文This skill guides you through designing and implementing UI components using GoodVibes precision and analysis tools. Use this workflow when building React, Vue, or Svelte components with proper composition, state management, and performance optimization.
Trigger phrases: "build component", "create UI", "component structure", "render optimization", "state lifting", "component composition".
Before building components, understand existing patterns in the codebase.
当任务涉及设计或构建 UI 组件时主动加载。当用户说“构建组件”、“创建表单”、“添加模式”、“设计布局”或“重构此页面”时使用。涵盖组件组成和层次结构、道具设计和类型、渲染优化（memo、useMemo、useCallback）、复合组件模式、受控与非受控表单、文件组织以及 React、Vue 和 Svelte 的可访问性。 来源：mgd34msu/goodvibes-plugin。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/mgd34msu/goodvibes-plugin --skill component-architecture- 分类
- *创意媒体
- 认证
- ✓
- 收录时间
- 2026-02-25
- 更新时间
- 2026-03-10
快速解答
如何安装 component-architecture？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/mgd34msu/goodvibes-plugin --skill component-architecture 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
这个 Skill 的源码在哪？
https://github.com/mgd34msu/goodvibes-plugin
详情
- 分类
- *创意媒体
- 来源
- skills.sh
- 收录时间
- 2026-02-25