Page hierarchy and sections

Page Hierarchy is the primary place to add page-level implementation context. Every Page node from Structure appears as a card with an ordered list of sections.

Add sections

For each page, use the section search field to:

• Search Skafold's section preset library.
• Browse Marketing, Commerce, Blog, Content, Media, Conversion, Layout, and App categories.
• Press Enter to add the best matching preset.
• Enter a custom section name when no preset fits.
• Use the plus button to add a blank section.

Search recognises synonyms such as carousel, PDP, rich text, checkout, or sidebar.

Section presets

A section preset can supply:

• A recognised section name
• Default purpose
• Default build guidance
• Suggested structure tags
• A visual thumbnail pattern

Preset values are editable after insertion. They are a practical baseline, not a fixed component specification.

Section name

The name communicates the section pattern and becomes the label exported to Page Layouts.md.

Prefer a recognised name such as:

• Hero
• Service Cards
• Article Grid
• Product Grid
• Contact Form
• FAQ
• Pricing Table
• Rich Text Content

Use a custom name when the section has genuinely project-specific behavior.

Section purpose

Purpose explains what the section should communicate or achieve.

Good purpose:

Compare the three service tiers and route visitors to the relevant enquiry path.

Weak purpose:

Three cards in a row.

Describe intent rather than final visual layout.

Build guidance

Build guidance records implementation-specific requirements that go beyond the section name.

Examples:

• Pull featured articles from the CMS and exclude the current post.
• Use a Nuxt UI carousel below tablet width.
• Validate server-side and verify Turnstile before submitting to HubSpot.
• Keep the filter state in the URL query.
• Use a reduced-motion fallback for autoplay media.

Put reusable technical decisions in Technical Architecture. Keep build guidance focused on this section.

Structure tags

Tags describe the content, controls, states, and structural ingredients the section needs.

Example Hero tags:

Headline, Subcopy, Primary CTA, Background Image, Mobile Crop

Tags help a developer or AI tool understand the expected component anatomy without prescribing exact markup. They also make repeated patterns easier to compare across pages.

Use concrete tags:

• Content: Headline, Description, Price, Author
• Media: Background Image, Gallery, Video Poster
• Controls: Search, Filter, Sort, Pagination
• Actions: Primary CTA, Add to Cart, Submit
• States: Empty State, Loading State, Validation Message
• Behavior: Sticky, Responsive Stack, Mobile Drawer

Avoid vague tags such as nice, modern, or interactive.

Reorder and remove sections

Drag the handle to change section order. Remove sections that do not belong on the page.

Section order is exported exactly as shown and should reflect the intended page narrative or task sequence.

Global sections

Choose the globe action to make a section global. Global sections are intended for repeated structures such as:

• Site Header
• Footer
• Announcement Bar
• Shared Newsletter CTA
• Reusable Contact CTA

A global section can be assigned to other pages from the section dropdown. Its purpose, build guidance, tags, and thumbnail are shared. Editing that global definition updates every reference.

Turning a global section back into a local section copies its current shared values into that page, then allows independent editing.

What gets exported

Page Layouts.md includes, in order:

1. Section name
2. Global marker where relevant
3. Purpose
4. Build guidance
5. Structure tags

The export also lists global section definitions so implementation tools can identify reusable components.

How sections inform the build

The page title and body define the page's broad role. Sections define its composition. Purpose explains why each part exists. Build guidance records implementation constraints. Tags define expected anatomy.

Together, these fields give a coding tool enough information to plan components and content boundaries without asking it to invent the page.