HTML Generator Skill

Create distinctive, branded HTML pages and standalone components from a design system.

The Critical Understanding

HTML page creation is design-system-driven composition, not template filling. Each component is a standalone design artifact that works independently AND as part of a composed page. Every section should feel crafted by a senior designer — intentional, distinctive, unforgettable.

• What you receive: a design system (canvas-philosophy.md + design-system.md) with design tokens, component catalog, and brand identity.
• What you create: standalone HTML components + a composed single-file HTML page.
• The standard: work that makes the viewer stop scrolling. Bold, distinctive, never generic.

When Called

Invoked by /html-page and /html-page-quick. Receives: design system files (canvas-philosophy.md + design-system.md), brand philosophy (brand-philosophy.md or sub-identity overrides), component selections, any reusable components from components/, content, and style constraints from references/web-style-constraints.md.

Two Output Modes