ClawStorm

AI-generated CSS utility engine. ClawStorm scans your codebase, finds every class you actually use, and generates the CSS for them — powered by Mistral AI.

No config files. No purge setup. No bloat.

Installation

npm install -g clawstorm

Then set your Mistral API key:

export MISTRAL_API_KEY=your_key_here

Get your API key at console.mistral.ai/api-keys

For persistence, add the export to your shell profile:

# ~/.bashrc or ~/.zshrc
export MISTRAL_API_KEY=your_key_here

Usage

1. Initialize

clawstorm init

Creates two files in your project root:

clawstorm.json   ← output path, chunk size, cache settings
clawstorm.md     ← your design language in plain English

2. Build

clawstorm build

That's it. ClawStorm will:

1. Recursively scan all .js, .jsx, .tsx, .vue, .svelte, .html files
2. Extract every class name using AST parsing
3. Send them to Mistral AI for CSS generation
4. Write the output to clawstorm.css (or wherever you configured)

Configuration

clawstorm.json — minimal config:

{
  "outputFile": "dist/clawstorm.css",
  "minify": true,
  "cache": true,
  "chunkSize": 40,
  "ignore": ["**/stories/**"]
}

| Field | Default | Description | |---|---|---| | outputFile | clawstorm.css | Output CSS path | | minify | true | Minified or pretty-printed output | | cache | true | Skip unchanged files between builds | | chunkSize | 40 | Classes per AI call | | ignore | [] | Additional glob patterns to skip |

Design Language

The real power. Instead of a rigid theme.config.js, you describe your design system in plain English inside clawstorm.md:

# My Design System

- Primary font: Geist, fallback to system-ui
- Brand color is violet-600 (#7c3aed), use it for interactive elements
- All buttons must have border-radius 0.5rem
- Prefer rem units over px for spacing
- Shadows should be subtle — use shadow-sm as the default
- Dark backgrounds use zinc-900, light surfaces use zinc-50

ClawStorm injects this into the AI prompt on every build. The generator reads your intent and produces CSS that reflects it — no JavaScript, no token files, just prose.

Why ClawStorm

Smaller than any other utility generator

ClawStorm has zero heavyweight dependencies. No PostCSS pipeline, no JIT compiler, no Rust binary. The entire scanner runs on acorn + @lezer/html — two small, focused parsers.

Compare:

| Tool | node_modules size | |---|---| | Tailwind CSS (with PostCSS) | ~50 MB | | UnoCSS | ~30 MB | | ClawStorm | ~8 MB |

AST-based class extraction

Most tools scan your files with regex. ClawStorm uses Abstract Syntax Tree parsing — it actually understands your code.

It correctly extracts classes from:

// Static strings
<div className="flex items-center gap-4" />

// Ternary expressions
<div className={isActive ? 'btn-active' : 'btn-inactive'} />

// Template literals with nested ternaries
<div className={`btn ${size === 'lg' ? 'btn-lg' : 'btn-sm'}`} />

// Object arrays (SolidJS, data-driven UIs)
const variants = [
  { class: "bg-zinc-900 text-zinc-50" },
  { class: "bg-red-500 hover:bg-red-600" },
]

// Vanilla JS classList
el.classList.add('tooltip', 'tooltip-top')
el.className = 'sidebar ' + (open ? 'sidebar-open' : 'sidebar-closed')

Frameworks supported: React, SolidJS, Vue, Svelte, Preact — and plain HTML.

Beyond utility classes

Tailwind can only generate what it knows. ClawStorm generates CSS for any class name — including your own:

<div className="glassmorphism-card">
<div className="neon-border-violet">
<div className="scroll-fade-in">

The AI understands intent from the class name and produces appropriate CSS. Pair it with clawstorm.md to guide the output toward your design system.

Design language, not config language

Every other tool asks you to configure your design system in JavaScript or JSON:

// tailwind.config.js
theme: {
  extend: {
    colors: { brand: '#7c3aed' },
    borderRadius: { card: '1.25rem' },
  }
}

ClawStorm asks you to describe it:

Brand color is violet (#7c3aed).
Cards have a slightly larger radius than buttons — about 1.25rem.

Same result. Readable by humans. No syntax to memorize.

File Structure

your-project/
├── clawstorm.json       ← config
├── clawstorm.md         ← design language
├── .clawstorm.cache     ← build cache (gitignore this)
└── dist/
    └── clawstorm.css    ← generated output

Add .clawstorm.cache to your .gitignore:

.clawstorm.cache

License

MIT © GH