Frontend design

The skill casts the agent as a studio design lead whose client wants a clear point of view. It starts by pinning down the subject. If the brief does not say what the product is, the agent proposes a subject, an audience and the design's main job, then checks them with the user. Visual choices are drawn from that subject's industry, materials and vocabulary.

Work happens in two passes. The agent first drafts a compact plan: four to six named hex colors, typefaces and their roles, a layout idea sketched in prose and ASCII wireframes, and a few guiding principles. It reviews the plan against the brief, revises any part that reads like a generic default, explains each change and only then writes code. The SKILL.md lists five looks it calls common in AI-generated pages, among them a cream background with a terracotta accent and identical rounded SaaS cards. The agent avoids them unless the brief asks for one.

Further guidance covers the type scale, line lengths under 80 characters, sparing motion, CSS specificity clashes and a quality floor of responsive layouts, visible keyboard focus and reduced-motion support. The agent critiques its own output, with screenshots where its environment allows. A closing section asks for plain, active, user-facing interface copy.