Frontend Design

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

Before coding, understand the context and commit to a BOLD aesthetic direction: