web-component-design
✓CSS-in-JS、構成戦略、再利用可能なコンポーネント アーキテクチャを含む React、Vue、Svelte コンポーネント パターンをマスターします。 UI コンポーネント ライブラリの構築、コンポーネント API の設計、またはフロントエンド デザイン システムの実装時に使用します。
インストール
SKILL.md
Build reusable, maintainable UI components using modern frameworks with clean composition patterns and styling approaches.
| Tailwind CSS | Utility classes | Rapid prototyping, design systems | | CSS Modules | Scoped CSS files | Existing CSS, gradual adoption | | styled-components | Template literals | React, dynamic styling | | Emotion | Object/template styles | Flexible, SSR-friendly | | Vanilla Extract | Zero-runtime | Performance-critical apps |
CSS-in-JS、構成戦略、再利用可能なコンポーネント アーキテクチャを含む React、Vue、Svelte コンポーネント パターンをマスターします。 UI コンポーネント ライブラリの構築、コンポーネント API の設計、またはフロントエンド デザイン システムの実装時に使用します。 ソース: wshobson/agents。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/wshobson/agents --skill web-component-design インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/wshobson/agents --skill web-component-design- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
web-component-design とは？
CSS-in-JS、構成戦略、再利用可能なコンポーネント アーキテクチャを含む React、Vue、Svelte コンポーネント パターンをマスターします。 UI コンポーネント ライブラリの構築、コンポーネント API の設計、またはフロントエンド デザイン システムの実装時に使用します。 ソース: wshobson/agents。
web-component-design のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/wshobson/agents --skill web-component-design インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/wshobson/agents