// Analyze content sequences within a section and provide neutral descriptions for AEM Edge Delivery Services. Invoked per section during page import to identify breaking points between default content and blocks.
Review code for AEM Edge Delivery Services projects. Use at the end of development (before PR) for self-review, or to review pull requests. Validates code quality, performance, accessibility, and adherence to EDS best practices.
Analyze content sequences and determine authoring approach (default content vs blocks). Validates block selection and section styling for import/migration to AEM Edge Delivery Services.
Survey available blocks from local AEM Edge Delivery Services project and Block Collection to understand the block palette available for authoring. Returns block inventory with purposes to inform content modeling decisions.
Searches the aem.live documentation for information on AEM Edge Delivery Services features. Use this skill when you need more information about a feature, want guidance on how to implement a feature, and using existing tools you have to search the web isn't turning up relevant results.
Generate structured HTML from authoring analysis for AEM Edge Delivery Services. Creates section structure, applies block tables, handles metadata, and manages images folder.
Identify section boundaries and content sequences within a scraped webpage for AEM Edge Delivery Services import. Performs two-level analysis (sections, then sequences per section) and surveys available blocks.
| name | page-decomposition |
| description | Analyze content sequences within a section and provide neutral descriptions for AEM Edge Delivery Services. Invoked per section during page import to identify breaking points between default content and blocks. |
Analyze content sequences within a section and provide neutral descriptions without assigning block names.
This skill is called by identify-page-structure for EACH section to:
IMPORTANT: This skill analyzes ONE section at a time, not the whole page.
From the calling skill (identify-page-structure), you need:
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:
Breaking points between sequences:
Philosophy:
Context: identify-page-structure has already identified section boundaries (Step 2a). This skill is invoked FOR ONE SECTION to analyze its internal content sequences.
Look at the screenshot and HTML for THIS section only.
What to observe:
Ignore:
Output: Mental model of content flow within this section
Find where content shifts from one type/pattern to another.
Breaking point indicators:
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
Between each breaking point is a content sequence.
For each sequence, describe:
Use neutral language:
Output: Neutral descriptions for each sequence
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:
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
Input: "Section 1 (light background): Large prominent content at top of page"
Visual observation:
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"
}
]
}
Input: "Section 2 (light background): Grid of feature items"
Visual observation:
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"
}
]
}
Input: "Section 3 (grey background): Blog articles"
Visual observation:
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"
}
]
}
Input: "Section 4 (light background): Body content"
Visual observation:
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.
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)