convention-keeper-brutalist-ui

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.

Brutalist UI Convention Keeper

Enforce the strict "Brutalist" design system across the application.

Core Rules

1. No Rounded Corners: rounded-none always.
2. Thick Borders: border-2 or border-4.
3. Hard Shadows: shadow-[4px_4px_0px_var(--color-toxic-green)]. No soft blurs.
4. Uppercasing: Headers and buttons are typically uppercase.
5. Colors: Use @theme native token utilities from src/index.css.
   • bg-void-black
   • text-toxic-green
   • border-blood-red (for borders) or var(--color-toxic-green) (for inline shadows)
   • Keep all color tokens in CSS variables / CSS Variables; never hardcode colors.

Workflow

1. 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

2. Verify Components Use shared components from src/ui/shared/ instead of rebuilding primitives.