Design Styles
One skill, four branches. Every branch starts with a design read and loads only its own reference files.
Step 1 — The design read
Before any code or critique, state in one line what you are reading the brief as:
"Reading this as: <page kind> for <audience>, <vibe> language, leaning <style pack or system>."
Signals to read: page kind, vibe words the user used, linked references, audience, existing brand assets, regulatory/accessibility constraints (these override aesthetics). If the read genuinely diverges into two directions, ask exactly one clarifying question. Otherwise declare and proceed.
Step 2 — Route
| Task |
Load |
| Build a landing page / portfolio / marketing site |
one styles/*.md pack + landing-craft.md |
| Apply a named aesthetic to any surface |
the matching styles/*.md pack |
| Redesign / upgrade an existing site |
redesign.md + ux.md |
| UX/UI review of a screen, mock, or PR |
review.md + ux.md |
| Product UI needing functional UX (forms, flows, dashboards) |
ux.md |
Style packs:
- styles/high-end.md — expensive-agency: haptic depth, cinematic motion, Apple/Linear-tier. For premium SaaS, luxury consumer, agency sites.
- styles/minimalist.md — editorial document-style: warm monochrome, typographic hierarchy, flat surfaces. For tools, workspaces, calm brands.
- styles/brutalist.md — Swiss print / tactical terminal: rigid grids, extreme type scale, utilitarian color. For data-heavy dashboards, edgy portfolios, editorial.
Pick ONE style pack per project. When a pack's rule conflicts with a shared rule below or with landing-craft.md, the pack wins — packs are deliberate overrides.
Shared hard rules (every branch)
- Verify dependencies before importing: check
package.json first, output the install command if missing.
- Animate only
transform and opacity. Scroll effects via IntersectionObserver, Motion useScroll(), or ScrollTrigger — a raw scroll event listener is broken code.
- Honor
prefers-reduced-motion: loops, parallax, and scroll-hijacks collapse to static.
- WCAG AA contrast on all text, buttons, and form elements. Audit every CTA against its background.
- Icons from one library per project, one stroke width. Emoji are never icons.
min-h-[100dvh], never h-screen, for full-height sections.- Real images (generation tool → seeded placeholder → labeled TODO slot), never div-built fake screenshots.
Output discipline (every branch)
The reader has ADHD. Format for scanning, then stop:
- Verdict or design read first, one line, before anything else.
- Findings as one-liners:
location — problem → fix. Full sentences live in the fix, not around it.
- Severity tags (
P0/P1/P2), hard caps per tier (see review.md). Overflow goes in one "also noticed" line, not more bullets.
- Short chunks with bold mini-headers over long paragraphs. A wall of prose is a failed output even when its content is right.
1---2name: design-styles3description: Aesthetic direction + UX baseline for frontend work without prior design setup. Use when building a landing page, portfolio, or marketing site; when the user names a style (premium/high-end, minimalist/editorial, brutalist/industrial); when redesigning an existing site's look; or for a quick UX/UI review of a screen, mock, or PR.4---56# Design Styles78One skill, four branches. Every branch starts with a design read and loads only its own reference files.910## Step 1 — The design read1112Before any code or critique, state in one line what you are reading the brief as:1314> "Reading this as: \<page kind> for \<audience>, \<vibe> language, leaning \<style pack or system>."1516Signals to read: page kind, vibe words the user used, linked references, audience, existing brand assets, regulatory/accessibility constraints (these override aesthetics). If the read genuinely diverges into two directions, ask exactly one clarifying question. Otherwise declare and proceed.1718## Step 2 — Route1920| Task | Load |21|---|---|22| Build a landing page / portfolio / marketing site | one `styles/*.md` pack + [landing-craft.md](landing-craft.md) |23| Apply a named aesthetic to any surface | the matching `styles/*.md` pack |24| Redesign / upgrade an existing site | [redesign.md](redesign.md) + [ux.md](ux.md) |25| UX/UI review of a screen, mock, or PR | [review.md](review.md) + [ux.md](ux.md) |26| Product UI needing functional UX (forms, flows, dashboards) | [ux.md](ux.md) |2728Style packs:2930- [styles/high-end.md](styles/high-end.md) — expensive-agency: haptic depth, cinematic motion, Apple/Linear-tier. For premium SaaS, luxury consumer, agency sites.31- [styles/minimalist.md](styles/minimalist.md) — editorial document-style: warm monochrome, typographic hierarchy, flat surfaces. For tools, workspaces, calm brands.32- [styles/brutalist.md](styles/brutalist.md) — Swiss print / tactical terminal: rigid grids, extreme type scale, utilitarian color. For data-heavy dashboards, edgy portfolios, editorial.3334Pick ONE style pack per project. When a pack's rule conflicts with a shared rule below or with landing-craft.md, the pack wins — packs are deliberate overrides.3536## Shared hard rules (every branch)3738- Verify dependencies before importing: check `package.json` first, output the install command if missing.39- Animate only `transform` and `opacity`. Scroll effects via IntersectionObserver, Motion `useScroll()`, or ScrollTrigger — a raw `scroll` event listener is broken code.40- Honor `prefers-reduced-motion`: loops, parallax, and scroll-hijacks collapse to static.41- WCAG AA contrast on all text, buttons, and form elements. Audit every CTA against its background.42- Icons from one library per project, one stroke width. Emoji are never icons.43- `min-h-[100dvh]`, never `h-screen`, for full-height sections.44- Real images (generation tool → seeded placeholder → labeled TODO slot), never div-built fake screenshots.4546## Output discipline (every branch)4748The reader has ADHD. Format for scanning, then stop:4950- Verdict or design read first, one line, before anything else.51- Findings as one-liners: `location — problem → fix`. Full sentences live in the fix, not around it.52- Severity tags (`P0/P1/P2`), hard caps per tier (see review.md). Overflow goes in one "also noticed" line, not more bullets.53- Short chunks with bold mini-headers over long paragraphs. A wall of prose is a failed output even when its content is right.
thatmike1