Demo builder

What problem does it solves? This Skill provides standardized structure, CSS classes, and JavaScript conventions for building interactive HAP Learning Lab demos. It ensures demos are consistently accessible, performant, and adhere to the HAP design system, preventing fragmented or non-compliant user experiences.

Core Features & Use Cases

• Standardized Structure: Provides required HTML elements and section order for consistent demo pages.
• CSS Class Library: Offers pre-styled classes for containers, sections, and interactive elements, accelerating development.
• JavaScript Patterns: Includes ready-to-use patterns for copy-to-clipboard, screen reader announcements, and system preference detection.
• Use Case: When creating a new interactive color calculator, use this Skill to automatically generate the correct HTML structure, apply HAP's design system classes, and implement accessible JavaScript patterns, saving you hours of manual setup.

Quick Start

<!-- Example: Basic demo structure --> <main id="main-content"> <div class="demo-container"> <header><h1>HAP's [Demo Name]</h1></header> <section aria-label="Interactive controls"></section> <section class="output-section"></section> <aside class="tips-box"></aside> </div> </main>