fusion-app-react-dev

非推奨 — このスキルの名前は fusion-developer-app に変更されました。 代替スキルをインストールしてください：npx -y skills add equinor/fusion-skills --skill fusion-developer-app このスキルは今後のリリースで削除されます。

Fusion アプリ開発

使用するタイミング

Fusion Framework の React アプリケーション向けに機能、コンポーネント、フック、サービス、型を開発するときに、このスキルを使用します。

よくあるきっかけ：

• 「〜用のコンポーネントを追加して」
• 「〜するフックを作成して」
• 「API を接続して」
• 「〜のページを作成して」
• 「〜を取得するサービスを追加して」
• 「Fusion モジュールを設定して」
• 「このアプリではどの Fusion Framework フックを使えばよいですか？」
• 「このアプリの統合には、どのパッケージまたはモジュールが適切ですか？」
• 「このアプリの変更を実装する前に、適切な Fusion Framework の例を見つけて」
• 「この設定をアプリ設定として保持して」
• 「このビューにブックマーク機能を追加して」
• 「ランタイム設定または環境変数を読み取って」
• 「このページにアナリティクスを設定して」
• 「このアプリに機能フラグを追加して」
• 「Fusion アプリで useFeature フックを使用する方法を教えて」
• 「〜の機能を実装して」

暗黙的なきっかけ：

• ユーザーが src/ 内に何かを実装するよう依頼している
• ユーザーが Fusion Framework モジュール、EDS コンポーネント、Fusion React コンポーネント（@equinor/fusion-react-*）、または styled-components のパターンに言及している
• ユーザーがアプリ設定、ブックマーク、アナリティクス、または app.config.ts に言及している
• ユーザーが新しいルート、ページ、またはデータ取得レイヤーの追加を希望している

使用しないタイミング

次の用途には、このスキルを使用しないでください。

• Issue の作成またはトリアージ（fusion-issue-authoring を使用）
• スキルの作成（fusion-skill-authoring を使用）
• バックエンド／サービスの変更（別のリポジトリ）
• CI/CD パイプラインまたはデプロイ設定
• アーキテクチャ文書の作成（ADR テンプレートを使用）

依頼の主な内容がアプリ実装ではなく、Fusion Framework パッケージの所有関係、フックの動作、またはサンプルの検索である場合は、まず関連スキルの fusion-research を使用し、その後ここに戻ってコードを変更してください。

必須の入力情報

必須

• 作成するもの：機能、コンポーネント、フック、またはサービスの明確な説明
• 適用先：対象のレイヤー（コンポーネント、フック、サービス、型）と、親／兄弟コンテキスト

ユーザーの依頼が曖昧な場合、または重要な詳細が不足している場合は、実装前に assets/follow-up-questions.md を参照し、対象分野に合わせた確認質問をしてください。

条件付き

• 機能にデータ取得が含まれる場合の API エンドポイントの詳細
• ビジュアルコンポーネントを作成する場合のデザイン／レイアウトの詳細
• モジュール設定を拡張する場合の Fusion モジュール名
• 状態をユーザーごとに保持するか、ブックマークで共有可能にするか、ランタイムのみとするか

手順

ステップ 1 — プロジェクトの規約を把握する

コードを書く前に、対象のリポジトリを調べ、固有の設定を確認してください。

1. package.json を読み、パッケージマネージャー（bun/pnpm/npm）、利用可能なスクリプト、インストール済みの依存関係を確認します。
2. tsconfig.json を読み、TypeScript の設定とパスエイリアスを確認します。
3. src/ を調べ、現在のディレクトリ構成とレイヤー構造を把握します。
4. ADR（docs/adr/）またはプロジェクト固有のコード規約を記載した contribute/ ディレクトリがないか確認します。
5. フォーマッター／リンターの設定（biome.json、.eslintrc、Prettier の設定）を確認します。
6. app.config.ts と app.manifest.ts を読み、既存のエンドポイントと環境設定を把握します。
7. 実装に、挙動が不明確な Fusion Framework の機能、正確なパッケージの所有関係、またはクックブックの例が関係する場合は、コードを書く前にその調査を fusion-research に委任します。

以降の手順は、ここで確認した規約に合わせてください。references/ のパターンはデフォルトです。プロジェクト固有のルールと異なる場合は、プロジェクト固有のルールを優先してください。

Step 2 — 実装を計画する

新しいアプリをゼロから構築する場合は、進捗トラッカーとして assets/new-app-checklist.md を使用してください。

1. 作業を個別のファイル／変更に分割します。
2. 各項目を適切なディレクトリに割り当てます。一般的な Fusion アプリでは、次のようにします。
   • src/components/ — React コンポーネント（プレゼンテーション層）
   • src/hooks/ — カスタム React フック（状態と副作用のロジック）
   • src/api/ — API クライアント、データ変換、ビジネスロジック
   • src/types/ — TypeScript インターフェース、型エイリアス、列挙型
   • src/routes.ts — ルート定義（Fusion Router を使用する場合）
   • src/config.ts — Fusion モジュールの設定
   • src/App.tsx — ルートコンポーネント、レイアウトシェル
3. 共有型を早めに特定し、参照する前に定義します。
4. プロジェクトでルーティングを使用する場合は、DSL とページのパターンについて references/using-router.md に従ってください。
5. プロジェクトで別の構成を採用している場合は、その構成に従ってください。

Step 3 — コーディング規約に従って実装する

プロジェクトのコード規約（Step 1 で確認したもの）に従ってください。命名、TSDoc、インラインコメント、型のパターン、コードスタイル、エラー処理など、すべての規約については fusion-code-conventions スキルを参照してください。

実装中に規約について疑問が生じた場合は、fusion-code-conventions を直接呼び出してください。適切な言語エージェントに処理を振り分け、正式なルールを例とともに返します。

Step 4 — styled-components、EDS、Fusion React コンポーネントでスタイルを設定する

references/styled-components.md、references/styling-with-eds.md、references/using-fusion-react-components.md に従ってください。

• カスタムスタイリングには styled-components を使用します。これは Fusion エコシステムの規約です。
• プロジェクトで明示的に使用されている場合を除き、CSS Modules、グローバル CSS ファイル、Tailwind、または代替の CSS-in-JS は導入しないでください。
• 同じ場所に配置するスタイル付きコンポーネントには、Styled オブジェクトパターンを使用します。
• 標準的な UI 要素のベースには、@equinor/eds-core-react の EDS コンポーネントを優先して使用します。
• 色、間隔、タイポグラフィには、EDS デザイントークン（CSS カスタムプロパティまたは @equinor/eds-tokens）を使用します。
• カスタマイズが必要な場合は、styled() で EDS コンポーネントを拡張します。
• EDS では対応できないドメイン固有のニーズ（人物の表示／選択、Fusion サイドシート、進捗インジケーターなど）には、Fusion React コンポーネント（@equinor/fusion-react-*）を使用します。
• インラインの style プロパティは、その場限りの調整にのみ使用できます。

Step 5 — データ取得を組み込む（該当する場合）

データ取得とローカル開発時のモックのパターンについては、references/configure-services.md、references/using-react-query.md、references/configure-mocking.md に従ってください。

• config.ts の configureHttpClient、または app.config.ts のエンドポイントを介して HTTP クライアントを登録します。
• @equinor/fusion-framework-react-app/http の useHttpClient(name) を使用して、コンポーネントからクライアントにアクセスします。
• framework.modules.* を直接使用するより、常に @equinor/fusion-framework-react-app/* のフック（useHttpClient、useCurrentContext など）を優先してください。framework.modules.* は、ルートローダーなど、React 以外のコンテキストでのみ使用します。
• プロジェクトで React Query（@tanstack/react-query）を使用している場合は、useQuery をラップする薄いカスタムフックを作成します。
• API パスとパラメーターに基づくクエリーキーを使用します。
• クライアント UI の状態は、サーバー状態管理ライブラリではなく、React の state/context で管理します。

ステップ 6 — Fusion モジュールを設定する（該当する場合）

ユーザーが必要とするモジュールを特定し、該当するリファレンスだけを読みます。

必要なもの	リファレンス
HTTP クライアント／API 連携	references/configure-services.md
コンテキストモジュール	references/using-context.md
ルーターとページ	references/using-router.md
AG Grid	references/using-ag-grid.md
EDS + Fusion React コンポーネント	references/using-fusion-react-components.md
設定	references/using-settings.md
ブックマーク	references/using-bookmarks.md
アナリティクス	references/using-analytics.md
ランタイム設定／環境	references/using-assets-and-environment.md
機能フラグ	references/using-feature-flags.md
一般的なフレームワークモジュール	references/using-framework-modules.md

• AppModuleInitiator コールバックを使用して、config.ts にモジュールのセットアップを追加します。
• フック（useAppModule、useHttpClient、useCurrentContext）を使って、コンポーネントからモジュールにアクセスします。
• 新しい API 連携を追加する場合は、app.config.ts に HTTP クライアントのエンドポイントを登録します。
• アプリでルーティングを使用する場合は、config.ts で enableNavigation を有効にしてナビゲーションを利用可能にします。
• Fusion Router DSL（layout、index、route、prefix）を使ってルートを定義し、コード分割を自動化します。
• 適切なフレームワーク API が不明な場合は、実装パターンを選ぶ前に fusion-research を使い、ソースに裏付けられた回答を集めます。

ステップ 7 — 検証する

生成後の包括的なチェックリストとして、assets/review-checklist.md を使用します。

1. プロジェクトの型チェックコマンド（例：bun run typecheck または pnpm typecheck）を実行します。エラーはゼロである必要があります。
2. プロジェクトの lint／フォーマットチェックを実行します。違反はゼロである必要があります。
3. 新しくエクスポートされたシンボルすべてに TSDoc があることを確認します。
4. スタイリングがプロジェクトの規約に従っていることを確認します。
5. 正当な理由がある場合、または明示的に承認されている場合を除き、新しい依存関係が追加されていないことを確認します。

期待される出力

• プロジェクトのレイヤー構造に従った、src/ 内の新規または変更されたソースファイル。
• すべてのファイルが型チェックと lint に合格していること。
• エクスポートされた関数、コンポーネント、フック、型すべてに TSDoc があること。
• スタイリングがプロジェクトの規約（通常は styled-components + EDS + Fusion React コンポーネント）に従っていること。
• 作成または変更した内容とその理由を簡潔にまとめた説明。

ヘルパーエージェント

このスキルには、agents/ に任意で使用できるヘルパーエージェントが 3 つ含まれています。変更の実装後に重点的なレビューを行う場合や、実装中に特定のガイダンスを得る場合に使用します。ランタイムがスキルローカルエージェントに対応していない場合は、同じレビュー基準をインラインで適用してください。

このスキルには、ソースに裏付けられた Fusion エコシステムの調査に使える関連スキル fusion-research もあります。フレームワークの動作、EDS コンポーネント API、スキルカタログに関する不明点が実装作業の妨げになる場合に使用してください。

• agents/framework.md — Fusion Framework との連携（モジュール設定、HTTP クライアント、ブートストラップのライフサイクル、ランタイム設定、設定、ブックマーク、アナリティクス、フックの使用方法）をレビューします。API の検索には mcp_fusion_search_framework を優先し、プラットフォーム全般のガイダンスには mcp_fusion_search_docs を使用します。config.ts、app.config.ts、またはフレームワークモジュールにアクセスするコンポーネントを設定する際に参照してください。
• agents/styling.md — EDS コンポーネントの選択、styled-components のパターン、デザイントークンの使用方法、アクセシビリティをレビューします。コンポーネントのドキュメント、プロパティ、例の確認には mcp_fusion_search_eds を優先します。ビジュアルコンポーネントの作成や変更時に参照してください。
• agents/code-quality.md — 規約のチェック（命名、TSDoc、TypeScript の厳密性、意図を示すコメント）を fusion-code-conventions に委任し、Fusion アプリのコンテキストに沿って指摘をまとめます。最終化する前に、新規または変更されたファイルすべてに対して実行してください。

安全性と制約

• 新しい依存関係を追加しないでください。 ユーザーの明示的な承認が必要です。
• DOMを直接操作しないでください。 Reactのパターンを使用してください。
• any 型を使用しないでください。 FusionアプリではTypeScriptの厳格モードを標準とします。
• ソースファイルにシークレットや認証情報を含めないでください。
• すべての変更にConventional Commitsを使用してください（feat:、fix:、refactor:など）。
• 明示的に依頼されない限り、インフラストラクチャファイル（docker-compose、CI設定）は変更しないでください。