fusion-design

Fusion Design

使用するタイミング

Fusion エコシステムでフロントエンドコードを記述またはレビューする際に、見た目、動作、構成を把握する必要があるときに使用します。

必ず守る不変条件

これらは、タスクに関係なく、作成するすべてのファイルに適用されます。参照ファイルを読んでから守るのではなく、違反する「プレースホルダー」を決して出力しないでください。

• すべてのテキストに EDS <Typography> を使用します。 テキストに裸の <h1>～<h6>、<p>、<span> を決して使用しないでください。一時的なタイトルや仮の要素であっても同様です。ページタイトルには <Typography variant="h1">、本文には <Typography variant="body_short"> を使用します。references/eds-typography.md を参照してください。
• すべての間隔に EDS のスペーシング変数を使用します。 padding／margin／gap に px をハードコードしないでください。references/spacing.md を参照してください。

手順

このスキルは参照用です。コードを書く前に、すべての参照ファイルを読んでください。これらは任意のスタイル設定ではなく、必須要件を定めています。

1. 参照ファイルを読む

トピック	ファイル
EDS Typography	references/eds-typography.md
ナビゲーション — サイドメニュー	references/navigation-sidemenu.md
ナビゲーション — タブ	references/navigation-tabs.md
レイアウト — コンテンツ領域のパターン	references/layout.md
レイアウト — コンテンツの中央配置	references/layout-centered-content.md
スペーシング	references/spacing.md
アクション — アクションバー、破壊的アクション、ボタンの配置	references/actions.md
空の状態	references/empty-states.md
エラーメッセージ	references/error-messages.md
コンテキストヘルプ（ℹ／? アイコン、密度）	references/contextual-help.md

2. ローカルの DESIGN.md を確認する

アプリのルートに DESIGN.md がある場合は、最初に読んでください。これは、そのアプリのデザイン上の決定に関する正式な情報源であり、参照ルールに優先するか、ルールを補足します。

3. 適用する

ルールに沿うように UI を実装します。DESIGN.md が存在せず、タスクでレイアウトを決める必要がある場合は、その決定を DESIGN.md に記録してください。