aio-neobrutalism

This skill should be used when the user asks to "apply neobrutalism", "create brutalist design", "add bold borders", "use hard shadows", or mentions neobrutalism, brutalist, bold design, high-contrast aesthetic. Provides neobrutalism design patterns with bold borders, hard shadows, vibrant colors, and no gradients.

aiocean 3 1 Updated 2mo ago

Resources

GitHub

Install

npx skillscat add aiocean/claude-plugins/aio-neobrutalism

Install via the SkillsCat registry.

SKILL.md

Neobrutalism Design System

Quick Setup

1. Add Fonts to `index.html`

<head>
  <!-- Neobrutalism fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Bricolage+Grotesque:wght@200..800&display=swap"
    rel="stylesheet"
  />
</head>

2. Copy Base CSS

Copy code/base.css to your project's src/style.css.

3. Copy UI Components

Copy components from code/ directory as needed (button, card, input, etc.).

The 6 Rules

Thick black borders: 2-4px solid #000
Hard shadows: 4px 4px 0 #000 (NEVER blur)
Sharp corners: 0px border-radius
Vibrant colors: 2-3 accent colors max, high contrast
Bold typography: weights 700-900
No gradients: solid colors only

Core Tokens

/* Borders */
border: 2px solid #000; /* inputs */
border: 3px solid #000; /* cards, containers */

/* Shadows */
box-shadow: 4px 4px 0 #000; /* standard */
box-shadow: 8px 8px 0 #000; /* modals */

/* Timing */
transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);

Two Interaction Patterns

Press-Down (Buttons)

/* Default: elevated */
box-shadow: 4px 4px 0 #000;

/* Hover: lands where shadow was */
hover {
  transform: translate(4px, 4px);
  box-shadow: none;
  background: #000;
  color: #fff;
}

/* Active: tactile feedback */
active {
  scale: 0.95;
}

Elevate-Up (Navigation)

/* Default: flat */
border: transparent;
box-shadow: none;

/* Hover: lifts up */
hover {
  box-shadow: 4px 4px 0 #000;
  transform: translate(-1px, -1px);
  border-color: #000;
}

Anti-Patterns

Blurred shadows
Gradients
Excessive border-radius (>30px)
More than 3 accent colors
Transitions >300ms
Missing hover states on interactive elements
Missing cursor: pointer on clickable elements

Component References

Interactive

Button - variants, sizes, states
Input - form inputs, focus
Select - dropdowns, menus
Checkbox - checkboxes, switches

Containers

Card - static vs clickable
Dialog - modals
Sheet - slide-over panels
Tabs - tab navigation

Feedback

Badge - tags, status
Alert - inline notifications
Toast - temporary notifications

Supporting

Popover - floating content
Table - data tables
Label - typography

System

Base CSS - complete stylesheet (copy to project)
CSS Variables - complete tokens
Colors - palette reference
Interaction Patterns - detailed patterns
Affordances - clickable vs static
Decorations - sketchy effects

Resources

Research Report - comprehensive research
Neobrutalism.dev - ShadCN components
NN/G Article - definition

aio-neobrutalism

Resources

Install

Neobrutalism Design System

Quick Setup

1. Add Fonts to index.html

2. Copy Base CSS

3. Copy UI Components

The 6 Rules

Core Tokens

Two Interaction Patterns

Press-Down (Buttons)

Elevate-Up (Navigation)

Anti-Patterns

Component References

Interactive

Containers

Feedback

Supporting

System

Resources

Categories

Install

Recommended Skills

1. Add Fonts to `index.html`