About this skill

Problem

Many page, deck, prototype, and dashboard requests end up as “functional but generic” UI: default palettes, cluttered layouts, and weak brand identity.
This skill positions the agent as a web design engineer that produces HTML/CSS/JavaScript/React artifacts, shifting role by task: UX, motion, slide design, prototyping, or data visualization.
The bar is “stunning,” not merely “working,” which fits pages, dashboards, prototypes, slide decks, visualizations, animations, and UI mockups.
It turns design decisions into checkable steps instead of letting the agent assemble a generic template.

Verify facts first: when the request names a product, SDK, version, release, or event, check authoritative sources before designing around uncertain claims.
Gather design context: prioritize user-provided screenshots, Figma, codebases, UI kits, and design systems; if both code and screenshots exist, extract tokens from source code first.
Declare the system before code: articulate narrative role, viewing distance, visual temperature, and capacity, then specify palette, typography, spacing, radius, shadow, and motion.
Ship v0 early: show placeholders, key layout, and design assumptions so the user can course-correct before full components, states, and motion are built.
Self-check before delivery: review visual hierarchy, spacing system, color count, and font count; run browser acceptance only when the user explicitly asks for validation.
Respect boundaries: it is not for back-end APIs, CLI tools, data scripts, pure logic, or content conversion; branded work needs real logos and product assets instead of hex codes or generic silhouettes.

Prepare launch materials by turning a PRD and assets into a polished ten-slide web deck
Extend an existing codebase UI while preserving its original design tokens and layout rules
Build an interactive dashboard by confirming audience, viewing distance, and information density first
Design branded pages with real logos and product images instead of relying on hex colors or hand-drawn SVGs

PMs turning PRDs and launch assets into polished web decks with early v0 review
Front-end engineers extending existing product UI while preserving design tokens
BI analysts building interactive dashboards with explicit audience and viewing-distance constraints
Designers delivering brand pages that use real logos and product imagery in layout