Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Neubrutalism Design Spec — measured AI agent skill | DecimalAI

fengshao1227/neubrutalism

NewSkillScoreMaintained

Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.

by fengshao1227

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

decimalai skills pull fengshao1227-neubrutalism

Get this skill — curl · raw file

curl -fsSL https://app.decimal.ai/s/fengshao1227-neubrutalism/SKILL.md

Raw file: /s/fengshao1227-neubrutalism/SKILL.md ↗ · machine-readable summary at /s/fengshao1227-neubrutalism.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

24 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 19h ago

Yes — +58% lift+22% tokens0% turns88% of whole cases pass with skill (21/24)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	10%	0%
case-02	✗→✓	▲ Improved	14%	0%
case-05	✗→✓	▲ Improved	53%	0%
case-06	✗→✓	▲ Improved	118%	0%
case-07	✗→✓	▲ Improved	30%	0%

Showing 5 of 24 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

fengshao1227 / ccg-workflow

templates/skills/domains/frontend-design/neubrutalism/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1Bundled 1 file

Skill contents

references/

SKILL.md

Neubrutalism Design Spec

Core Principles

Thick Borders — Bold 3–5px solid black outlines on all elements
Offset Solid Shadows — Hard-edge box-shadow with zero blur (e.g. 5px 5px 0 #000)
High Saturation Colors — Vivid, punchy fills: pinks, yellows, blues, greens
Minimal Radius — 0–8px border-radius; sharp or barely rounded corners
Flat Aesthetic — No gradients, no blur, no transparency

CSS Tokens

Reference: 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;
  }
}

Want to see if fengshao1227/neubrutalism would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.