Section Skeleton Skill
Purpose
Outputs Astro component skeleton with named slots. Structure only.
Input
section_type: hero | trust-strip | problem | solution | benefits | how-it-works | social-proof | faq | final-cta | footer | pricing | gallery
variant: default | compact | expanded
page_type: landing | service | service-area | article | calculator | thank-you
Output
skeleton: "<section>...</section>"
slots: [headline, body, cta-primary]
slot_semantics: { headline: h2_primary }
skeleton_verdict: PASS | WARN | FAIL
Page-Type Compatibility
| Section | Allowed | Forbidden | |---------|---------|-----------| | hero | landing, service, service-area | - | | problem | landing | service-area, article | | solution | landing | article, thank-you | | pricing | service, landing | article, thank-you | | gallery | service, landing | calculator | | calculator-widget | calculator, landing | article | | local-reviews | service-area | landing | | upsell | thank-you | landing, service |
Forbidden combination → STOP.
Section Order Constraints
| Section | Rule | |---------|------| | hero | must_be_first | | footer | must_be_last | | final-cta | before footer only | | trust-strip | after hero only |
Order violation → FAIL.
Slot Cardinality
| Slot | Min | Max | |------|-----|-----| | headline | 1 | 1 | | subheadline | 0 | 1 | | body | 0 | 1 | | cta-primary | 0 | 1 | | cta-secondary | 0 | 1 | | image | 0 | 1 | | items | 0 | ∞ | | cards | 0 | ∞ |
Max exceeded → FAIL. Required missing → FAIL.
Slot Semantic Roles
| Slot | SEO Role | |------|----------| | headline | h2_primary_keyword | | subheadline | semantic_support | | body | topical_depth | | items | long_tail (FAQ) |
Cross-reference: heading-tree skill uses this.
Variant Behaviour
default
All slots available.
compact
forbidden_slots: [subheadline, cta-secondary, image]
expanded
required_slots: [image, subheadline]
Variant violation → WARN.
Accessibility Requirements
| Slot | A11y Rule | |------|-----------| | image | alt required | | faq items | aria-expanded | | cta-* | aria-label if icon-only |
A11y missing → WARN.
Slot Naming Convention
| Slot | Content Type | |------|--------------| | headline | H2 element | | subheadline | Paragraph | | body | Multiple paragraphs | | cta-primary | Primary Button | | cta-secondary | Secondary Button | | cta-phone | Phone link | | image | Picture component | | items | Repeated list items | | cards | Repeated card components |
Skeleton Verdict
skeleton_verdict: PASS | WARN | FAIL
issues: []
| Condition | Verdict | |-----------|---------| | Forbidden page-type | FAIL | | Order violation | FAIL | | Required slot missing | FAIL | | Max cardinality exceeded | FAIL | | Variant slot violation | WARN | | A11y missing | WARN | | All rules pass | PASS |
FAIL States
| Condition | |-----------| | Section on forbidden page-type | | hero not first | | footer not last | | Required slot missing (headline) | | Slot count > max |
WARN States
| Condition | |-----------| | Compact variant with forbidden slot | | Image without alt | | Icon button without aria-label |
Non-goals
- Does NOT write content
- Does NOT style beyond structure
- Does NOT include interactivity
- Does NOT generate child components
References
- skeletons.md — Full Astro skeleton code
Definition of Done
- [ ] section_type valid for page_type
- [ ] Order constraints satisfied
- [ ] Required slots present
- [ ] Cardinality rules pass
- [ ] Variant rules pass
- [ ] A11y requirements met
- [ ] skeleton_verdict = PASS