page-decomposition

SKILL.md

Page Decomposition

Analyze content sequences within a section and provide neutral descriptions without assigning block names.

When to Use This Skill

This skill is called by identify-page-structure for EACH section to:

Identify content sequences within that section

Provide neutral descriptions (NO block names yet)

Identify breaking points between sequences

Enable authoring-focused decisions later

IMPORTANT: This skill analyzes ONE section at a time, not the whole page.

Input Required
From the calling skill (identify-page-structure), you need:

Section visual description and boundaries

Screenshot showing the section

Cleaned HTML content for the section

Related Skills

page-import - Top-level orchestrator

identify-page-structure - Invokes this skill for each section (Step 2b)

block-inventory - Provides available blocks AFTER decomposition

content-modeling - Makes authoring decisions AFTER decomposition

content-driven-development - References section structure in html-structure.md

Key Concepts

Content Hierarchy:

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

What is a "content sequence"?
A vertical flow of related content that will eventually become:

Default content (headings, paragraphs, lists, inline images), OR

A block (structured, repeating, or interactive component)

Breaking points between sequences:

Visual/semantic shift in content type

Change from prose → structured pattern

Change from one pattern → different pattern

Philosophy:

Describe WHAT you see, not WHAT it should be

"Two images side-by-side" not "Columns block"

"Grid of 8 items with icons" not "Cards block"

Stay neutral - authoring decisions come later

Decomposition Workflow

Context: identify-page-structure has already identified section boundaries (Step 2a). This skill is invoked FOR ONE SECTION to analyze its internal content sequences.

Step 1: Examine the Section

Look at the screenshot and HTML for THIS section only.

What to observe:

Vertical flow of content from top to bottom

Where content changes type or pattern

Visual groupings or breaks

Ignore:

Other sections (out of scope)

Section styling (already identified by page-import)

Block names (stay neutral)

Output: Mental model of content flow within this section

Step 2: Identify Breaking Points

Find where content shifts from one type/pattern to another.

Breaking point indicators:

Prose text → Structured grid

Heading/paragraph → Side-by-side images

One repeating pattern → Different repeating pattern

Structured content → Prose text

Example within a section:

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

Output: List of breaking points

Step 3: Define Content Sequences

Between each breaking point is a content sequence.

For each sequence, describe:

What elements it contains (heading, paragraph, images, etc.)

How they're arranged (stacked, side-by-side, in a grid)

Quantity (one heading, two images, grid of 8 items)

Use neutral language:

✅ "Two images displayed side-by-side"

❌ "Columns block with two images"

✅ "Grid of 8 items, each with icon and short text"

❌ "Cards block"

✅ "Large centered heading, paragraph, two buttons stacked vertically"

❌ "Hero block"

Output: Neutral descriptions for each sequence

Step 4: Return Structured Output

Provide content sequences for this section in structured format.

Output format:

{
  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"
    }
  ]
}

This enables:

Clear understanding of section's internal structure

Neutral foundation for authoring decisions

Separation of description from implementation

Section Metadata Format

Table format:

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

Placement: At the start of each section, before content

Usage: Applied by generate-import-html skill when generating final HTML

Examples

Example 1: Hero Section

Input: "Section 1 (light background): Large prominent content at top of page"

Visual observation:

Large centered heading

Paragraph text below it

Two call-to-action buttons
[BREAK - visual shift]

Two large images displayed next to each other

Output:

{
  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"
    }
  ]
}

Example 2: Features Section

Input: "Section 2 (light background): Grid of feature items"

Visual observation:

Centered heading
[BREAK - shift to structured pattern]

Grid of 8 items

Each item has: small icon, short text description
[BREAK - shift back to simple elements]

Two centered buttons

Output:

{
  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"
    }
  ]
}

Example 3: Article Cards Section

Input: "Section 3 (grey background): Blog articles"

Visual observation:

Eyebrow text "Latest Articles"

Large heading

Paragraph description

Browse button
[BREAK - shift to repeating pattern]

4 items in grid

Each item: image, category tag, heading, short description, read link

Output:

{
  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"
    }
  ]
}

Example 4: Simple Content Section

Input: "Section 4 (light background): Body content"

Visual observation:

Multiple paragraphs of text

Some inline images within the text

Headings interspersed (H2, H3)

No clear breaking points - content flows naturally

Output:

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

Note: This entire section is one sequence because content flows naturally without structural breaks.

Common Mistakes to Avoid

Using block names in descriptions:
❌ "Hero block with heading and buttons"
✓ "Large centered heading, paragraph, two buttons stacked vertically"

Not identifying breaking points:
❌ Describing entire section as one sequence when there are clear shifts
✓ Identifying where content type changes and breaking into sequences

Being too granular:
❌ Each element as separate sequence: "Heading", "Paragraph", "Button"
✓ Related elements together: "Heading, paragraph, two buttons stacked vertically"

Mixing analysis levels:
❌ Analyzing multiple sections at once
✓ Focus on ONE section at a time (per invocation)

Making authoring decisions:
❌ "This should be a cards block because..."
✓ "Grid of 4 items with images and text" (neutral description)