Component Design Skill

概要

このSkillは、プロジェクトにおけるReactコンポーネントの設計原則と実装ガイドラインを提供します。

基本原則

1. 単一責任の原則

• •各コンポーネントは単一の機能・責任を持つ
• •複数の機能が必要な場合は、複数のコンポーネントに分割する

2. 再利用可能性

• •プロジェクト全体で再利用可能なコンポーネントを作成する
• •プロパティ（props）による柔軟なカスタマイズを可能にする

3. 型安全性

• •TypeScriptの型定義を必須とする
• •プロパティ、状態、イベントハンドラーは全て型定義する

4. Co-location（共存配置）

• •機能固有のコンポーネントは関連するページの近くに配置する
• •_components ディレクトリを使用してページ固有のコンポーネントを管理する
• •複数のページで共有されるコンポーネントのみ src/components/ に配置する

詳細ドキュメント

各カテゴリの詳細な規約は以下を参照してください：

• •ディレクトリ構造 - ファイル配置とディレクトリ設計
• •Props設計パターン - Props設計とイベントハンドリング
• •スタイリングガイド - Tailwind CSSを使用したスタイリング規約

クイックリファレンス

ディレクトリ構造

src/
├── components/
│   ├── ui/                 # 基本的なUIコンポーネント
│   │   ├── Button/
│   │   ├── Input/
│   │   └── ...
│   └── shared/             # 共通コンポーネント（レイアウト含む）
│       ├── Header/
│       ├── Footer/
│       └── ...
└── app/
    ├── dashboard/
    │   ├── page.tsx
    │   └── _components/    # ページ固有のコンポーネント
    │       ├── DashboardChart/
    │       └── StatsCard/
    └── ...

コンポーネント命名規則

• •ファイル名: PascalCase（例: Button.tsx, UserProfile.tsx）
• •例外: shadcn/uiコンポーネントはkebab-case（例: button.tsx）

コンポーネントディレクトリ構造

ComponentName/
├── index.tsx           # コンポーネント本体
└── variants.ts        # cvaバリアント定義（必要に応じて）

基本的な型定義

interface ButtonProps {
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "danger";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  onClick?: () => void;
}

チェックリスト

新しいコンポーネントを作成する際の確認事項：

• • 適切なディレクトリに配置されている
• • TypeScript の型定義が完全
• • Tailwind CSS でスタイリングされている
• • プロパティのデフォルト値が設定されている
• • アクセシビリティが考慮されている
• • 単体テストが実装されている

関連Skill・ドキュメント

• •coding-standards - コーディング規約
• •docs/einja/steering/development/testing-strategy.md - テスト戦略
• •docs/einja/steering/development/frontend-development.md - フロントエンド開発ガイド

参考資料

• •React 公式ドキュメント
• •TypeScript 公式ドキュメント
• •Tailwind CSS ドキュメント