frontend-design

The frontend-design skill positions the agent as a frontend designer-engineer rather than a layout generator, aiming to produce memorable, high-craft, production-ready interfaces that avoid generic AI UI patterns and express a clear aesthetic point of view directly in working code.

It sets a core mandate that every output must have an intentional, named aesthetic direction, real working code, at least one memorable element, and cohesive restraint. Before building, it evaluates the direction with a Design Feasibility and Impact Index (DFII) scoring aesthetic impact, context fit, feasibility, performance, and consistency risk, and requires a design thinking phase defining purpose, a single dominant tone, and a differentiation anchor. It lays out non-negotiable execution rules for typography (no system or AI-default fonts), color (a dominant story via CSS variables), spatial composition (intentional grid breaks), motion (purposeful and sparse), and texture, alongside implementation standards (semantic, accessible, modular code) and explicit anti-patterns that count as immediate failure.

It is most useful for designers and developers who want distinctive, opinionated, production-grade UI with an explicit aesthetic rationale rather than templated, generic layouts.