component-architecture
✓设计和构建可重复使用、记录完善的组件。掌握组件构成、道具设计、变体系统、状态管理和文档。创建一个可扩展的组件库，以实现一致性并加快开发速度。适用于 React、TypeScript 和 Tailwind CSS。
SKILL.md
Components are the building blocks of modern interfaces. A well-designed component system enables consistency, speeds up development, and makes maintenance easier. This skill teaches you to think about components systematically: designing for reusability, managing complexity, documenting thoroughly, and building a library that your team loves to use.
Atomic Design is a methodology for creating design systems by breaking down interfaces into fundamental building blocks.
1. Atoms The smallest, most basic components. They can't be broken down further without losing their meaning.
设计和构建可重复使用、记录完善的组件。掌握组件构成、道具设计、变体系统、状态管理和文档。创建一个可扩展的组件库，以实现一致性并加快开发速度。适用于 React、TypeScript 和 Tailwind CSS。 来源：sanky369/vibe-building-skills。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/sanky369/vibe-building-skills --skill component-architecture- 分类
- </>开发工具
- 认证
- ✓
- 收录时间
- 2026-02-01
- 更新时间
- 2026-02-18
快速解答
什么是 component-architecture？
设计和构建可重复使用、记录完善的组件。掌握组件构成、道具设计、变体系统、状态管理和文档。创建一个可扩展的组件库，以实现一致性并加快开发速度。适用于 React、TypeScript 和 Tailwind CSS。 来源：sanky369/vibe-building-skills。
如何安装 component-architecture？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/sanky369/vibe-building-skills --skill component-architecture 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/sanky369/vibe-building-skills
详情
- 分类
- </>开发工具
- 来源
- skills.sh
- 收录时间
- 2026-02-01