Anteater

                    ..:::▓▓▓▓▓▓:::..
                .:▓██████████████████▓:.
             .▓█████████████████████████▓:.
           :▓██████████████████████████████▓.
         :██████████████████████████████▓:███▓.
       .▓██████████████████████████████████████▓.
      .████████████████████████:.:███████▓▓▓█████:
     :████████████████:.█████▓.▓. █████▓..   .▓███▓
    .████████████████.  :████.██  :███▓.█:     .:██▓.
   .████████████████:   .███:▓█▓   ███.▓█:       .██▓
   .:::::::::::::::.     .:: .::   .:: ::.        .::

Design system generator that ships tokens + AI context. Add shadcn components on-demand that automatically integrate with your design system.

What It Does

1. Generates a semantic token system from brand colors (OKLCH-based, WCAG-compliant)
2. Provides AI agent context so Claude Code understands your design system
3. Adds shadcn components on-demand via anteater add
4. Auto-transforms components to use your semantic tokens

The Approach

Traditional generators either:

• Ship raw tokens that need manual wiring
• Ship bloated component libraries you'll never fully use

Anteater ships just what you need:

# Generate token system + AI context
npx anteater my-design-system --primary "#1E3A5F"

# Add components as needed (inside project)
cd my-design-system
npx anteater add button card dialog

Components are fetched from shadcn (battle-tested, accessible) and automatically transformed to use your semantic tokens.

Usage

Generate a New Project

# Interactive mode
npx anteater

# With arguments
npx anteater my-design-system --primary "#1E3A5F"

# Non-interactive with defaults
npx anteater -y my-ds

Add Components

From inside your generated project:

# Add single component
npx anteater add button

# Add multiple components
npx anteater add button card dialog input

# See transformation details
npx anteater add button --verbose

Components are automatically transformed from shadcn's default tokens to your semantic tokens:

| shadcn Token | Your Token | |--------------|------------| | bg-background | bg-page | | bg-primary | bg-interactive-primary | | text-foreground | text-primary | | text-muted-foreground | text-muted | | border-border | border-default | | ring-ring | ring-focus |

What Gets Generated

your-design-system/
├── src/
│   ├── components/ui/        # Empty - add via 'anteater add'
│   ├── lib/utils.ts          # cn() utility for Tailwind merging
│   ├── constants/            # designTokens.ts (TypeScript exports)
│   └── styles/
│       ├── tokens.css        # CSS custom properties
│       └── base.css          # Foundation styles
├── .claude/                  # AI agent context
│   ├── skills/               # 49 reusable workflows
│   ├── hookify.*.local.md    # 40+ validation rules
│   └── rules/                # Token constraints
├── .storybook/               # Storybook config
├── components.json           # shadcn CLI config
├── tsconfig.json             # TypeScript with @/* paths
├── tailwind-preset.js        # Tailwind preset with tokens
└── .anteater.json            # Project config

Token System

Anteater generates a two-tier token system:

Primitives (raw values):

--color-primary-50: oklch(0.97 0.01 240);
--color-primary-500: oklch(0.55 0.15 240);
--color-primary-900: oklch(0.25 0.08 240);

Semantic Aliases (what you use):

--color-interactive-primary: var(--color-primary-500);
--color-interactive-primaryHover: var(--color-primary-600);
--color-text-primary: var(--color-neutral-900);
--color-bg-page: var(--color-neutral-50);

AI Agent System

The .claude/ directory contains:

Skills (49 workflows)

Reusable prompts for common tasks:

• component-create — Build new component with proper tokens
• token-audit — Verify token usage across components
• contrast-check — Validate color combinations
• story-full — Generate complete Storybook story

Hookify Rules (40+ validators)

Automated checks when AI writes code:

• color-enforcement — No raw hex values, only tokens
• no-arbitrary-values — No Tailwind arbitrary values
• accessibility-enforcement — ARIA, focus states, semantic HTML

Tech Stack

• React 19 — Component framework
• Tailwind CSS v4 — Utility styling via tokens
• shadcn/ui — Component source (fetched on-demand)
• Radix UI — Accessible primitives (installed per-component)
• CVA — Variant management
• Storybook 10 — Component development
• OKLCH — Perceptually uniform color scales

Philosophy

Lean by default. Don't ship components you don't need. Generate tokens and AI context, add components when you actually need them.

Semantic tokens over primitives. Components use bg-interactive-primary, not bg-primary-500. Change the mapping once, all components update.

AI-first development. Claude Code gets structured context about your design system — token values, contrast ratios, component patterns. It doesn't guess.

MIT License