frontend-skill

Use this skill when the quality of the work depends on art direction, hierarchy, restraint, imagery, and motion rather than component count. Goal: ship interfaces that feel deliberate, premium, and current. Default toward award-level composition: one big idea, strong imagery, sparse copy, rigorous spacing, and a small number of memorable motions.

Before building, write three things: • visual thesis: one sentence describing mood, material, and energy • content plan: hero, support, detail, final CTA • interaction thesis: 2-3 motion ideas that change the feel of the page Each section gets one job, one dominant visual idea, and one primary takeaway or action.

• Start with composition, not components. • Prefer a full-bleed hero or full-canvas visual anchor. • Make the brand or product name the loudest text. • Keep copy short enough to scan in seconds. • Use whitespace, alignment, scale, cropping, and contrast before adding chrome. • Limit the system: two typefaces max, one accent color by default. • Default to cardless layouts. Use sections, columns, dividers, lists, and media blocks instead. • Treat the first viewport as a poster, not a document.

Default sequence: • Hero: brand or product, promise, CTA, and one dominant visual • Support: one concrete feature, offer, or proof point • Detail: atmosphere, workflow, product depth, or story • Final CTA: convert, start, visit, or contact Hero rules: • One composition only. • Full-bleed image or dominant visual plane. • Canonical full-bleed rule: on branded landing pages, the hero itself must run edge-to-edge with no inherited page gutters, framed container, or shared max-width; constrain only the inner text/action column. • Brand first, headline second, body third, CTA fourth. • No hero cards, stat strips, logo clouds, pill soup, or floating dashboards by default. • Keep headlines to roughly 2-3 lines on desktop and readable in one glance on mobile. • Keep the text column narrow and anchored to a calm area of the image. • All text over imagery must maintain strong contrast and clear tap targets. If the first viewport still works after removing the image, the image is too weak. If the brand disappears after hiding the nav, the hierarchy is too weak. Viewport budget: • If the first screen includes a sticky/fixed header, that header counts against the hero. The combined header + hero content must fit within the initial viewport at common desktop and mobile sizes. • When using 100vh/100svh heroes, subtract persistent UI chrome (calc(100svh - header-height)) or overlay the header instead of stacking it in normal flow.