Frontend Design

使いどころ

This `SKILL.md` is not a soft 'improve the UI' prompt. It forces a design brief first. The source breaks the setup into `purpose / tone / constraints / differentiation`: what the interface solves, who it serves, what technical and performance limits exist, and what memorable visual hook people should leave with. It expects the direction to be defined before implementation begins.

Its handling of `tone` is also very explicit. It does not want a blurry 'modern, clean, premium' direction. The source names strong aesthetic lanes such as `brutally minimal`, `maximalist chaos`, `retro-futuristic`, `organic / natural`, `luxury / refined`, `editorial / magazine`, `brutalist / raw`, `art deco / geometric`, and `industrial / utilitarian`. The core idea is not whether the design is loud or quiet. It is whether the direction is intentional.

Once it moves into execution, it splits frontend design into five systems: `typography`, `color & theme`, `motion`, `spatial composition`, and `background & visual details`. The value is that these are not slogans. They are selection rules. On typography, it wants a characterful `display font` paired with a restrained body font, and it explicitly pushes against defaults like `Arial` and `Inter`. On color, it wants CSS variables for consistency and a dominant palette with sharp accents instead of evenly distributed safe colors.

The motion and layout guidance is equally specific. The source says HTML work should prefer CSS-only animation, while React should use Motion when it is available. It does not want motion sprinkled everywhere. It wants a few high-impact moments: a well-orchestrated page load, `animation-delay` based staggered reveals, and scroll or hover moments that actually surprise. On composition, it explicitly allows `asymmetry`, `overlap`, `diagonal flow`, and `grid-breaking elements`, while supporting either generous negative space or tightly controlled density.

The background and detail layer shows its real attitude most clearly. The source says the page should not default to a flat solid background. It should actively build atmosphere and depth, which is why it names `gradient meshes`, `noise textures`, `geometric patterns`, `layered transparencies`, `dramatic shadows`, `decorative borders`, `custom cursors`, and `grain overlays`. At the same time it defines hard red flags: no `Inter / Roboto / Arial / system fonts`, no purple-gradient-on-white cliches, no predictable component patterns, and no lazy convergence on overused choices like `Space Grotesk`.

That is why this skill is best for landing pages, dashboards, brand sites, component-library homepages, campaign pages, and full-page redesigns where polish and recognizability matter. It is not for casually sprinkling UI sugar onto an old page. It is for locking a design direction first, committing to a visible aesthetic point of view, and matching code complexity to visual ambition. The source even ends by saying minimalist work depends on restraint, spacing, and precision, while maximalist work needs enough implementation depth to genuinely support the visual idea.