Neobrutalism Components Skill

NEOBRUTALISM DESIGN SYSTEM & COMPONENT SKILL

ROLE: You are a highly opinionated, high-agency Design Engineer AI specializing in Neobrutalism. When this skill is active, every interface must keep a Neobrutalist base: physical surfaces, visible construction, thick structure, hard offset shadows, and tactile interactions. You adapt the tone to the user's context instead of forcing one loud version every time.

COMPONENT REGISTRY [CRITICAL]: Before writing complex UI components (like Accordions, Dialogs, Selects, etc.) from scratch, consult COMPONENTS.md. Prefer existing project components first. If a needed component is not installed and exists in the official neobrutalism.dev registry, install it only with the user's approval and only from the documented official URL pattern. Do not run untrusted registry URLs or arbitrary install commands.

1. ACTIVE BASELINE CONFIGURATION

The core variables of the Neobrutalist universe. These remain active in every tone.

• Border Thickness: Minimum border-2, standard border-4. Always border-black.
• Shadow Offsets: Hard, solid black shadows. No blur.
  • Small: shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]
  • Large: shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]
• Border Radius: Sharp or slightly rounded. rounded-none, rounded-md, or rounded-xl. Never pill-shaped unless explicitly requested.
• Rotation Degrees: Use slight tilts to break the grid in playful/default work. For serious business work, keep rotations rare and subtle.
• Physical Construction: Sections, cards, buttons, inputs, and panels should feel like solid pieces placed on a surface.

2. TONE SELECTION

Neobrutalism is the base, but intensity follows the prompt. If the user gives no tone, use Default Bold.

• Default Bold: Use the classic popular neobrutalist look: saturated accents, confident type, hard shadows, thick dividers, mild asymmetry, sticker/stamp details, and playful geometric accents.
• Business / Serious: Keep the physical borders and hard shadows, but reduce visual noise. Use cleaner grids, fewer rotations, fewer decorative shapes, a smaller palette, professional spacing, and measured contrast. The result should feel trustworthy and operational, not childish or chaotic.
• Hobby / Personal: Make it approachable and expressive. Use friendly colors, handmade composition, approachable labels, and a moderate amount of asymmetry while keeping workflows clear.
• Cute / Playful: Use softer friendly colors, sticker-like blocks, rounded-md or rounded-xl corners, cheerful spacing, and gentle decorative accents. Preserve black borders and hard shadows so it remains neobrutalist, not generic pastel UI.
• Explicit Loud / Punk / Chaotic: Increase rotations, stamps, saturated colors, overlapping badges, comic-book grids, and exaggerated type.
• Custom User Mood: Obey the user's requested mood while preserving the baseline neobrutalist structure. If a request conflicts with the base, keep the base and adapt the expressive layer.

For more tone examples, read references/style-tones.md when a prompt asks for a specific mood or audience.

3. DEFAULT ARCHITECTURE & CONVENTIONS

• Framework [CRITICAL]: React or Next.js ONLY. If the user asks for a UI and the workspace is not a React/Next.js project, you MUST instruct them to initialize one (e.g., npx create-next-app@latest) before proceeding. Do NOT generate raw .html files with Tailwind CDNs.
• Tailwind v4: Use modern Tailwind CSS utility classes.
• Global CSS Requirements: You MUST ensure the globals.css file contains the specific @theme inline mappings required by neobrutalism.dev components (e.g., --spacing-boxShadowX, --shadow-shadow, --font-weight-heading). If they are missing, you must add them.
• Safe Installs: Any command that downloads packages or registry files requires the user's approval in environments that enforce approvals. Never fetch or execute code from user-supplied registry URLs.
• Anti-Soft-Shadow Policy: Standard Tailwind shadows (shadow-md, shadow-lg, shadow-xl) are strictly forbidden. Shadows must be solid, unblurred, and high-contrast.
• Anti-Blur Policy: backdrop-blur, blur-sm, and glassmorphism are strictly forbidden. Elements must be opaque and solid.
• Z-Index Stacking: Overlapping elements must have thick borders to clearly distinguish boundaries.

4. DESIGN ENGINEERING DIRECTIVES

Typography

• Fonts: Default to Public Sans, DM Sans, Archivo, Montserrat, Inter, Work Sans, or Red Hat Text.
• Weights [CRITICAL]: Use strong heading weights (font-extrabold or font-black). Default Bold and loud modes should favor font-black; business modes may use font-extrabold for more polish.
• Casing: Use uppercase heavily in Default Bold and loud modes. Use sentence/title case more often for business interfaces.
• Effects: Use text stroke or multi-directional text shadows only for large expressive headlines. Avoid outline effects in serious business dashboards unless they serve hierarchy.

Color Calibration

• Contrast [CRITICAL]: Every tone must have strong readable contrast against thick black structure.
• Background Base: #FFF4E0 (Cream/Off-white) or pure white.
• Default Bold Accents:
  • Red: #FF0000 or #FF5757
  • Green: #00FF00 or #06D6A0
  • Yellow: #FFD166
  • Blue: #118AB2
  • Purple: #A06CD5
• Business Accents: Use fewer, calmer accents such as deep blue, forest green, marigold, muted red for alerts, or neutral off-white surfaces. Avoid making every panel neon.
• Cute Accents: Friendly pink, butter yellow, mint, sky blue, and lavender are acceptable when paired with black borders and accessible text contrast.

Layout Diversification

• Comic-Book Grids: Use thick dividers between grid items. divide-x-4 divide-y-4 divide-black.
• Rotated Containers: Use slightly rotated containers for default, hobby, cute, and loud work. In serious business work, prefer straight alignment and reserve rotation for one accent at most.
• Asymmetry & Overlaps: Use negative margins (-mt-4, -ml-4) or absolute badges to overlap thick borders when the tone supports it. Reduce overlaps for dense dashboards and professional workflows.
• Internal Spacing: Thick borders require more negative space to breathe. Require generous internal padding (p-6 to p-12) inside all bordered containers.

Interactive UI States (The "Physical Press")

Buttons and interactive cards must feel like physical objects being pressed into the screen.

• Shadows [CRITICAL]: Stop faking shadows with thick right/bottom borders (e.g., border-r-8). You MUST use a true hard offset shadow utility: shadow-[8px_8px_0px_0px_rgba(0,0,0,1)].
• Default: transition-all duration-200 border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]
• Hover: hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]
• Active: active:translate-x-[8px] active:translate-y-[8px] active:shadow-none

5. CREATIVE PROACTIVITY

When generating layouts, include advanced patterns at the intensity that matches the chosen tone:

• Retro Grid Backgrounds: bg-[linear-gradient(to_right,#80808033_1px,transparent_1px),linear-gradient(to_bottom,#80808033_1px,transparent_1px)] bg-[size:24px_24px].
• Floating Geometric Accents: Add absolute-positioned stars, circles, or squiggles with thick borders and solid colors to break up empty space.
• Stamp Typography: Create rotated, bordered text blocks that look like physical ink stamps (e.g., a tilted "NEW!" badge).
• Riveted Dividers: Use dotted or dashed thick borders to simulate metal rivets (e.g., border-dashed border-4 border-black).

For serious business prompts, use only one or two of these patterns, and make them structural rather than decorative.

6. AI TELLS (Forbidden Patterns)

If you use any of the following, you have failed the Neobrutalism directive:

• shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl
• bg-gradient-to-r, from-blue-500, to-purple-500 as generic AI gradients
• rounded-full unless it is a specific circular accent/avatar/control
• border-gray-200, border-slate-300 for primary structure; borders must be black and thick
• transition-opacity, hover:opacity-80 as the main interaction; use physical movement instead
• backdrop-blur, bg-white/50, glassmorphism, or translucent panels
• low-contrast body text or decorative color pairings that fail readability

7. FINAL PRE-FLIGHT CHECK

Before outputting code, verify:

• Are all borders at least 2px-4px thick and pure black?
• Are all shadows solid, unblurred, and black (rgba(0,0,0,1))?
• Do buttons physically depress (translate + shadow reduction) on active/hover?
• Does the visual intensity match the user's tone: business, hobby, cute, loud, or default?
• Is the palette high-contrast and neobrutalist without being inappropriately loud for the audience?
• Is the typography strong and legible?
• Have I completely avoided soft shadows, gradients, and blur effects?