Slipstream UI - The AI-first React Component Library

Every Slipstream UI component ships a machine-readable manifest that tells AI agents exactly how to use it.

What is COMPONENT_MANIFEST?

The COMPONENT_MANIFEST is a JSON file that accompanies every component. It contains structured information about the component that AI agents can read to understand:

Component metadata (id, name, tier)
Design intent and purpose
Full prop schema with types, defaults, and constraints
Usage examples (good and anti-patterns)
Accessibility requirements
Content guidelines for AI text generation
Composition rules with other components

Why COMPONENT_MANIFEST?

Traditional component libraries rely on source code and documentation. AI agents reading source code often:

Misunderstand component intent
Generate incorrect prop combinations
Create anti-patterns that break the design system
Miss accessibility requirements
Generate inappropriate content

COMPONENT_MANIFEST solves this by providing a contract that explicitly states how the component should be used.

Manifest Structure

{
  "id": "button",
  "name": "Button",
  "tier": "atom",
  "description": "A clickable button component...",
  "designIntent": "The Button component is a fundamental...",
  "props": [
    {
      "name": "variant",
      "type": "'default' | 'destructive' | ...",
      "defaultValue": "default",
      "required": false,
      "description": "Visual style variant",
      "enum": ["default", "destructive", ...],
      "examples": ["default", "destructive"]
    }
  ],
  "examples": [
    {
      "title": "Primary action button",
      "code": "<Button>Click me</Button>",
      "description": "Default variant for primary actions"
    }
  ],
  "antiPatterns": [
    {
      "title": "Don't use for navigation alone",
      "code": "// Avoid: Button for simple navigation...",
      "description": "Buttons should trigger actions, not just navigate"
    }
  ],
  "accessibility": [
    {
      "feature": "Keyboard navigation",
      "implementation": "Button is natively focusable...",
      "userRequirements": "Ensure visible focus indicator"
    }
  ],
  "contentGuidelines": [
    {
      "contentType": "Button text",
      "guidelines": [
        "Use action verbs (Submit, Save, Delete)",
        "Keep text short and concise",
        "Be specific about what will happen"
      ],
      "goodExamples": ["Submit form", "Save changes"],
      "badExamples": ["Click here", "OK"]
    }
  ],
  "compositionRules": [
    {
      "component": "Icon",
      "relationship": "Buttons can contain icons...",
      "example": "<Button><Icon />Text</Button>"
    }
  ],
  "package": "@slipstream-ui/core",
  "importPath": "@slipstream-ui/core",
  "version": "0.0.1"
}

Key Sections

Props Schema

The props section provides complete type information for every prop, including:

Type definitions with TypeScript syntax
Default values
Whether the prop is required
Clear descriptions
Allowed values for enums
Example values

Examples & Anti-Patterns

Each manifest includes both good usage examples and anti-patterns to avoid. This helps AI agents:

Generate correct usage patterns
Avoid common mistakes
Understand the component's intended use cases
Learn from best practices

Accessibility Requirements

Accessibility is built into every manifest with:

Keyboard navigation requirements
Screen reader support details
Focus management guidelines
Color contrast requirements
Form validation accessibility

Content Guidelines

For components that display text (buttons, inputs, messages), the manifest includes:

Guidelines for AI when generating text content
Good examples of appropriate content
Bad examples to avoid
Tone and style recommendations

Composition Rules

Manifests specify how components work together:

Related components that compose well
Relationship descriptions
Example compositions
Patterns to follow

For AI Agents

AI agents can access COMPONENT_MANIFEST files through:

MCP Server

The Slipstream UI MCP server provides tools to query manifests:

# List all components
list_components()

# Get specific component manifest
get_component_manifest(componentId="button")

Direct File Access

Manifests are stored alongside component source code:

packages/core/src/manifests/button.manifest.json
packages/ai/src/manifests/message.manifest.json

llms.txt

The project includes an llms.txt file at the root that provides a curated overview for AI agents.

Creating Manifests

When adding new components to Slipstream UI:

Create the component with proper TypeScript types and JSDoc
Create a corresponding manifest file in src/manifests/
Include all required sections (props, examples, accessibility, etc.)
Run pnpm validate:manifests to validate
Update MCP server and CLI to include the new component

Benefits

Zero Hallucination: AI agents have exact prop specifications
Consistency: All AI-generated code follows the same patterns
Accessibility: Built-in a11y requirements for every component
Documentation: Manifests serve as living documentation
Type Safety: Prop schemas match TypeScript definitions
Future-Proof: Easy to update without changing source code

COMPONENT_MANIFEST