frontend-codexlisted

# 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. ## Working Model 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. ## Beautiful Defaults - 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. ## Landing Pages Default sequence: 1. Hero: brand or product, promise, CTA, and one dominant visual 2. Support: one concrete feature, offer, or proof point 3. Detail: atmosphere, workflow, product depth, or story 4. Final CTA: convert, start, visit, or contact Hero rules