mcpField
T
twig-components

twig-components

github.com/dev-toolings開発22775 回インストール3 週間前に更新
リポジトリ

twig-components について

再利用可能な Twig コンポーネントを構築する Symfony 向けスキルです。匿名型、クラス型、リアクティブな Live Components に加え、プロパティ、スロット、状態、テストを扱います。

主な機能

  1. 01匿名型とクラス型コンポーネント
  2. 02プロパティとスロットのパターン
  3. 03コンポーネントの計算ロジック
  4. 04リアクティブな Live Components
  5. 05コンポーネントクラスのテスト

活用シーン

  1. 01繰り返し使う Twig マークアップの抽出
  2. 02プロパティとスロットを持つコンポーネントの構築
  3. 03リアクティブな検索、カウンター、フォームの追加
  4. 04コンポーネントのマウントと描画のテスト

インストール

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

$npx skills add https://github.com/dev-toolings/superpowers-symfony --skill twig-components

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

同梱ファイルreference.md

詳細

Twig コンポーネント（Symfony）

使用する場面

  • 繰り返し使う Twig の一部を、再利用可能なコンポーネントに切り出す場合。
  • props、スロット、計算ロジック、または CVA バリアントを備えたコンポーネントを構築する場合。
  • Live Components でコンポーネントにリアクティブな動作（検索、カウンター、フォーム）を追加する場合。

デフォルトのワークフロー

  1. 種類を選びます。匿名（テンプレートのみ）、クラスベースの #[AsTwigComponent]、または #[AsLiveComponent] です。
  2. props は変更可能な public プロパティとして宣言し、派生値には mount() を使用します。
  3. props を増やすのではなく、ブロック（スロット）を通じてコンテンツを挿入できるようにします。
  4. Live Components では、書き込み可能な状態に #[LiveProp(writable: true)] を指定し、ユーザー入力にデバウンスを設定します。
  5. InteractsWithTwigComponents を使用して PHP クラスをテストします。

ガードレール

  • public props はインスタンス生成後に割り当てられるため、readonly にしないでください。
  • サービスは private readonly として注入し、public props として注入しないでください。
  • ブラウザーから変更する必要がある場合に限り、LiveProp を書き込み可能にします。
  • コンポーネントごとに責務を 1 つに保ちます。

段階的な情報開示

  • 実行時の基本方針とリスク管理には、このファイルを使用します。
  • 実装の詳細を深く確認する必要がある場合は、リファレンスを開きます。

出力の要件

  • props とスロットを備えたコンポーネントクラスおよびテンプレート。
  • コンポーネントがリアクティブな場合は、ライブ状態とアクション。
  • mount とレンダリングを対象としたコンポーネントテスト。

リファレンス

  • reference.md

コメント

Markdown 対応