frontend-design

frontend-design is a strict visual-design guardrail skill for building modern, minimal-visual-noise, airy, non-generic application UIs. It is not a domain workflow skill; it complements vertical/domain skills (CPQ, CRM, trades, and similar app builders) by owning visual quality inside whatever product structure those skills require. It solves the problem of AI-generated UIs drifting toward generic SaaS defaults — purple accents, card-heavy dashboards, cramped spacing, and boilerplate admin shells — by enforcing a consistent set of brand-aware theming and layout rules.

The skill mandates a design pass before coding: read the active task, domain context, and any .tasks/domain.md to extract brand colors, company name, tone, terminology, and entities; read its two reference files (a shadcn/Tailwind setup-and-theming guide and a visual-style-references guide); then define design tokens (primary/secondary/accent, backgrounds, text, borders, radius, shadows, status colors, typography, generous spacing, cardless plan) and a design direction before building screens. Non-negotiables include brand-first color mapping, always-readable foregrounds targeting WCAG AA contrast, deriving readable foreground colors rather than reusing brand colors, using an actual logo when one exists, a light surface system that avoids using one flat white for every surface, distinct editable-input backgrounds, generous airy spacing carried into inner content, rounded modern controls, soft shadows, cardless defaults, and authored composition with deliberate negative space and vivid accent hierarchy. It closes with a pre-completion audit.

It targets frontend developers and designers building product screens with React, shadcn/ui, and Tailwind who want polished, brand-aware, non-generic UIs. It is purely advisory design guidance — rules, token roles, and style references — with no executable or risky behavior, making it entirely benign.