Skip to content
Documentation

Frontend Aesthetic Design Direction

FieldValue
TypeSkill Resource
Source~/.copilot/skills/frontend/references/frontend-design.md
DescriptionNot specified

Source Content

Frontend Aesthetic Design Direction

Ship production-grade HTML/CSS/JS, React, Vue, or Astro UI with a single, named aesthetic direction. Absorbed from the former frontend-design skill.

Use for

  • Landing pages, hero sections, marketing surfaces.
  • Component or page redesigns that need a fresh aesthetic.
  • Beautifying or “elevating” an existing UI without breaking it.
  • Posters, artifact pages, one-off creative web pieces.
  • HTML/CSS/JS, React, Vue, or Astro components where look-and-feel matters.

Don’t use for

  • Design system tokens, primitives, theming → ui-design-system skill.
  • Deep React architecture, state, perf → references/react.md in this skill / references/react-perf.md.
  • User research, personas, journey maps → ux-designer-researcher agent.
  • Routing, data flow, search params → references/tanstack-router.md.

How it works

  1. Name the aesthetic. One direction — editorial, brutalist, refined-minimal, maximalist, organic, retro-futurist. Vague briefs get one sharp question, then commit.
  2. Pick the type pair. A distinctive display face + a refined body face. Never default to Inter/Roboto/Arial.
  3. Anchor the color. Dominant + sharp accent. Most palettes fail by being too even.
  4. Lay out with intent. Asymmetry, overlap, generous negative space or controlled density — pick a side.
  5. Build it for real. Production HTML/CSS/JS or React/Astro; semantic, accessible, responsive. No placeholder lorem if real copy exists.
  6. Add one orchestrated moment. One staggered page-load reveal beats five scattered micro-interactions.
  7. Cut. Remove anything that doesn’t serve the direction. The brief is what’s left.

Examples

  • “Build a hero for our new launch” → pick an aesthetic (e.g. editorial-with-restraint), a display/body type pair, dominant + accent color, and ship semantic, accessible JSX with one orchestrated reveal.
  • “Make this dashboard look less generic” → cut to one direction, replace defaults (no Inter on white with a purple gradient), and rebuild hierarchy with deliberate spacing and contrast.
  • “Add a poster page for our conference talk” → commit to one aesthetic and execute it across type, color, layout, and motion — no five-direction smoothie.

When unsure, ask

  • “What’s the tone — refined, raw, playful, editorial, brutalist? Pick one.”
  • “Light or dark, and is that load-bearing or just a preference?”
  • “Is there an existing brand (logo, palette, type) to respect, or is this a clean slate?”
  • “Who sees this and what should they feel in the first second?”

If the same question has been answered twice, commit and ship.

Self-rubric

  • One direction, executed. A reader could name the aesthetic in one phrase.
  • No generic defaults. No Inter on white with a purple gradient. No system-font lorem.
  • Typography earns its space. Display vs body is a deliberate pair, not a coincidence.
  • Accessible by construction. Semantic HTML, focus states, contrast ≥ WCAG AA.
  • It runs. Code is copy-pasteable on the stated framework version.
  • Would a designer you respect sign off? If no, cut and revise.
  • Validated: scripts/check_frontend_design.py <file-or-dir> exits 0 — no banned generic font, a motion/interaction detail is present.

scripts/check_frontend_design.py <file-or-dir> flags any banned generic font (Inter/Roboto/Arial/Helvetica Neue) and warns if no motion/interaction detail is present.

References