From html-design-styles
Use when the user wants to apply a named design style or aesthetic to a frontend interface — e.g., bento, brutalist, neobrutalist, glassmorphism, vaporwave, dark SaaS, kawaii, cyberpunk, art deco, neumorphism, swiss, memphis, scandinavian, cottagecore, y2k, sci-fi HUD, and more. Triggers when the user names a specific style, asks "what design styles do you support", requests "a [style] look" for a page or component, or wants to restyle existing markup with a chosen aesthetic. Provides a curated catalog of 53 design styles each with full color palettes, typography stacks, component patterns, and layout specifications.
How this skill is triggered — by the user, by Claude, or both
Slash command
/html-design-styles:html-design-stylesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill provides 53 named design styles for HTML/CSS frontend work. Each style is a complete, opinionated specification — color palette, typography stack, component patterns (cards, buttons, navs), layout conventions, and signature visual mechanics. Apply the chosen style faithfully without substitution.
references/common.mdreferences/styles/acid-brutalist.mdreferences/styles/art-deco.mdreferences/styles/athletic.mdreferences/styles/aurora.mdreferences/styles/bento.mdreferences/styles/blueprint.mdreferences/styles/clay.mdreferences/styles/corporate.mdreferences/styles/cottagecore.mdreferences/styles/cyberpunk.mdreferences/styles/dark-action.mdreferences/styles/dark-cinema.mdreferences/styles/dark-cosmic.mdreferences/styles/dark-mono.mdreferences/styles/dark-neon.mdreferences/styles/dark-saas.mdreferences/styles/dashboard.mdreferences/styles/dot-grid.mdreferences/styles/enterprise-editorial.mdThis skill provides 53 named design styles for HTML/CSS frontend work. Each style is a complete, opinionated specification — color palette, typography stack, component patterns (cards, buttons, navs), layout conventions, and signature visual mechanics. Apply the chosen style faithfully without substitution.
The styles range across many design traditions: minimalist (Swiss, Scandinavian, Japanese), brutalist (Pure Brutalist, Neobrutalist, Acid Brutalist, Monolith), retro (Y2K, Vaporwave, Memphis, Pixel, Retro Terminal), dark/atmospheric (Dark Cinema, Dark Cosmic, Dark Action, Dark Neon, Cyberpunk, Sci-Fi HUD), warm/organic (Cottagecore, Organic, Tropical, Groovy), editorial (Newspaper, Longform, Enterprise Editorial, Luxury), playful (Kawaii, Memphis, Manga, Pop Art), and many more.
Before generating any code, confirm:
AskUserQuestion tool over plain text to present the matching styles as a structured multi-choice picker — that gives the user keyboard navigation and selection rather than forcing them to retype a style name. Include each candidate style as a suggested option with its one-line description from the catalog table; allow a free-text fallback for "something else from the catalog" or to switch styles. Use plain text only when AskUserQuestion isn't available in the runtime.<style> for custom rules.If the user has not picked a style, do not invent one. Ask — via AskUserQuestion if available.
AskUserQuestion tool to present matching styles as a structured multi-choice picker rather than asking via plain text — keyboard selection is faster than retyping a style name. Pass each candidate style as an option with its one-line description from the catalog table.references/common.md once per session for cross-cutting patterns (font loading, container widths, marquee, scrollbar, focus states, accessibility).references/styles/<slug>.md for the chosen style's complete spec. The slug is in the table below.| Style | Slug | One-line description |
|---|---|---|
| Acid Brutalist | acid-brutalist | Pure black with acid yellow + brutal red, Anton/Bebas Neue display, noise grain overlay — punk and chaotic. |
| Art Deco | art-deco | 1920s symmetry, geometric gold ornaments and sunburst motifs on black or ivory — opulent and formal. |
| Athletic | athletic | Diagonal clip-path cuts, condensed Barlow caps, hard color blocks — sports-branding energy. |
| Aurora | aurora | Drifting multi-color gradient blobs blended like silk over deep base — dreamy and ethereal. |
| Bento | bento | Apple/macOS bento grid: white cards on light gray, Plus Jakarta Sans, blue accent — clean and trust-building. |
| Blueprint | blueprint | Midnight blueprint blue with white grid, Courier Prime, crosshair cursor, technical drawing details. |
| Clay | clay | Chunky rounded cards with 3-layer purple shadow, Nunito 900, candy section colors — physical and toy-like. |
| Corporate | corporate | Conservative navy + blue, IBM Plex Sans, structured grid, professional B2B trust signals. |
| Cottagecore | cottagecore | Sage and dusty-rose pastels, Playfair italic + Lato Light, botanical SVG accents — storybook softness. |
| Cyberpunk | cyberpunk | Yellow/black hazard stripes, clip-path angled corners, Orbitron + Rajdhani — dystopian danger aesthetic. |
| Dark Action | dark-action | Cobra-black gradient with FCD34D yellow, Oswald display, gold pulse-glow — cinematic martial energy. |
| Dark Cinema | dark-cinema | Near-black with red glow, Bebas Neue, noise overlay, floating animated rotated labels — visceral. |
| Dark Cosmic | dark-cosmic | Slate-950 base with indigo/cyan glow blobs, glassmorphism cards, dot grid — SaaS infrastructure feel. |
| Dark Mono | dark-mono | Dark zinc panels, system monospace, cyan + pink color pops, scanline texture — compact and techy. |
| Dark Neon | dark-neon | Pure black with multiple simultaneous neon glow colors (pink/cyan/green/purple) — club/gaming. |
| Dark SaaS | dark-saas | Slate-950 base, sky-blue accent, staggered fade-up animations, trust chips — polished SaaS landing. |
| Dashboard | dashboard | 240px sidebar + slate-50 main, Inter, metric cards, data tables, status badges — admin/analytics. |
| Dot Grid | dot-grid | Gray dotted bg, Archivo Black + Space Mono, hot pink hover, hard 10px black shadows — content portal. |
| Enterprise Editorial | enterprise-editorial | Alternating white/dark sections, Inter font-black, indigo, large rounded "app" mockup cards. |
| Glassmorphism | glassmorphism | Frosted blur cards over vivid mesh-gradient backgrounds, Outfit/DM Sans — futuristic and airy. |
| Gothic | gothic | Forest greens and near-black, Cinzel + Crimson Text, blood-red wax drips, gold ornament accents. |
| Groovy | groovy | Warm 70s oranges/mustards/avocado, Righteous bubble lettering, irregular border-radius cards. |
| Grunge | grunge | Aged paper textures, Bebas Neue + Courier, splatter clip-paths, distressed worn aesthetic. |
| Handwritten | handwritten | Caveat headlines, SVG-displaced sketchy borders, irregular border-radius — designer's sketchbook feel. |
| Isometric | isometric | Soft blue-white bg with isometric 3D cubes, blue-purple top/left/right faces, iso-direction shadows. |
| Japanese | japanese | Washi off-white with sumi black, Cormorant Garamond, persimmon accent, asymmetric negative space. |
| Kawaii | kawaii | Blush whites with candy pastels, Nunito 900, bounce/wiggle animations, mascot emoji accents. |
| Longform | longform | Full-bleed hero photo, Merriweather + Playfair, drop caps, pull quotes, sidebar annotations — magazine. |
| Luxury | luxury | Cream + Cormorant Garamond, generous py-32/py-48 whitespace, brass gold accents — refined and editorial. |
| Manga | manga | High-contrast black/white with single red pop, Bangers SFX text, halftone dots, panel clip-paths. |
| Maximalist | maximalist | Layered patterns on patterns, Bebas Neue + Abril Fatface, clashing colors, intentional density. |
| Memphis | memphis | 80s/90s pastels (pink, yellow, turquoise), Fredoka One, scattered geometric shapes — playful chaos. |
| Monolith | monolith | White with thick border-t-8 dark navy top edge, system monospace, 4px navy offset shadows. |
| Neobrutalist | neobrutalist | Light gray bg, hard 5px black shadows, neon accents (purple/green/pink/yellow/blue), Space Grotesk. |
| Neumorphism | neumorphism | All elements share #e0e5ec bg; dual light/dark shadows extrude or inset everything — soft tactile UI. |
| Newspaper | newspaper | Warm newsprint paper, Playfair + Lora serif, column grids, drop caps, red flag accents — print editorial. |
| Organic | organic | Warm cream + terracotta + sage, Fraunces serif, irregular blob border-radius — hand-crafted natural. |
| Pink Neo | pink-neo | Hot-pink dotted page with floating white cards, Archivo Black + Space Mono, multi-color tag pills. |
| Pixel | pixel | Press Start 2P with classic NES/Game Boy/CGA palettes, image-rendering pixelated — 8-bit game UI. |
| Pop Art | pop-art | Cyan page hosting a max-w-1280 white-bordered floating box, IBM Plex Mono headlines — energetic. |
| Psychedelic | psychedelic | Cycling rainbow gradient body, morphing blob border-radius, wavy skew text — melting reality. |
| Pure Brutalist | pure-brutalist | System monospace, pure black/white, hard 8/5/3px black shadows, no border-radius — confrontational. |
| Retro Terminal | retro-terminal | #00ff41 phosphor green on near-black, CRT scanlines, screen vignette, blinking cursor, glow-text. |
| Scandinavian | scandinavian | Barely-warm white, Sora 300, single terracotta accent, lowercase headings, py-28 whitespace. |
| Sci-Fi HUD | sci-fi-hud | Cyan corner brackets, Orbitron + Share Tech Mono, scan-line animation, data-readout patterns. |
| Skeuomorphic | skeuomorphic | Realistic material gradients (metal, leather, paper, wood), inset+outset shadows, top-left light source. |
| Soft Modern | soft-modern | White with blurred orb backgrounds, system-ui, blue/pink, focus-visible rings — friendly and accessible. |
| Swiss | swiss | International Typographic Style: white/black/red only, mathematical grid, no decoration. |
| Tropical | tropical | Coral/turquoise/sandy palette, Nunito 800, rounded cards with colored top bars — vacation/resort. |
| Utility Terminal | utility-terminal | White with strict 1px black borders, system monospace, no border-radius, terminal panel + scanlines. |
| Vaporwave | vaporwave | Dark purple-black with retro perspective grid floor + synthwave sun, Audiowide + VT323, gradient text. |
| Y2K | y2k | Windows 95/98 gray bevels, system fonts, raised/sunken outset/inset borders, blue title bar gradient. |
| Zine | zine | Aged newsprint, Special Elite + VT323, intentionally rotated cards, rubber-stamp labels, tape strips. |
common.md once per session — it covers font loading, container/padding conventions, focus rings, marquees, scrollbars, and accessibility patterns shared across many styles. Don't re-load it per request.<style> block for custom rules. Production-ready, not a stub.common.md (skip link, landmarks, focus-visible rings, aria-labels, prefers-reduced-motion). If a style's signature mechanic conflicts with WCAG (e.g. extremely low-contrast text in some maximalist or grunge variants), implement the style as specified but flag the deviation in a one-line comment so the user can review.Suggest the closest match from the table above. Examples:
Offer 2–3 candidates with one-line distinctions and let the user pick.
Words like "modern", "clean", "professional", "simple", "fresh", "bold", or "fun" map to many styles. Ask the user to choose from a short list rather than guessing:
"Several catalog styles fit 'modern and clean' — would you like:
- Soft Modern (white + blurred blue/pink orbs, system font, friendly)
- Bento (Apple-style cards on light gray, Plus Jakarta Sans, blue accent)
- Dark SaaS (slate-950 + sky blue, staggered animations, polished)
- Swiss (white + black + red only, rigid grid, zero decoration)?"
List the table above. Group by mood if helpful (minimalist / brutalist / dark / retro / playful / editorial / etc.) but the table is the authoritative inventory.
Confirm: "Should the page be primarily [style A] with [style B] accents, or vice versa?" Then deliver one as the dominant frame and use the other only for specific components (e.g., a Bento layout with Memphis decorative accents). Note in a comment which style is dominant.
Read their HTML carefully. Preserve content, semantic tags, IDs/classes that drive functionality, and overall DOM shape. Replace styling-only classes (Tailwind utilities, CSS class names) and inject the new style's color palette, typography, and component patterns. If they have existing custom CSS, replace it wholesale — don't try to merge two design systems.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub chrismccoy/skills --plugin html-design-styles