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 one big idea, strong hierarchy, 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 dominant visual anchor when the task is brand-led.
• 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, for brand-led pages.

App Surfaces

For dashboards, admin tools, and operational workspaces:

• Default to calm hierarchy, strong typography, dense but readable information, and minimal chrome.
• Organize around primary workspace, navigation, and one secondary context rail.
• Prefer utility copy over marketing copy.
• Start with the working surface itself: KPIs, filters, tables, status, tasks, or recent activity.
• Avoid dashboard-card mosaics, decorative gradients behind routine product UI, and multiple competing accent colors.
• If a panel can become plain layout without losing meaning, remove the card treatment.

Copy

• Write in product language, not design commentary.
• Let the headline carry the meaning.
• Supporting copy should usually be one short sentence.
• Cut repetition between sections.
• Do not include prompt language or design commentary into the UI.
• If a sentence could appear in a homepage hero or ad, rewrite it until it sounds like product UI.

Motion

• Use motion to create presence and hierarchy, not noise.
• Ship a small set of intentional motions only when they improve affordance or atmosphere.
• Keep motion smooth on mobile, restrained in duration, and consistent across the page.

Hard Rules

• No cards by default.
• No hero cards by default.
• No more than one dominant idea per section.
• No filler copy.
• No more than two typefaces without a clear reason.
• No more than one accent color unless the product already has a strong system.

Litmus Checks

• Is the brand or product unmistakable in the first screen?
• Is there one strong visual anchor?
• Can the page be understood by scanning headings only?
• Does each section have one job?
• Are cards actually necessary?
• Does motion improve hierarchy or atmosphere?
• Would the design still feel premium if decorative shadows were removed?