// Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.
Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows.
Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.
Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.
Search and query up-to-date documentation for any programming library via Context7 API. Use when you need current docs, code examples, or API references for libraries and frameworks.
Fetch a web page and extract readable text content. Use when user needs to retrieve or read a web page.
Web search via DuckDuckGo. Use when the user needs to look up current information online.
| name | neubrutalism |
| description | Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius. |
| version | 1.0.0 |
| tags | ["design","css","ui","neubrutalism","brutalism"] |
3–5px solid black outlines on all elementsbox-shadow with zero blur (e.g. 5px 5px 0 #000)0–8px border-radius; sharp or barely rounded cornersReference: references/tokens.css
@import 'references/tokens.css';
.nb-card {
background: var(--nb-yellow);
border: var(--nb-border-thick);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow);
}
.nb-card {
background: var(--nb-white);
border: var(--nb-border-thick);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow);
padding: 1.5rem;
}
.nb-btn {
background: var(--nb-yellow);
border: var(--nb-border);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow-sm);
padding: 0.6rem 1.4rem;
font-family: var(--nb-font);
font-weight: var(--nb-font-weight);
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
}
.nb-btn:hover {
transform: translate(-2px, -2px);
box-shadow: var(--nb-shadow);
}
.nb-btn:active {
transform: translate(3px, 3px);
box-shadow: none;
}
.nb-nav {
background: var(--nb-bg);
border-bottom: var(--nb-border-thick);
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 100;
}
.nb-input {
background: var(--nb-white);
border: var(--nb-border);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow-sm);
padding: 0.6rem 1rem;
font-family: var(--nb-font);
font-weight: var(--nb-font-weight-body);
}
.nb-input:focus {
outline: none;
box-shadow: var(--nb-shadow);
}
.nb-badge {
background: var(--nb-pink);
border: var(--nb-border);
border-radius: var(--nb-radius);
padding: 0.2rem 0.8rem;
font-family: var(--nb-font);
font-weight: var(--nb-font-weight);
font-size: 0.85rem;
}
font-weight: 700, letter-spacing: -0.02emfont-weight: 500h1, h2, h3 {
font-family: var(--nb-font-heading);
font-weight: var(--nb-font-weight);
letter-spacing: var(--nb-letter-spacing);
}
body {
font-family: var(--nb-font);
font-weight: var(--nb-font-weight-body);
}
transform shifts — provide prefers-reduced-motion fallback@media (prefers-reduced-motion: reduce) {
.nb-btn:hover, .nb-btn:active {
transform: none;
}
}