neubrutalism
Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.
Best use case
neubrutalism is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.
Teams using neubrutalism should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/neubrutalism/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How neubrutalism Compares
| Feature / Agent | neubrutalism | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Neubrutalism Design Spec
## Core Principles
1. **Thick Borders** — Bold `3–5px solid` black outlines on all elements
2. **Offset Solid Shadows** — Hard-edge `box-shadow` with zero blur (e.g. `5px 5px 0 #000`)
3. **High Saturation Colors** — Vivid, punchy fills: pinks, yellows, blues, greens
4. **Minimal Radius** — `0–8px` border-radius; sharp or barely rounded corners
5. **Flat Aesthetic** — No gradients, no blur, no transparency
## CSS Tokens
Reference: [references/tokens.css](references/tokens.css)
```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);
}
```
## Component Examples
### Card
```css
.nb-card {
background: var(--nb-white);
border: var(--nb-border-thick);
border-radius: var(--nb-radius);
box-shadow: var(--nb-shadow);
padding: 1.5rem;
}
```
### Button
```css
.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;
}
```
### Navbar
```css
.nb-nav {
background: var(--nb-bg);
border-bottom: var(--nb-border-thick);
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 100;
}
```
### Input
```css
.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);
}
```
### Badge
```css
.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;
}
```
## Typography
- Use bold, geometric sans-serif fonts (Space Grotesk, Inter, etc.)
- Headings: `font-weight: 700`, `letter-spacing: -0.02em`
- Body: `font-weight: 500`
- Uppercase sparingly for labels/badges
```css
h1,
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);
}
```
## Accessibility Notes
- Thick borders provide strong visual boundaries — good for low-vision users
- Ensure color contrast ≥ 4.5:1 for text on colored backgrounds
- Active/hover states use `transform` shifts — provide `prefers-reduced-motion` fallback
```css
@media (prefers-reduced-motion: reduce) {
.nb-btn:hover,
.nb-btn:active {
transform: none;
}
}
```Related Skills
write-a-skill
Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.
web-search
Web search via DuckDuckGo. Use when the user needs to look up current information online.
web-fetch
Fetch a web page and extract readable text content. Use when user needs to retrieve or read a web page.
rust-workspace-bootstrap
Scaffold a production-ready Rust workspace with knope changesets, devenv, and GitHub Actions CI/release workflows. Use when starting a new Rust project or monorepo.
request-refactor-plan
Create a detailed refactor plan with tiny commits via user interview, then file it as a GitHub issue. Use when user wants to plan a refactor, create a refactoring RFC, or break a refactor into safe incremental steps.
quick-setup
Detect project type and generate .pi/ configuration. Use when setting up pi for a new project or when user asks to initialize pi config.
pwsh
PowerShell syntax reference — cmdlets, objects, pipelines, filtering, comparison operators, and Bash-to-PowerShell command equivalents
nushell
Nushell syntax reference for shell commands — variables, pipelines, tables, custom commands, control flow, Bash-to-Nu equivalents, and common gotchas
liquid-glass
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.
improve-codebase-architecture
Explore a codebase to find opportunities for architectural improvement, focusing on making the codebase more testable by deepening shallow modules. Use when user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more AI-navigable.
grill-me
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
glassmorphism
Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.