Using BrutxUI with AI

Neo-Brutalist Styling Rules for AI

When instructing an AI to style components inside a BrutxUI project, emphasize the following visual design variables:

• Thick Outlines: Always use border-3 (3px thickness) and the global border color (e.g. border-black dark:border-white or border-brutal).
• Rigid Offsets: Hard offset dropshadows are applied with shadow-brutal (which resolves to 4px 4px 0px 0px #000). Avoid blur effects (do NOT use standard shadow-md or shadow-lg).
• Flat Angles: Set rounded-none or use a strict global theme token like rounded-brutal (defaulting to 0px corners).
• Tangible Press Effects: Standard active elements translate downwards and to the right on click to mimic physical buttons: active:translate-x-[2px] active:translate-y-[2px] active:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] transition-all.
• High-Contrast Focus: Maintain high visibility. Focus rings should use heavy outlines: focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2.

Blueprint for a BrutxUI Component

Every BrutxUI component follows a standard React + Tailwind CSS + Radix UI primitive composability structure. Share this blueprint template with your AI assistant:

import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils'; // Class merge utility

const cardVariants = cva(
  'border-3 border-black dark:border-white transition-all bg-white dark:bg-gray-950',
  {
    variants: {
      variant: {
        default: 'shadow-brutal dark:shadow-brutal-white',
        flat: '',
        hoverable: 'hover:-translate-y-0.5 hover:-translate-x-0.5 hover:shadow-brutal-lg dark:hover:shadow-brutal-lg-white'
      },
      padding: {
        none: '',
        default: 'p-6',
        large: 'p-8'
      }
    },
    defaultVariants: {
      variant: 'default',
      padding: 'default'
    }
  }
);

export interface CardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof cardVariants> {}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant, padding, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(cardVariants({ variant, padding }), className)}
      {...props}
    />
  )
);
Card.displayName = 'Card';

Anti-Patterns to Avoid (What NOT to do)

Ensure your AI assistant does not emit these anti-patterns, which violate our core brutalist visual language:

Custom Blocks & Registry Metadata

When creating custom landing page blocks (e.g. saas-pricing or dashboard-stats), they must be registered in the component directory manifest so they can be parsed by our registry compiler and validator scripts.

{
  "name": "my-block",
  "type": "registry:ui",
  "dependencies": ["lucide-react"],
  "registryDependencies": ["button", "card"],
  "files": [
    {
      "path": "ui/my-block.tsx",
      "type": "registry:ui"
    }
  ]
}

pnpm --filter brutx-registry build
pnpm --filter brutx-registry validate

Prompt Templates for AI Coding

Copy-paste these context prompts directly into your AI assistant chat box to guarantee beautiful, compliant outputs.