page-decomposition

ページの分解

セクション内のコンテンツの流れを分析し、ブロック名を割り当てずに中立的な説明を行います。

このスキルを使用するタイミング

このスキルは、identify-page-structure によって各セクションで呼び出され、以下を行います。

• セクション内のコンテンツの流れを特定する
• 中立的な説明を行う（ブロック名はまだ付けません）
• 流れの切り替わり箇所を特定する
• 後続のオーサリングに関する判断を可能にする

重要： このスキルではページ全体ではなく、1つのセクションずつ分析します。

必要な入力

呼び出し元のスキル（identify-page-structure）から、以下が必要です。

• セクションの視覚的な説明と境界
• セクションを示すスクリーンショット
• セクションの整形済み HTML コンテンツ

関連スキル

• page-import - トップレベルのオーケストレーター
• identify-page-structure - 各セクションでこのスキルを呼び出します（ステップ 2b）
• block-inventory - 分解後に利用可能なブロックを提示します
• content-modeling - 分解後にオーサリングに関する判断を行います
• content-driven-development - html-structure.md でセクション構造を参照します

主要な概念

コンテンツ階層：

DOCUMENT
├── SECTION (top-level, analyzed by identify-page-structure Step 2a)
│   ├── Content Sequence 1 ← THIS SKILL IDENTIFIES THESE
│   ├── Content Sequence 2 ← THIS SKILL IDENTIFIES THESE
│   └── ...
└── SECTION
    └── Content Sequence 1

「コンテンツの流れ」とは？ 最終的に以下のいずれかになる、関連するコンテンツの垂直方向の流れです。

• デフォルトコンテンツ（見出し、段落、リスト、インライン画像）、または
• ブロック（構造化された、反復する、またはインタラクティブなコンポーネント）

流れの切り替わり箇所：

• コンテンツの種類における視覚的／意味的な変化
• 散文から構造化されたパターンへの変化
• あるパターンから別のパターンへの変化

基本方針：

• 何であるべきかではなく、何が見えるかを説明します
• 「横並びの2枚の画像」であり、「Columns ブロック」ではありません
• 「アイコン付きの8項目のグリッド」であり、「Cards ブロック」ではありません
• 中立性を保ちます。オーサリングに関する判断は後で行います

分解ワークフロー

コンテキスト： identify-page-structure はすでにセクションの境界を特定しています（ステップ 2a）。このスキルは、1つのセクションの内部にあるコンテンツの流れを分析するために呼び出されます。

---

ステップ 1：セクションを確認する

このセクションのみを対象に、スクリーンショットと HTML を確認します。

確認すること：

• 上から下へのコンテンツの流れ
• コンテンツの種類やパターンが切り替わる箇所
• 視覚的なまとまりや区切り

対象外：

• 他のセクション（対象外です）
• セクションのスタイル（page-import ですでに特定済みです）
• ブロック名（中立性を保ちます）

出力： このセクション内のコンテンツの流れを把握したモデル

---

ステップ 2：切り替わり箇所を特定する

コンテンツの種類やパターンが切り替わる箇所を見つけます。

切り替わり箇所の指標：

• 散文から構造化されたグリッドへの変化
• 見出し／段落から横並びの画像への変化
• ある反復パターンから別の反復パターンへの変化
• 構造化されたコンテンツから散文への変化

セクション内の例：

Content flows top to bottom:
- Large heading
- Paragraph
- Two buttons
[BREAK] ← Visual/semantic shift
- Two images displayed side-by-side

出力： 切り替わり箇所の一覧

---

ステップ 3：コンテンツの流れを定義する

各切り替わり箇所の間が、1つのコンテンツの流れとなります。

各流れについて、以下を説明します。

• 含まれる要素（見出し、段落、画像など）
• 要素の配置（縦並び、横並び、グリッド）
• 数量（見出し1つ、画像2枚、8項目のグリッド）

中立的な表現を使用します。

• ✅「横並びに表示された2枚の画像」
• ❌「2枚の画像を含む Columns ブロック」
• ✅「それぞれにアイコンと短いテキストがある8項目のグリッド」
• ❌「Cards ブロック」
• ✅「中央揃えの大きな見出し、段落、縦に並んだ2つのボタン」
• ❌「Hero ブロック」

出力： 各流れの中立的な説明

---

ステップ 4：構造化された出力を返す

このセクションのコンテンツの流れを、構造化された形式で提示します。

出力形式：

{
  sectionNumber: 1,  // From identify-page-structure
  sequences: [
    {
      sequenceNumber: 1,
      description: "Large centered heading, paragraph, two buttons stacked vertically"
    },
    {
      sequenceNumber: 2,
      description: "Two images displayed side-by-side"
    }
  ]
}

これにより可能になること：

• セクションの内部構造を明確に把握する
• オーサリングに関する判断の中立的な基盤を用意する
• 説明と実装を分離する

---

セクションのメタデータ形式

表形式：

+------------------------------+
| Section Metadata             |
+------------------+-----------+
| style            | light     |
+------------------+-----------+

配置： 各セクションの先頭、コンテンツの前

用途： 最終 HTML の生成時に generate-import-html スキルが適用します

---

例

例 1：ヒーローセクション

入力：「セクション 1（明るい背景）：ページ上部に大きく目立つコンテンツ」

視覚的な観察：

• 中央に大きな見出し
• その下に段落テキスト
• 2 つの行動喚起ボタン [BREAK - visual shift]
• 2 枚の大きな画像が横並びで表示されている

出力：

{
  sectionNumber: 1,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Large centered heading, paragraph, two call-to-action buttons stacked vertically"
    },
    {
      sequenceNumber: 2,
      description: "Two large images displayed side-by-side"
    }
  ]
}

---

例 2：機能セクション

入力：「セクション 2（明るい背景）：機能項目のグリッド」

視覚的な観察：

• 中央に見出し [BREAK - shift to structured pattern]
• 8 個の項目のグリッド
• 各項目の内容：小さなアイコン、短い説明文 [BREAK - shift back to simple elements]
• 中央揃えのボタン 2 つ

出力：

{
  sectionNumber: 2,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Single centered heading"
    },
    {
      sequenceNumber: 2,
      description: "Grid of 8 items, each with small icon and short text description"
    },
    {
      sequenceNumber: 3,
      description: "Two centered buttons"
    }
  ]
}

---

例 3：記事カードセクション

入力：「セクション 3（グレーの背景）：ブログ記事」

視覚的な観察：

• アイブロウテキスト「最新記事」
• 大きな見出し
• 段落による説明
• 閲覧ボタン [BREAK - shift to repeating pattern]
• 4 個の項目をグリッド表示
• 各項目の内容：画像、カテゴリタグ、見出し、短い説明文、続きを読むリンク

出力：

{
  sectionNumber: 3,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Eyebrow text, large heading, paragraph description, browse button - all stacked vertically"
    },
    {
      sequenceNumber: 2,
      description: "Grid of 4 items, each with image, category tag, heading, description, and read link"
    }
  ]
}

---

例 4：シンプルなコンテンツセクション

入力：「セクション 4（明るい背景）：本文コンテンツ」

視覚的な観察：

• 複数の段落テキスト
• テキスト内にいくつかのインライン画像
• 見出し（H2、H3）が途中に挿入されている
• 明確な区切りはなく、コンテンツが自然に続いている

出力：

{
  sectionNumber: 4,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Flowing prose content: multiple paragraphs with inline images and headings (H2, H3)"
    }
  ]
}

**注：**コンテンツが構造的な区切りなく自然に続いているため、このセクション全体を 1 つのシーケンスとして扱います。

---

よくある間違いとその回避方法

説明にブロック名を使う： ❌ 「見出しとボタンを含むヒーローブロック」 ✓ 「中央に大きな見出し、段落、縦に並んだボタン 2 つ」

区切りを特定しない： ❌ 明確な変化があるのに、セクション全体を 1 つのシーケンスとして説明する ✓ コンテンツの種類が変わる位置を特定し、シーケンスを分ける

細かく分けすぎる： ❌ 要素ごとに別のシーケンスにする：「見出し」「段落」「ボタン」 ✓ 関連する要素をまとめる：「見出し、段落、縦に並んだボタン 2 つ」

分析のレベルを混在させる： ❌ 複数のセクションを一度に分析する ✓ 一度に 1 つのセクションだけに集中する（呼び出しごと）

作成方法を決める： ❌ 「これはカードブロックにすべきです。なぜなら……」 ✓ 「画像とテキストを含む 4 項目のグリッド」（中立的な説明）