Frontend Design

Choose the branch before selecting a model. Coordinator work and deterministic commands proceed within invocation authority. Apply this method in the current role. It does not dispatch a worker. For a worker dispatch, use shared/references/model-preview.md and its one approved route snapshot. Nested skills and runners consume it without another selection or worker.

This skill guides creation of distinctive, production-grade frontend interfaces: implement real working code with exceptional attention to aesthetic details and creative choices.

The load-bearing idea is conceptual integrity: every interface commits to one coherent design idea, and every typographic, color, motion, and layout choice serves it. State that aesthetic out loud before coding and obey it throughout — a striking-but-incoherent screen fails this skill.

For systematic style/color/font lookups from a design-system database, see ui-ux-pro-max; this skill is for purely creative, bespoke aesthetic direction.

Note: this skill supersedes the bundled frontend-design:frontend-design plugin skill; its triggers and guidance are a superset of that copy. If both are available, prefer this one (or disable the plugin copy to avoid nondeterministic activation).

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

For an existing product, preserve its components, theme, density, and interaction conventions unless the user requests a new direction. Use the aesthetic guidance below only for a bespoke design or an authorized visual redesign. Do not replace an established font, control, or layout merely to make the result distinctive.

When a new direction is requested, understand the context and select a clear aesthetic direction: