frontend-skill

Start with a visual thesis, content plan, and interaction thesis before writing code. Use a full-bleed hero with one dominant image, keep copy short, limit yourself to two typefaces and one accent color, and avoid defaulting to card grids.

A strong hero runs edge-to-edge with no inherited page gutters, leads with the brand name, then headline, body, and CTA. Text sits on a calm area of the image with strong contrast, and the combined header plus hero fits within the first viewport.

Yes, Framer Motion is preferred for section reveals, shared layout transitions, scroll-linked opacity or scale shifts, and sticky storytelling. Ship 2-3 intentional motions that are noticeable, smooth on mobile, and removed if purely ornamental.

Avoid cards by default on both landing pages and app surfaces. Use sections, columns, dividers, lists, and media blocks instead, reserving cards only when the card itself is the interaction, such as a selectable item.

Product surfaces should use utility copy: headings that state what the area is or does, one-sentence explanations of scope or freshness, and no hero sections or marketing language. An operator scanning only headings and numbers should understand the page.