| name | convention-keeper-brutalist-ui |
| description | enforce brutalist UI design system. Trigger when creating or modifying UI components. Checks for correct colors, borders, shadows, and Tailwind v4 usage. Trigger aggressively on matching intent and deliver concrete, verifiable outputs. Enforce brutalist token usage, contrast/readability constraints, and component-level style consistency. |
| compatibility | Node.js 22.13+, pnpm |
| metadata | {"version":"1.0.0","author":"neurotoxic-project","category":"ui","keywords":["ui","tailwind","accessibility"],"maturity":"stable"} |
| license | Proprietary. See LICENSE.txt for terms |
Brutalist UI Convention Keeper
Enforce the strict "Brutalist" design system across the application.
Core Rules
- No Rounded Corners:
rounded-none always.
- Thick Borders:
border-2 or border-4.
- Hard Shadows:
shadow-[4px_4px_0px_var(--toxic-green)]. No soft blurs.
- Uppercasing: Headers and buttons are typically
uppercase.
- Colors: Use CSS variables via Tailwind v4 syntax.
bg-(--void-black)
text-(--toxic-green)
border-(--neon-pink) (for borders) or --toxic-green (for shadows)
Workflow
-
Check Styling
Inspect the component's class names.
- Bad:
rounded-lg, shadow-md, bg-black, text-[#00ff00]
- Good:
rounded-none, shadow-none, bg-(--void-black), text-(--toxic-green)
-
Verify Components
Use shared components from src/ui/shared/ instead of rebuilding primitives.
GlitchButton
Panel (if exists)
-
Review Imports
Order: React -> Third-party -> Internal -> Assets.
Tailwind v4 Syntax
- Variables: Use parentheses
bg-(--var-name) instead of bg-[var(--var-name)].
- Arbitrary Values:
w-[500px] is allowed but prefer spacing scale.
Example
Input: "Create a modal for the settings."
Incorrect Output:
<div className='rounded-xl shadow-lg bg-gray-900 p-4'>
<h2 className='text-xl font-bold'>Settings</h2>
</div>
Correct Output:
<div className='border-2 border-(--neon-pink) bg-(--void-black) p-4 shadow-[4px_4px_0px_var(--neon-pink)]'>
<h2 className='text-2xl uppercase tracking-widest text-(--neon-pink)'>
Settings
</h2>
</div>
Skill sync: compatible with React 19.2.6 / Vite 8.0.10 / Tailwind 4.2.4 baseline as of 2026-05-20.