← ClaudeAtlas

design-taste-frontendlisted

Load when a workflow-router-selected owner workflow needs anti-template frontend visual direction, design-read calibration, or pre-flight critique for landing pages, portfolios, marketing pages, or redesigns; do not load for dashboards, data tables, multi-step product UI, routine frontend logic, HTML reports, slide decks, or generic code explanation.
JasonxzWen/harness-hub · ★ 1 · Web & Frontend · score 70
Install: claude install-skill JasonxzWen/harness-hub
# Design Taste Frontend Use this skill as a frontend taste layer, not as the whole frontend implementation lane. It helps set a deliberate visual direction for landing pages, portfolios, marketing pages, and redesigns so the result does not look templated. Do not use it for dashboards, dense data tables, multi-step product UI, routine React/Next logic, HTML reports, decks, or code explanation. Those route to `frontend-design`, `frontend-patterns`, `web-artifacts-builder`, `effective-interact`, or `frontend-slides`. ## Core Workflow 1. Read the brief before choosing aesthetics. Identify page kind, audience, brand assets, references, constraints, and explicit vibe words. 2. State one design read before code: `Reading this as: <page kind> for <audience>, with a <vibe> language, leaning toward <system or aesthetic family>.` 3. If two plausible directions conflict, ask exactly one clarifying question. If the brief is clear enough, proceed. 4. Set three working dials: `DESIGN_VARIANCE`, `MOTION_INTENSITY`, and `VISUAL_DENSITY`. Let the brief override the default. 5. Choose a real foundation. If the brief maps to an official design system, use the official package and tokens. If it is an aesthetic rather than a system, say so and build honestly. 6. Design against AI tells: no AI-purple default, dark mesh hero, three equal feature cards, generic glassmorphism, or Inter/slate sameness unless the source material demands it. 7. Verify spacing, typography, responsiveness, media strat