What is neubrutalism?

A visual design guide for building bold interfaces with thick black borders, hard-edged shadows, vivid colors, and mostly square corners.

It helps create cards, buttons, and other user-interface elements in a neubrutalist style.

It gives you consistent style rules and reusable CSS patterns when you want this distinctive look without designing every component from scratch.

neubrutalism — Skill for Claude Code by cass-2003/local-workflow-skill

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add cass-2003/local-workflow-skill --skill neubrutalism

Clone the repo

git clone --depth 1 https://github.com/cass-2003/local-workflow-skill

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/cass-2003/local-workflow-skill/neubrutalism/github.svg)](https://agentmods.dev/skills/cass-2003/local-workflow-skill/neubrutalism)

Your own site

<a href="https://agentmods.dev/skills/cass-2003/local-workflow-skill/neubrutalism"><img src="https://agentmods.dev/badge/skills/cass-2003/local-workflow-skill/neubrutalism/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/cass-2003/local-workflow-skill/neubrutalism"><img src="https://agentmods.dev/badge/skills/cass-2003/local-workflow-skill/neubrutalism.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 37 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 941 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin 100% copy Near-identical to another mod in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00037	$0.00941
Opus 5.5	$0.00015	$0.00376
Sonnet 5.5	$0.00007	$0.00188
Haiku 4.5	$0.00004	$0.00094

Measured 2mo ago against content hash 3d27f6c1f950, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

neubrutalism scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

100% identical to neubrutalism — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

skills/engineering-core/codex/domains/frontend-design/neubrutalism/SKILL.md · 144 lines

How it starts

The opening of the file, as written. The whole thing — 144 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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

@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

.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

.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

.nb-nav {
  background: var(--nb-bg);
  border-bottom: var(--nb-border-thick);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

Input

.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

.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;
}

Read the full file on GitHub · 144 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

references/tokens.css 1.0 KB

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 144 lines · 37 tokens per session scan A 3d27f6c1f950

Subscribe to this mod's changes

neubrutalism is a skill published in the GitHub repository cass-2003/local-workflow-skill (12 stars, last pushed 4mo ago), licensed MIT. It adds 37 tokens to every session and 941 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 100% identical to neubrutalism, differing in 0 lines, and is treated as a copy.

CSS and styling Design and UX Frontend

neubrutalism next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
neubrutalismcass-2003/local-workflow-skill	Skill	12	4mo ago	MIT	A	37	Claude Code
anti-slop-designsickn33/agentic-awesome-skills	Skill	49k	yesterday	MIT	A	34	Claude Code
chakra-ui-builderchakra-ui/chakra-ui	Skill	41k	yesterday	MIT	A	214	Claude Code, Codex
visual-ralphYeachan-Heo/oh-my-codex	Skill	34k	3d ago	MIT	A	52	Codex
open-design-setupcompozy/compozy	Skill	2.8k	yesterday	MIT	A	67	Claude Code, Codex
frontend-visual-qadaymade/claude-code-skills	Skill	1.5k	yesterday	MIT	A	125	Claude Code, Codex
prototype-webnexu-io/html-anything	Skill	9.4k	24d ago	Apache-2.0	A	24	Claude Code, Codex