skills.rest
cynthiateeters
cynthiateetersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Station content structure

Validate HAP Learning Lab station HTML structure and required section order.

Updated Oct 25, 2025
Search Tags:#template#html#accessibility#web development#educational content#learning design#content structure
One-click install
npx skills add https://github.com/cynthiateeters/hap-learning-lab-template --skill station-content-structure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Station content structure
Source: https://github.com/cynthiateeters/hap-learning-lab-template/tree/main/.claude/skills/station-content
Command: npx skills add https://github.com/cynthiateeters/hap-learning-lab-template --skill station-content-structure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures all HAP Learning Lab station pages follow a consistent, accessible, and engaging structure. It prevents structural inconsistencies and ensures every station provides a high-quality educational experience.

Core Features & Use Cases

  • Mandatory Sections: Enforces the presence and order of 6 required sections, from header to footer.
  • Component Validation: Checks for correct usage of HAP components like insight cards, HAP note callouts, and warning boxes.
  • Accessibility & SEO: Validates heading hierarchy, image attributes, and content length for optimal readability and search engine performance.
  • Use Case: When creating a new learning station, use this Skill to automatically validate that all required sections are present, headings are semantic, and HAP's components are used correctly, ensuring a high-quality educational experience.

Quick Start

<!-- Example: Top-level station structure --> <body> <a href="#main-content" class="skip-link">Skip to main content</a> <header class="header">[HAP avatar + title + intro]</header> <nav class="page-navigation top-nav">[Top navigation]</nav> <main id="main-content" class="content-container"> <section>[What You'll Learn]</section> <section>[Main topic 1]</section> <section>[Main topic 2]</section> </main> <nav class="page-navigation bottom-nav">[Bottom navigation]</nav> <footer class="footer">[Copyright]</footer> </body>

Frequently Asked Questions about Station content structure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate HTML structure for learning station pages?▼

Validate station HTML structure by verifying the presence and correct order of six required sections: Header, Top navigation, What You'll Learn (exactly 3 insight cards), Main content (2–4 topics), Bottom navigation, and Footer. This ensures consistency, accessibility, and component conformance across HAP Learning Labs pages.

What accessibility requirements apply to educational content structure?▼

Educational content structure must include skip links, proper heading hierarchy, image alt attributes, and HAP CSS components. These requirements ensure semantic HTML, screen reader compatibility, and optimal readability for all learners.

Can I use this for pre-commit checks on existing station pages?▼

Yes. Apply validation to new station creation, editing existing pages, pre-commit checks, and completeness reviews. The Skill automatically verifies section presence, order, component usage, and accessibility attributes before deployment.

What happens if a station doesn't have the required sections?▼

Validation fails and prevents deployment. The Skill identifies missing sections—Header, Top navigation, What You'll Learn cards, Main topics, Bottom navigation, or Footer—and flags structural inconsistencies to maintain quality standards across all stations.

Do insight cards and HAP components need specific formatting?▼

Yes. What You'll Learn requires exactly 3 insight cards; Main content requires 2–4 topic sections. All sections must use HAP CSS components (callouts, warning boxes, note blocks) correctly to pass validation and ensure consistent presentation.

How does heading hierarchy affect station validation?▼

Heading hierarchy validation ensures semantic HTML structure for accessibility and SEO performance. Proper hierarchy improves screen reader navigation, search engine indexing, and content readability across all station pages.

Related Skills

Explore More Education & Research Skills→
cynthiateeterscynthiateeters

station-content

Validate station HTML for six required sections in correct order.

Community
Intermediate
cynthiateeterscynthiateeters

Demo builder

Generate standardized HTML, CSS, and JavaScript patterns for HAP Learning Lab demos.

Community
Basic
cynthiateeterscynthiateeters

Accessibility validation (WCAG 2.2 Level AA)

Validates WCAG 22 Level AA accessibility compliance of HTML including contrast, ARIA, keyboard navigation, and image alt text before commits.

Community
Basic
SergeiGolosSergeiGolos
1

powershell-windows

Guide Windows PowerShell scripting with syntax, error handling, and JSON depth rules.

Community
Intermediate