aio-neobrutalismlisted

# Neobrutalism Design System Bootstrapper ## Objective Workflow ### Phase 1: DETECT — Identify Project Tech Stack Scan the project root to determine the web framework and styling approach: ```bash # Check for package.json, framework config files, CSS preprocessors ls package.json tsconfig.json vite.config.* next.config.* nuxt.config.* tailwind.config.* postcss.config.* 2>/dev/null ``` Identify: - **Framework**: React, Vue, Svelte, Next.js, Nuxt, Astro, plain HTML - **Styling**: Tailwind CSS, CSS Modules, styled-components, Sass/Less, plain CSS - **Component library**: shadcn/ui, Radix, MUI, Vuetify, or none - **Entry points**: main CSS file, layout files, global styles location ### Phase 2: GENERATE — Create CSS Tokens and Base Styles Based on detected stack, generate the appropriate token format: - **Tailwind**: Extend `theme` in tailwind config with neobrutalism tokens (borders, shadows, colors) - **CSS Variables**: Generate `:root` block with all design tokens - **styled-components/CSS-in-JS**: Generate a theme object - **Plain CSS**: Copy [code/base.css](code/base.css) directly Always include the neobrutalism fonts: ```html <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" /> ``` ### Phase 3: APPLY — Transform Existing UI Components 1. List all UI component files in the project (buttons, cards, inputs, modals, nav) 2. For each component, apply