mcpField
C
c4-code

c4-code

github.com/sickn33開発48.7k230 回インストール今日更新
リポジトリ

c4-code について

ディレクトリ内の関数、クラス、依存関係を記録する C4 コードレベル文書のテンプレートスキルです。コードベースの分析と、プログラミング様式に合った図の選択を支援します。個別の内容は実際のコードから補う必要があります。

主な機能

  1. 01コードディレクトリ文書のテンプレート
  2. 02関数とメソッドのシグネチャ記録
  3. 03クラス、モジュール、依存関係の整理
  4. 04コード様式に応じた Mermaid 図の選択
  5. 05コード、コンポーネント、コンテナー、コンテキストの区別

活用シーン

  1. 01API ディレクトリのコードレベル文書を作成
  2. 02モジュールのデータフローや呼び出し関係を図示
  3. 03サービス層のクラスと依存関係を記録

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill c4-code

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

詳細

C4 コードレベル:[ディレクトリ名]

このスキルを使用する場合

  • C4 コードレベル:[ディレクトリ名]に関するタスクやワークフローに取り組む場合
  • C4 コードレベル:[ディレクトリ名]についてのガイダンス、ベストプラクティス、チェックリストが必要な場合

このスキルを使用しない場合

  • タスクが C4 コードレベル:[ディレクトリ名]に関係しない場合
  • この範囲外の別のドメインやツールが必要な場合

手順

  • 目標、制約、必要な入力を明確にします。
  • 関連するベストプラクティスを適用し、結果を検証します。
  • 実行可能な手順と検証方法を提示します。

概要

  • 名前:[このコードディレクトリを表す名前]
  • 説明:[このコードの簡単な説明]
  • 場所:[実際のディレクトリパスへのリンク]
  • 言語:[主なプログラミング言語]
  • 目的:[このコードが実現すること]

コード要素

関数/メソッド
  • functionName(param1: Type, param2: Type): ReturnType
    • 説明:[この関数が行うこと]
    • 場所:[ファイルパス:行番号]
    • 依存関係:[この関数が依存するもの]
クラス/モジュール
  • ClassName
    • 説明:[このクラスが行うこと]
    • 場所:[ファイルパス]
    • メソッド:[メソッドの一覧]
    • 依存関係:[このクラスが依存するもの]

依存関係

内部依存関係
  • [内部コードの依存関係を一覧表示]
外部依存関係
  • [外部ライブラリ、フレームワーク、サービスを一覧表示]

関係

複雑なコード構造には、Mermaid 図を使用できます。プログラミングパラダイムに応じて図の種類を選択してください。コード図は、単一のコンポーネントの内部構造を示します。

オブジェクト指向コード(クラス、インターフェース)

クラス、インターフェース、継承を含む OOP コードには、classDiagram を使用します。

---
title: Code Diagram for [Component Name]
---
classDiagram
    namespace ComponentName {
        class Class1 {
            +attribute1 Type
            +method1() ReturnType
        }
        class Class2 {
            -privateAttr Type
            +publicMethod() void
        }
        class Interface1 {
            <<interface>>
            +requiredMethod() ReturnType
        }
    }

    Class1 ..|> Interface1 : implements
    Class1 --> Class2 : uses
関数型/手続き型コード(モジュール、関数)

関数型または手続き型コードでは、次の 2 つの方法があります。

方法 A:モジュール構造図 - classDiagram を使用して、モジュールとエクスポートされた関数を示します。

---
title: Module Structure for [Component Name]
---
classDiagram
    namespace DataProcessing {
        class validators {
            <<module>>
            +validateInput(data) Result~Data, Error~
            +validateSchema(schema, data) bool
            +sanitize(input) string
        }
        class transformers {
            <<module>>
            +parseJSON(raw) Record
            +normalize(data) NormalizedData
            +aggregate(items) Summary
        }
        class io {
            <<module>>
            +readFile(path) string
            +writeFile(path, content) void
        }
    }

    transformers --> validators : uses
    transformers --> io : reads from

方法 B:データフロー図 - flowchart を使用して、関数のパイプラインとデータ変換を示します。

---
title: Data Pipeline for [Component Name]
---
flowchart LR
    subgraph Input
        A[readFile]
    end
    subgraph Transform
        B[parseJSON]
        C[validateInput]
        D[normalize]
        E[aggregate]
    end
    subgraph Output
        F[writeFile]
    end

    A -->|raw string| B
    B -->|parsed data| C
    C -->|valid data| D
    D -->|normalized| E
    E -->|summary| F

方法 C:関数依存関係グラフ - flowchart を使用して、関数間の呼び出し関係を示します。

---
title: Function Dependencies for [Component Name]
---
flowchart TB
    subgraph Public API
        processData[processData]
        exportReport[exportReport]
    end
    subgraph Internal Functions
        validate[validate]
        transform[transform]
        format[format]
        cache[memoize]
    end
    subgraph Pure Utilities
        compose[compose]
        pipe[pipe]
        curry[curry]
    end

    processData --> validate
    processData --> transform
    processData --> cache
    transform --> compose
    transform --> pipe
    exportReport --> format
    exportReport --> processData
適切な図の選び方
コードスタイル主な図使用する場面
OOP(クラス、インターフェース)classDiagram継承、コンポジション、インターフェースの実装を示す
FP(純粋関数、パイプライン)flowchartデータ変換と関数合成を示す
FP(エクスポートを含むモジュール)<<module>> を含む classDiagramモジュール構造と依存関係を示す
手続き型(構造体+関数)classDiagramデータ構造と関連する関数を示す
混在組み合わせ必要に応じて複数の図を使用する

注:C4 modelによると、コード図は通常、複雑なコンポーネントで必要な場合にのみ作成されます。ほとんどのチームでは、システムコンテキスト図とコンテナ図で十分です。パラダイムにかかわらず、コード構造を最もよく伝えられる図の種類を選んでください。

備考

[その他のコンテキストや重要な情報]

やり取りの例

オブジェクト指向のコードベース
  • 「src/api ディレクトリを分析し、C4 コードレベルのドキュメントを作成してください」
  • 「サービスレイヤーのコードについて、クラス階層と依存関係をすべて含むドキュメントを作成してください」
  • 「リポジトリレイヤーのインターフェース実装を示す C4 コードドキュメントを作成してください」
関数型/手続き型のコードベース
  • 「認証モジュール内のすべての関数について、シグネチャとデータフローを文書化する」
  • 「src/pipeline 内の ETL 変換処理のデータパイプライン図を作成する」
  • 「utils ディレクトリを分析し、すべての純粋関数とその合成パターンを文書化する」
  • 「src/handlers 内の Rust モジュールを文書化し、関数の依存関係を示す」
  • 「Elixir GenServer モジュールの C4 コードドキュメントを作成する」
混合パラダイム
  • 「Go の handlers パッケージを文書化し、構造体とそれに関連する関数を示す」
  • 「クラスと関数型ユーティリティが混在する TypeScript コードベースを分析する」

主な違い

  • C4-Component エージェントとの違い:個々のコード要素に焦点を当てます。Component エージェントは、複数のコードファイルをコンポーネントにまとめます。
  • C4-Container エージェントとの違い:コード構造を文書化します。Container エージェントは、コンポーネントをデプロイ単位に対応付けます。
  • C4-Context エージェントとの違い:コードレベルの詳細を提供します。Context エージェントは、システムの高レベルな図を作成します。

出力例

コードを分析する際は、以下を提示します。

  • すべてのパラメーターと戻り値の型を含む、完全な関数/メソッドのシグネチャ
  • 各コード要素が何をするのかを明確に説明した内容
  • 実際のソースコードの該当箇所へのリンク
  • 完全な依存関係の一覧(内部および外部)
  • C4 コードレベルのテンプレートに沿った構造化ドキュメント
  • 必要に応じた、複雑なコードの関係を示す Mermaid 図
  • すべてのコードドキュメントで一貫した命名と書式

## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

コメント