minimalist

Auto-load

Attaches itself automatically when a prompt matches.

Clean editorial minimalist interfaces in the Notion / Linear style. Warm monochrome palette, strong typographic hierarchy, generous whitespace, flat bento grids, muted pastel accents. No heavy gradients, no big shadows, no pill-shaped containers.

Scaffolds

react

vanilla

Source

Adapted from leonxlnx/taste-skill (MIT), adapted for Codebase scaffolds

Instructions

The full instruction set the agent receives when this skill is active.

Minimalist / Editorial UI

Layer this on top of frontend-design. Set the dials to roughly VARIANCE 5-6, MOTION 3-4, DENSITY 2-3. The goal is document-style restraint: typography and whitespace carry the design, not effects.

Banned here (stricter than the base skill)

No shadow-md / shadow-lg / shadow-xl. Shadows are near-invisible (0 1px 2px rgba(0,0,0,0.04)) or absent.
No gradients, neon, or glassmorphism (a subtle sticky-nav blur is the only exception).
No rounded-full on large containers, cards, or primary buttons. Crisp 4px-12px radii only.
No primary-colored hero sections (no bright blue/green/red full-bleed blocks).

Palette: warm monochrome + spot pastels

Color is scarce, used only for meaning or a small accent.

Canvas: pure white #FFFFFF or warm bone #F7F6F3 / #FBFBFA.
Cards: #FFFFFF or #F9F9F8. Borders/dividers: #EAEAEA or rgba(0,0,0,0.06).
Text: never pure black. Body #2F3437 at line-height: 1.6; secondary #787774.
Accents (tags, inline code, icon chips only): pale red #FDEBEC/text #9F2F2D, pale blue #E1F3FE/#1F6C9F, pale green #EDF3EC/#346538, pale yellow #FBF3DB/#956400.

Typography

Body/UI: a clean geometric or system sans (see base-skill font rules; on scaffold-react use the system stack, on scaffold-next reach for Geist/Inter Tight via next/font).
Optional editorial serif for hero headings ONLY if the brief is genuinely editorial, with tight tracking (-0.02em to -0.04em) and line-height: 1.1. Otherwise stay sans.
Mono (ui-monospace, JetBrains Mono via next/font) for code, keystrokes, metadata.

Components

Bento grids: asymmetric CSS Grid, each card border: 1px solid #EAEAEA, radius 8-12px, generous internal padding (24-40px).
Primary CTA: solid #111111 bg, white text, 4-6px radius, NO shadow, hover shifts to #333 or scale(0.98) on :active.
Tags/badges: the one pill exception. rounded-full, text-xs, uppercase, tracking-[0.05em], muted-pastel bg.
Accordions (FAQ): no container boxes; separate items with border-bottom: 1px solid #EAEAEA and a sharp + / - toggle.
Keystrokes: real <kbd> with 1px solid #EAEAEA, 4px radius, #F7F6F3 bg, mono font.

Spacing & motion

Macro whitespace: py-24 to py-32 between sections. Constrain reading width to max-w-4xl / max-w-5xl.
Sections must not feel empty: add depth with a very low-opacity warm radial light spot (opacity 0.03), a subtle line pattern, or a desaturated image, not a flat blank block.
Motion is invisible-but-present: scroll entry translateY(12px) + opacity 0 over 600ms cubic-bezier(0.16,1,0.3,1) via IntersectionObserver; stagger lists by index * 80ms; card hover lifts an ultra-soft 0 2px 8px rgba(0,0,0,0.04). transform/opacity only.