sgds-workflow

SGDS スキルワークフロー

このスキルでは、利用可能な SGDS スキルと、それらを使う順序を説明します。どのスキルが適切かわからない場合や、各スキルの関係を理解したい場合は、ここから始めてください。

---

新しいアプリを始めますか？それとも既存のアプリに取り組みますか？

---

新しいアプリ

以下のステージを順番に進めてください。各ステージでは、必要に応じて参照先のスキルを読んでください。

ステージ 1 — プロジェクトのセットアップ (必ず最初に実施)

→ sgds-getting-started を読みます

対象：Inter フォント、CSS のインポート順序（themes/day.css → css/sgds.css → css/utility.css）、コンポーネントの登録、2 種類のアプリレイアウトテンプレート（シンプルなアプリとサイドバー付きアプリ）。

コンポーネントやページのコードを書く前に、このスキルの 4 つのステップをすべて完了してください。

---

ステージ 2 — UI の構築 (必要に応じて並行して参照)

これらのスキルは、構築中に日常的に参照するものです。作業中は頻繁に行き来することになるので、その時点で構築している内容に関連するものを読んでください。

→ sgds-components — アコーディオンからツールチップまで、すべての <sgds-*> ウェブコンポーネントを網羅しています。プレーンな HTML で何かを作る前に、まずここを確認してください。必要な SGDS コンポーネントがある場合は、それを使用してください。

→ sgds-utilities — すべての sgds: Tailwind ユーティリティクラスを網羅しています：間隔、レイアウトグリッド、タイポグラフィ、色、境界線、不透明度。コンポーネント間やコンポーネントの周囲のレイアウト、間隔、スタイル設定に使用します。

→ Application Shell — 必須のページ外枠とレイアウトテンプレート（シンプルなアプリとサイドバー付きアプリ）を扱います。固定ヘッダー、サイドバーの列幅、コンテナクラスのリファレンスも含まれます。sgds-getting-started のステップ 4 だけでは詳細が足りない場合に読んでください。

→ sgds-theming (任意) — ブランドカラーの上書き、ナイトモード／ダークモード、フォントのカスタマイズを扱います。デフォルトの SGDS スタイルを超える視覚的なカスタマイズがアプリに必要な場合は、上記のスキルと併せて読んでください。デフォルトのスタイルで問題なければ、スキップしてください。

---

ステージ 3 — ページとブロックの組み立て (ページ全体やセクションを構築する場合)

→ sgds-blocks — ページのセクションやレイアウトに使える再利用可能な UI ブロックです。ヒーローセクション、CTA、機能ブロック、カードグリッド、統計表示、ページヘッダー、フィルター、フォーム、詳細カード、アプリケーションシェル、カスタムブロックが含まれます。ランディングページやダッシュボード、または「行動喚起が必要」といった特定のページセクションの作成をユーザーから依頼された場合や、ページレイアウトの作成を依頼された場合は、ここから始めてください。

→ sgds-patterns — 一貫したテキストスタイルのためのタイポグラフィとテキストパターンを扱います：見出し、ディスプレイテキスト、コンテンツヘッダー、リスト、段落。コンテンツのテキストをスタイリングするとき、テキストの階層を作成するとき、またはユーザーから「見栄えのよい見出しにして」「ページのテキストをスタイリングして」と依頼されたときに使用します。

→ sgds-templates — ダッシュボード、ログイン、フォームページ、リストページ、設定ページなど、すぐに使えるページ全体のレイアウトです。ページ全体の作成をユーザーから依頼された場合は、ここから始めてください。

→ sgds-forms — フォーム送信、制約検証、hasFeedback、setInvalid、FormData を扱います。SGDS コンポーネントを含む <form> が関係する場合に読んでください。

---

ステージ 4 — データの可視化 (チャートやダッシュボードが必要な場合)

→ sgds-data-visualisation を読みます

対象：ECharts のセットアップと、チャートへの SGDS カラーパレットの適用です。アプリにチャート、グラフ、データダッシュボードが含まれる場合にのみ必要です。

---

既存のアプリ

セットアップスキルを読み直す必要はありません。現在のタスクに該当するスキルに直接進んでください。

簡単な確認 — ユーティリティやコンポーネントが正しく動作しない場合は、何よりも先にセットアップが完了していることを確認してください：

• メイン CSS ファイルで themes/day.css → css/sgds.css → css/utility.css の順にインポートされている
• utility.css が Tailwind によって処理されている（プレーンな JS インポートとして読み込まれていない）
• JS エントリーポイントに import "@govtechsg/sgds-web-component" が存在する

セットアップが正しいことを確認できたら、以下の表を使って移動してください。

---

スキルマップ — タスクごとに読むスキル

必要な作業	読むスキル
SGDS プロジェクトをゼロから新規にセットアップする	sgds-getting-started
任意の <sgds-*> コンポーネントを使用する	sgds-components
余白、色、タイポグラフィ、レイアウトユーティリティを適用する	sgds-utilities
アプリシェル（マストヘッド、メインナビ、フッター、コンテナー）を構成する	Application Shell
ブランドカラーを変更する、ダークモードを有効にする、フォントを変更する	sgds-theming
ページセクション（ヒーロー、CTA、カード、フィーチャー、統計、フィルター、フォーム、カスタムブロック）を構築する	sgds-blocks
テキストをスタイリングする（見出し、ディスプレイテキスト、リスト、段落）	sgds-patterns
1 ページ全体（ダッシュボード、ログイン、リスト、フォーム、設定）を構築する	sgds-templates
フォーム検証を追加する、FormData を読み取る、setInvalid を使用する	sgds-forms
チャート、グラフ、データダッシュボードを追加する	sgds-data-visualisation

---

AI エージェント向け

1. ユーザーが「SGDS アプリを新しく作っています」や「どこから始めればよいですか」と言った場合は、必ず他のスキルを読む前に sgds-getting-started（ステージ 1）から始めてください。
2. ステージ 2 では、最初に 3 つのスキルをすべて読まないでください。コンポーネントが必要なときに sgds-components を、スタイリングやレイアウトが必要なときに sgds-utilities を読んでください。これらは参照資料であり、順番に読むものではありません。
3. sgds-theming はステージ 2 に含まれます。ブランディング、ダークモード、フォントのカスタマイズが必要な場合は、コンポーネントとユーティリティと並行して読んでください。独立した順次ステップとして扱わないでください。
4. sgds-blocks と sgds-patterns は、並行して使うステージ 3 のスキルです。ユーザーのリクエストに応じて必要なものを読んでください（ページセクションにはブロック、テキストのスタイリングにはパターン）。
5. sgds-templates と sgds-blocks は、単独でも併用でも使えます。ユーザーの進捗状況によって、一方、両方、またはどちらも必要でない場合があります。
6. sgds-forms が必要なのは、<form> 要素を使う場合に限ります。フォームを含まない UI では、先回りして読まないでください。
7. sgds-data-visualisation が必要なのは、チャートやグラフが明示的に求められた場合に限ります。
8. 既存のアプリの場合は、スキルマップの表を使って目的のスキルに直接進んでください。セットアップに問題がない限り、sgds-getting-started を再読しないでください。
9. ユーザーのリクエストがどのスキルにも明確に当てはまらない場合は、まずこのワークフロースキルを読んで方針を確認し、その後、適切なスキルに進んでください。
10. style 属性やインライン CSS は絶対に使用しないでください。 すべてのスタイリングは、sgds-utilities の sgds: ユーティリティクラスを class 属性で指定して適用してください。sgds:mt-4 があるのに style="margin-top: 16px" と記述するのは違反です。