What problem does it solve? Building web deliverables (HTML pages, landing pages, components, dashboards) that consistently follow brand design systems and accessibility constraints is error-prone. This Skill acts as a web artifact factory: it composes brand design tokens from a brand repository with media-specific rules, enforces mandatory HTML authoring checks (lang, viewport, landmarks, SVG labels, focus-visible, contrast), and optionally validates output with static or browser-based audits. ## Core Features & Use Cases - Media-aware generation: Resolves the target medium (html or dashboard) and applies its constraint/recommendation rules from media.yaml files; slide and PPTX requests are handed off to a separate skill. - Brand token composition: Queries the origin-brand repository for resolved design tokens with license gating, then merges them with media rules using a documented priority algorithm (context-composer). - Mandatory HTML checklist: Every HTML output must include lang attribute, viewport meta, semantic landmarks, labeled SVGs, focus-visible styling, and 4.5:1 contrast. - Tiered validation: Offers static auditing via scripts/audit_html.py (structure and literal-color contrast, including linked CSS) and optional Playwright-based rendered measurement, only after user approval. - Use Case: Ask for a dashboard for municipal population and finance data; the Skill selects the dashboard media, applies brand tokens, generates the HTML, and asks whether to run static or rendered validation. ## Quick Start Ask the AI to build a brand-aligned responsive landing page in HTML and then choose whether to run the static audit or full browser validation.
