mcpField
B
building-components

building-components

github.com/ilya-valasiuk開発078 回インストール11 週間前に更新
リポジトリ

building-components について

building-componentsは、プロジェクトの規約に沿ったReactコンポーネント作成を支援するスキルです。配置、ファイル構成、命名、エクスポート、Props、検証、Lint自動修正を扱います。

主な機能

  1. 01コンポーネントとフックの配置決定
  2. 02kebab-caseフォルダーとPascalCaseファイルの作成
  3. 03エクスポートとPropsの規約適用
  4. 04サブコンポーネントと補助ファイルの整理
  5. 05構成とコンポーネント規則の検証
  6. 06変更ファイルに限定したLint自動修正

活用シーン

  1. 01共有またはページ専用コンポーネントの追加
  2. 02既存コンポーネントのサブコンポーネント作成
  3. 03カスタムフックの配置先の決定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/ilya-valasiuk/agent-skills --skill building-components

インストール後、Claude Code で/building-componentsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
folder-structures.md
placement.md
REFERENCE.md

詳細

コンポーネントの作成

ワークフロー

このチェックリストをコピーして、進捗を記録してください。

Component Progress:
- [ ] Step 1: Determine placement
- [ ] Step 2: Create folder structure
- [ ] Step 3: Create component file
- [ ] Step 4: Add sub-components (if needed)
- [ ] Step 5: Validate against checklist
- [ ] Step 6: Run lint fix and re-check

ステップ 1：配置場所を決める

可能であればコンテキストから判断し、判断できない場合はユーザーに確認します。各タイプのパスと規則については、references/placement.md を参照してください。

  • 共有（共通）コンポーネント
  • ページ固有のコンポーネント
  • 既存コンポーネントのサブコンポーネント
  • ページコンポーネント

タスクでカスタムフックを追加または切り出す場合は、ファイルを作成する前に、そのフックの配置先を決めてください。

  • src/hooks/ は、共有されるフック、または複数のコンポーネント、ページ、ドメインで再利用することを意図して設計されたフックにのみ使用します。
  • フックがそのコンポーネントの内部動作にのみ使用される場合は、所有するコンポーネントと同じ場所に配置します。
  • 一度限りのコンポーネント内部処理を src/hooks/ に配置しないでください。

ステップ 2：フォルダー構成を作成する

適切な場所に kebab-case のフォルダーを作成します。各ケースの図については、references/folder-structures.md を参照してください。

ステップ 3：コンポーネントファイルを作成する

フォルダー内に PascalCase の .tsx ファイルを作成します。references/REFERENCE.md の規則に従ってください。

ステップ 4：サブコンポーネントを追加する（必要な場合）

コンポーネントにサブコンポーネントが必要な場合は、その中に components/ フォルダーを作成します。各サブコンポーネントにも同じ規則が適用されます。サブコンポーネントのパターンについては、references/placement.md を参照してください。

ステップ 5：チェックリストに沿って検証する

コンポーネントの完成と判断する前に、以下の検証チェックリストに沿って確認してください。

ステップ 6：lint の自動修正を実行し、再確認する

作成または変更したファイルのみを対象に、linter の自動修正を実行します。自動修正後もエラーが残る場合は、手動修正が必要であることをユーザーに伝えて作業を中止してください。eslint-disable、@ts-ignore、@ts-expect-error、その他の抑制ディレクティブを使ってエラーを抑制してはなりません。

検証チェックリスト

コンポーネントの作成後、すべての項目を確認してください。

命名
  • フォルダー名が kebab-case である（例：card-content）
  • ファイル名が PascalCase で、エクスポートするコンポーネント名と一致している（例：CardContent.tsx が CardContent をエクスポートする）
  • ファイルが独立したフォルダー内にある（親ディレクトリに直接置かれていない）
エクスポート
  • 名前付きエクスポートを使用している：export const ComponentName: React.FC<Props>
  • デフォルトエクスポートを使用していない
  • 1 ファイルにつき 1 コンポーネントである
Props
  • Props が interface ではなく type Props として定義されている
  • Props の順序が、必須 → オプション → 関数コールバックになっている
  • React.FC<Props> を使用している（props がない場合は React.FC）
構成
  • コンポーネントが適切なディレクトリ（共通またはページ固有）に配置されている
  • サブコンポーネントが親コンポーネントと同じ場所ではなく、components/ サブフォルダーに配置されている
  • カスタムフックを追加した場合、そのスコープに合った場所に配置されている（共有フックは src/hooks/、コンポーネント固有のフックは所有するコンポーネントの隣）
  • 本体が JSX のみの場合、暗黙の return を使用している
  • 条件付き JSX レンダリングで {condition ? <Element /> : null} を使用しており、condition && <Element /> を使用していない
ファイル
  • オプションのヘルパーファイル（types.ts、constants.ts、helpers.ts、index.ts）は、必要な場合にのみ作成されている
  • 新しいカスタムフックは、本当に共有されるものでない限り src/hooks/ に追加されていない
lint
  • 変更したコンポーネントファイルに対して lint を実行した
  • lint の自動修正を実行した
  • 変更したファイルに新たな lint エラーが残っていない

コメント

Markdown 対応