From awesome-frontend
The BRUTALIST / neo-brutalist web design lens — raw, high-contrast, hard-edged interfaces that show their structure and feel bold and unpolished on purpose. Use when the user wants this look or names it: "brutalist", "neo-brutalist", "neubrutalism", "raw", "bold/flat", "hard borders", "anti-design", "indie/ startup edgy", "memphis-ish", or wants something loud, high-energy, and un-corporate (indie products, dev tools, creative tools, drops, communities). This is a STYLE LENS — apply on top of the awesome-frontend-design method. Anchored in a teardown of gumroad.com. Core feel: thick black borders, flat offset shadows, bright flat color blocks, big bold type, hard edges, visible structure, zero gloss.
How this skill is triggered — by the user, by Claude, or both
Slash command
/awesome-frontend:brutalist-web-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Brutalism on the web borrows from architectural brutalism: show the structure,
Brutalism on the web borrows from architectural brutalism: show the structure, refuse polish, be honest and blunt. The modern, friendlier strain — neo- brutalism / neubrutalism — keeps the rawness (hard borders, flat shadows, loud flat color, system type) but makes it usable and playful. It reads as bold, energetic, and un-corporate — the deliberate opposite of soft gradient SaaS.
Apply on top of the awesome-frontend-design method. Worked example with tokens:
references/case-study-gumroad.md (+ gumroad.png).
box-shadow: 6px 6px 0 #000 (no
blur, no spread) gives the chunky "sticker" depth. On hover, the element often
shifts and the shadow collapses (translate + reduce offset).Arial/mono) set large and
tight. Often a slightly characterful display face for headings (Gumroad uses ABC
Favorit) over a plain body (Arial). Type is loud and unfussy.radius: 0 (pure brutalist) or a small
consistent radius (~4–8px) for the friendlier neo-brutalist look — but the black
border + flat shadow matter far more than the corner.Snappy and mechanical, not smooth-organic. Short, abrupt transitions; the signature move is the press: on hover/active, translate the element by the shadow offset and shrink the shadow so it looks physically pressed. Little to no easing (or a fast ease) suits the blunt feel. Keep it cheap (transform/opacity) and reduced-motion-aware. (Implementation: awesome-react-animations.)
Do: commit to thick black borders + flat offset shadows; use loud flat colors in big areas; set type large/bold/tight; make buttons chunky and "pressable"; keep edges hard. Don't: add blur shadows, gradients, or glassy effects; use timid pastel-on- white; over-round corners into friendliness; center-and-pad everything evenly. Brutalism that's been "cleaned up" with soft shadows is just generic SaaS again — the harshness is the identity.
references/case-study-gumroad.md — tokens + teardown, with gumroad.png.references/more-references.md — three more teardowns (Brutalist Websites,
Balenciaga, Cash App) spanning raw → hard → bold-flat, with tokens + screenshots.npx claudepluginhub gcomartins/myfskills --plugin awesome-frontendCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.