SrRusian/atomic-page-builder

Atomic Page Builder

既存のコンポーネントからページを構成します。このスキルは組み立てを行います。atomic-designは作成を行います。

ルール

やるべきこと	やってはいけないこと
デザインシステムからコンポーネントをインポートする	新しいアトム、分子、有機体を作成する
デザインソース（Figma、仕様書、モックアップ）からレイアウト値を取得する	グリッド、ギャップ、パディングを推測する
トークンを読み取るスコープ付きスタイルを使用する	値をハードコードする（#333、24px）
レスポンシブ動作を含め、デザインを正確に一致させる	値を丸めたり、「改善」を追加する
プロジェクトのコンポーネントライブラリのみを使用する	プロジェクトが使用していない外部UIライブラリを取り込む

atomic-designへのハンドオフ

以下の場合、atomic-designに切り替えます。

• 必要なアトム、分子、有機体が存在しない場合。
• 新しいトークンが必要な場合。
• デザインでトークンの値が変更され、最初に更新する必要がある場合。

ワークフロー

1. レイアウト仕様を取得する。 デザインソース（MCP経由のFigma、仕様書、スクリーンショット）が存在する場合は、そこからグリッド、ギャップ、パディング、マージン、ブレークポイントを抽出します。存在しない場合は、入力を求めるか、前提条件を明示します。ページ固有のオーバーライドをメモします。
2. インベントリを作成する。 プロジェクトが既に持つコンポーネント（アトム、分子、有機体、テンプレート）とそのプロパティをリストアップします。
3. ギャップ分析を行う。 ページの各領域を既存のコンポーネントにマッピングします。一致しないものをすべてリストアップします。
4. 構築するか、停止するか。
   • すべてが存在する場合：ページを構成し、仕様に1:1で一致させます。
   • 何かが不足している場合：停止し、ギャップを報告して、atomic-designに切り替えます。
5. 検証する。 モバイル、タブレット、デスクトップの幅でデザインと比較します。

ページパターン

/** ダッシュボードページ。レイアウト元：<デザインリンクまたはノードID> */
import { DashboardLayout } from '@/design-system/templates/DashboardLayout';
import { Card } from '@/design-system/molecules/Card';
import { DataTable } from '@/design-system/organisms/DataTable';
import styles from './Dashboard.module.css';

export const Dashboard = () => (
  <DashboardLayout>
    <div className={styles.statsGrid}>
      <Card title="収益">$12,450</Card>
    </div>
    <DataTable columns={columns} data={data} />
  </DashboardLayout>
);

.statsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}
@media (min-width: 768px) {
  .statsGrid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-6); }
}

インポートパスとスタイリング手法はプロジェクトに合わせて調整してください。

検証

実際のブラウザ（playwright-cli）で、375px、768px、1440pxの幅、ライトモードとダークモードでページをレンダリングし、コンソールを読み、デザインソースと比較します。また、見出しの順序、ランドマーク、キーボードフロー、ローディング状態、空の状態、エラー状態も確認します。

連携スキル

ニーズ	スキルまたはツール
不足しているコンポーネントまたはトークン	atomic-design（必須の連携スキル）
ページレベルの批評または磨き上げ	impeccable
アクセシビリティ監査	fixing-accessibility、design:accessibility-review
ページメタデータ、タイトル、Open Graph	fixing-metadata
エンジニアリングへの引き継ぎ	design:design-handoff

追加ルール

• テンプレートのスロット内で構成します。コンポーネントの内部にアクセスしたり、そのスタイルをオーバーライドしたりしないでください。
• ページ固有のスタイルはレイアウト（グリッド、ギャップ、配置）に限定します。視覚的なものはすべてコンポーネントまたはトークンに属します。
• コンポーネントをコピー＆ペーストして調整しないでください。atomic-designを通じてバリアントをリクエストします。
• ページをチェックする際は、実際の代表的なコンテンツ（長い名前、空のリスト、エラー）を渡します。
• ドキュメントのタイトルと、ページごとに1つのh1を設定します。
• ページファイルには構成とデータの配線のみを含めます。再利用可能なUIロジックは含めません。

参考資料

ファイル	参照タイミング
references/design-source-extraction.md	レイアウト値の抽出とページ仕様の作成時
references/inventory-and-gaps.md	コンポーネントの棚卸しとギャップの発見時
references/composition-patterns.md	レイアウト、スロット、データ状態、インポート順に関して

出力チェックリスト

• レイアウト値はデザインソースから取得され、推測ではない
• レスポンシブ動作がデザインと一致している
• すべてのインポートがプロジェクトのデザインシステムから行われている
• ハードコードされた値がゼロである
• 新しいコンポーネントがゼロである
• デザインリンクがページファイルに文書化されている