avonni-lwc-components

avonni-lwc-components

Avonni コンポーネントを LWC コンポーネントに追加または組み込む場合は、必ずこのスキルを使用してください。このスキルでは、周囲の LWC のスキャフォールディング方法ではなく、MCP を通じて Avonni コンポーネントを見つけ、設定し、検証する方法を定めています。

Toolset

このスキルは、Avonni MCP の lwc ツールセット専用です。該当する場合、すべての MCP ツール呼び出しに toolset: "lwc" を含めてください。このスキルは、Avonni Dynamic Components、Avonni Experience Sites コンポーネント、または Avonni Flow Screen Components には使用しないでください。

セッションで Avonni MCP ツールを利用できない場合は、そこで停止し、lwc ツールセットを使用して Avonni MCP サーバーを設定するようユーザーに依頼してください。MCP なしで作業を続けてはいけません。

Authority

• すべての Avonni コンポーネント API の唯一の信頼できる情報源は MCP です。
• コンポーネントに関する過去の知識や推測に頼ってはいけません。
• MCP のデータが過去の知識と矛盾する場合は、MCP のデータを優先してください。
• 必要な情報が不足している場合は、推測せず、ユーザーに尋ねてください。
• コンポーネント、属性、イベント、メソッド、スロット、オブジェクトキーを決して捏造してはいけません。 MCP で明示的に文書化されているもののみを使用してください。

Steps

1. リクエストを理解する — 必要な機能と、関連する可能性のある Avonni コンポーネントを特定します。
2. list_components を toolset: "lwc" で呼び出す — 利用可能なコンポーネントの最新リストを取得します。省略してはいけません。
3. コンポーネントを選択する — 以下の選定基準に基づき、リクエストを最もよく満たすコンポーネントを選びます。
4. 選択した各コンポーネントについて、get_component_docs を toolset: "lwc" で呼び出す — コンポーネントごとに1回呼び出し、ドキュメントを別のコンポーネントに使い回してはいけません。
5. 属性、イベント、戻り値で参照されているプリミティブでない型ごとに、get_type を呼び出す。
6. ネストされた型を再帰的に解決する — すべての型が完全に判明するまで get_type を繰り返します。
7. スタイル設定が必要な各コンポーネントについて、get_component_styles を toolset: "lwc" で呼び出す — ユーザーのリクエストに CSS または外観のカスタマイズが含まれる場合に限ります。
8. 検証する — コードを書く前に、以下のチェックリストを実施します。
9. コードを生成する — MCP で確認できた情報のみを使って HTML、JS、CSS を記述します。

これらの手順を省略したり、順序を入れ替えたりしてはいけません。

Component Selection

複数のコンポーネントを使用できる場合は、次の条件を満たすものを優先してください。

1. カスタムロジックが最も少なくて済む
2. 組み込みのデータ機能（クエリ／マッピング API）を活用できる
3. 追加コードが最も少なくて済む

可能な場合は、既存のコンポーネントインスタンスを再利用してください。

Attribute Rules

• 属性名は MCP と完全に一致させてください。
• JS では camelCase、HTML テンプレートでは kebab-case を使用してください。
• 必須属性は必ず含めてください。
• 値が文書化されたデフォルト値と等しい属性は省略してください。
• 解決済みの型スキーマで定義されているオブジェクトキーのみを使用してください。
• プリミティブでない属性を使用する場合は、その型定義を必ず取得してください。

Complex Types

• コンポーネントが複合型（DdListMapping や DdListAvatar などのプリミティブでない型）を参照している場合、その型を使用するコードを書く前に、正確な型名を指定して get_type を呼び出す必要があります。
• ネストされた型が複数ある場合は、コードで使用するすべての型が解決されるまで、参照されている各ネスト型について再帰的に get_type を呼び出してください。

Event Rules

• コンポーネントの MCP ドキュメントに記載されているイベントのみを使用してください。
• HTML のイベントハンドラー属性は小文字にしてください（例：onvaluechange）。
• ペイロードには event.detail 経由でのみアクセスしてください。
• イベントのスキーマに文書化されているプロパティのみを使用してください。

Data-Driven Components

• Salesforce データを自分でクエリしてはいけません。
• コンポーネントに組み込まれている query API と mapping API を使用してください。
• すべてのクエリで objectApiName は必須です。
• filter は、WHERE キーワードを含まない有効な SOQL WHERE 句でなければなりません。
• orderBy は、ORDER BY キーワードを含まない有効な SOQL ORDER BY 構文でなければなりません。
• 参照するすべてのフィールドが、クエリ対象のオブジェクトに存在していなければなりません。
• テンプレート式には、正確な構文 {{Record.FieldApiName}} を使用してください（大文字と小文字を区別し、任意のネストレベルで使用できます）。

スロットのルール

• スロットは、コンポーネントのドキュメントにある slots 配列に記載されています。
• 各スロットには name と description があります。
• "default" という名前のスロットは、LWC の名前なしデフォルトスロットです。子要素に slot 属性を追加しないでください。

  <avonni-alert-banner>
      <p>このコンテンツはデフォルトスロットに入ります。</p>
  </avonni-alert-banner>
  

• 名前付きスロット（"default" 以外の名前）では、子要素に一致する slot 属性が必要です。

  <avonni-some-component>
      <p slot="actions">ここにアクションのコンテンツを記述します。</p>
  </avonni-some-component>
  

• コンポーネントには複数のスロットを設定できます。それぞれ独立して使用します。
• 挿入するコンテンツがない場合は、スロットを追加しないでください。 生成するコードから空のスロットを完全に省略してください。
• コンポーネントのドキュメントに記載されていないスロット名は使用しないでください。
• コンポーネントのドキュメントに slots 配列がない（または空の）場合、そのコンポーネントはスロットコンテンツを受け付けません。スロットにコンテンツを投影する想定で子要素を追加しないでください。

スタイリングのルール

• Avonni コンポーネントをスタイリングするには、まずそのコンポーネントの get_component_styles を toolset: "lwc" で呼び出す必要があります。
• get_component_styles は、コンポーネントが公開するすべての CSS カスタムプロパティ（スタイリングフック）とデフォルト値を返します。
• get_component_styles が返した CSS 変数のみを使用してください。変数名を独自に作成しないでください。
• 標準の CSS カスタムプロパティ構文を使い、コンポーネントの CSS ファイルでスタイリングフックを適用してください。

avonni-some-component {
    --avonni-some-component-color-background: #f0f0f0;
}

• コンポーネントごとに get_component_styles を一度呼び出してください。結果をキャッシュし、同じコンポーネントに対して再度呼び出さないでください。
• get_component_styles が空のリストを返した場合、そのコンポーネントには公開されているスタイリングフックがありません。その旨をユーザーに伝えてください。

ユーティリティ関数

Avonni LWC パッケージが公開するユーティリティ関数は、removePageHeader です。

• 使用する前に、name: "removePageHeader" を指定して get_util_docs を呼び出してください。関数のシグネチャについて、以前の知識に頼らないでください。
• Salesforce のページヘッダーを非表示にする必要がユーザーから明示的に求められた場合にのみ使用してください。
• LWC の JS ファイルで、ライフサイクルフック（例：connectedCallback）から呼び出してください。

検証チェックリスト

最終コードを作成する前に、以下のすべてを確認してください。

• すべてのコンポーネントが MCP リストに存在する
• すべての属性名がコンポーネントのドキュメントに存在する
• すべてのイベント名がコンポーネントのドキュメントに存在する
• すべてのメソッド名がコンポーネントのドキュメントに存在する
• 使用前に、プリミティブ型以外の型ごとに get_type が呼び出されている
• すべてのオブジェクトキーが、解決された型スキーマに存在する
• 必須属性がすべて指定されている
• ドキュメントに記載されていない API が使用されていない
• 使用するすべてのスロット名が、コンポーネントの slots 配列に存在する
• 空のスロットがレンダリングされていない
• スタイリングで使用するすべての CSS 変数が get_component_styles によって返されている

失敗があれば、コードを出力する前に修正してください。

エラー処理

状況	対応
ツール呼び出しに失敗した場合	1 回だけ再試行する
ツール呼び出しが再度失敗した場合	停止する。このスキルは Avonni MCP サーバーなしでは実行できません
あるコンポーネントのドキュメント取得に失敗した場合	成功したものについては続行し、失敗したものを報告する
コンポーネントがリストに見つからない場合	存在しないか、ドキュメント化されていない可能性があることをユーザーに伝える
実行時検証に失敗した場合	コンポーネントに問題があると判断する前に、MCP ドキュメントを再確認する

コードスタイル

• ワークスペースの LWC の書式設定とファイル構成の規約に従ってください。
• カスタムのラッパーロジックよりも、コンポーネント API と組み込み機能を優先してください。
• ドキュメントにある例は構造の参考として使い、値は実際の依頼に合わせて調整してください。