·component-architecture
</>

component-architecture

sanky369/vibe-building-skills

再利用可能で十分に文書化されたコンポーネントを設計および構築します。マスターコンポーネントの構成、プロップ設計、バリアントシステム、状態管理、および文書化。一貫性を実現し、開発をスピードアップするスケーラブルなコンポーネント ライブラリを作成します。 React、TypeScript、Tailwind CSS で動作します。

16インストール·1トレンド·@sanky369

インストール

$npx skills add https://github.com/sanky369/vibe-building-skills --skill component-architecture

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 で使用できるようになります

ソースリポジトリはどこですか?

https://github.com/sanky369/vibe-building-skills