AI Context Packs Explained

AI context packs are the missing link between your design system and AI code generation tools. They are structured files that describe your components, tokens, and conventions in formats that AI tools can read and act on.

This post explains what context packs are, what formats exist, and how to use them.

The four formats

A complete context pack includes four files, each targeting a different AI tool or workflow:

1. .cursorrules

Natural language instructions that Cursor reads from your project root. This file tells Cursor about your design principles, available components, color system, and composition patterns. It is prose, not code — written for an LLM to understand.

# n3wth Design System

## Principles
- Flat design: no shadows or gradients unless specified
- Use design system components over custom markup
- CSS variables for all colors and spacing

## Available Components
- Button: variant (primary, secondary, ghost, glass), size (sm, md, lg)
- Card: variant (default, glass, interactive)
- Input: inputSize (sm, md, lg), variant (default, glass)
...

2. CLAUDE.md

A structured reference document that Claude Code reads automatically from your project root. More technical than .cursorrules — includes prop tables, code snippets, and exact API signatures.

## Button

Props:
- variant: "primary" | "secondary" | "ghost" | "glass"
- size: "sm" | "md" | "lg"
- disabled: boolean
- loading: boolean

Usage:
<Button variant="primary" size="lg">Get Started</Button>

3. MCP server config

An MCP (Model Context Protocol) server configuration that gives AI tools live access to your component registry. The tool can look up components, read their source, and check for updates during a session.

{
  "mcpServers": {
    "n3wth-kit": {
      "command": "npx",
      "args": ["-y", "shadcn@latest", "registry:mcp"],
      "env": {
        "REGISTRY_URL": "https://kit.newth.ai/r/registry.json"
      }
    }
  }
}

4. components.json

A structured JSON file with every component's props, types, defaults, usage examples, and accessibility notes. This is the most machine-readable format — any AI tool or script can consume it.

How AI tools use them

Each AI tool has a preferred context format:

• Cursor reads .cursorrules from your project root automatically
• Claude Code reads CLAUDE.md from your project root automatically
• v0 and Lovable use the registry URL directly in prompts
• Windsurf reads .cursorrules similar to Cursor
• MCP-compatible tools connect to the MCP server for live registry access

Getting started

The simplest way to add context packs to your project is to download them from kit:

# For Cursor
curl -o .cursorrules https://kit.newth.ai/ai/.cursorrules

# For Claude Code
curl -o CLAUDE.md https://kit.newth.ai/ai/CLAUDE.md

Once the files are in your project, AI tools pick them up automatically. No configuration needed beyond placing the files.