UI Design Visual

When to use this skill

Produce interactive HTML prototypes, visual explorations, slides, infographics or animation. For product UI, consume the current feature/page/navigation contracts. Production application implementation requires its own implementation scope.

How to use this skill

1. Resolve scope and authority. Read the canonical task, IDs, source versions, confirmed decisions and expected output. A Harness dispatch takes precedence: perform only its named stage and return through that dispatch; never create another run or task source.
2. Resolve theme and constraints. Reuse the theme reference from ui-design-theme and the initial/inherit/correction brief from ui-design-continuity. Missing optional skills do not authorize installation: read the existing contracts and report missing inputs. Initial mode permits visual exploration within confirmed product constraints; inherit mode preserves the approved baseline.
3. Choose the production path. Read only the relevant sections of detailed workflows and its resource routes. Existing confirmed choices override exploratory defaults. A scoped single-page task does not automatically require three alternatives, slides, animation or export.
4. Generate within the change budget. Preserve page/Surface/task IDs, business behavior and navigation. Style variations change only explicitly open visual decisions. Keep demonstration data and unavailable assets honestly labeled.
5. Verify the candidate. Inspect actual browser/render output when tools permit; record interactions exercised, assets, source and screenshots. If verification is unavailable, report it as unverified. Author self-checks do not replace ui-design-review or user approval.
6. Return the handoff. Include candidate/source paths, theme and constraint versions, changed regions, check evidence and limitations. ui-design-review compares the resulting candidate against the same sources; unresolved findings go back to the caller for scoped correction.

Production references