Skip to main content
Glama
component-contracts

component-contracts

by jeremysykes

component-contracts

Two MCP servers that form the authority layer for design-to-code component lifecycles.

Overview

Variant Authority is the engineering contract for your component library. It defines what variants exist on a component, what slots are required, how design tokens map between Figma and code, and what happens when a component is deprecated. When a variant surface changes, it classifies the diff as major, minor, or patch so consumers know the impact before shipping.

Radix Primitives is the accessibility foundation. It maps component types to Radix UI primitives, exposes the ARIA contracts and keyboard interactions that come free with each primitive, and documents known caveats and workarounds. Together, these two servers are the source of truth that d2c operates on -- one for structural correctness, the other for accessible composition.

Related MCP server: ds-pilot

Tool surface

Variant Authority (5 tools)

Tool

Description

get_manifest(component)

Returns the full variant manifest

set_manifest(component, manifest)

Writes or updates a manifest, validates with isVariantManifest()

get_usage(component)

Scans workspace for files importing the component

diff_manifests(component, before, after)

Classifies changes as major/minor/patch

validate_usage(component, props)

Validates variant values and required slots

Radix Primitives (4 tools)

Tool

Description

get_primitive(name)

Returns accessibility contract, composition pattern, caveats

get_composition_pattern(component)

Maps a component type to its Radix primitive

get_caveats(primitive)

Returns known issues and workarounds

list_primitives()

Enumerates all 16 available primitives

VariantManifest schema

interface VariantManifest {
  component: string;
  version: string;
  figmaFileKey: string;
  figmaNodeId: string;
  variants: Record<string, VariantDefinition>;
  slots: SlotDefinition[];
  tokens: Record<string, TokenBinding>;
  authority: AuthorityMap;
  deprecated?: DeprecationInfo;
  semanticTokenFile?: string;
  createdAt: string;
  updatedAt: string;
}

interface VariantDefinition {
  values: string[];
  defaultValue: string;
  type: "string" | "boolean" | "number";
  description?: string;
}

interface SlotDefinition {
  name: string;
  required: boolean;
  description?: string;
}

interface TokenBinding {
  figmaValue: string;
  codeValue: string;
  dtcgPath: string;
  category: "color" | "spacing" | "typography" | "border" | "shadow" | "opacity";
}

interface AuthorityMap {
  structure: "figma" | "cva";
  visual: "figma" | "cva";
  conflictStrategy: "escalate" | "figma-wins" | "cva-wins";
}

interface DeprecationInfo {
  deprecated: true;
  replacedBy: string;
  migrationGuide: string;
  deprecatedAt: string;
  removalTarget?: string;
}

PrimitiveCapability schema

interface PrimitiveCapability {
  name: string;
  radixPackage: string | null;
  vuePackage: string | null;
  accessibilityContract: {
    role: string;
    keyboardInteractions: string[];
    ariaAttributes: string[];
  };
  compositionPattern: string;
  caveats: string[];
  recommendedFor: string[];
  avoidFor: string[];
  version: string;
}

Installation

Claude Code

claude mcp add variant-authority -- npx tsx src/variant-authority/server.ts
claude mcp add radix-primitives -- npx tsx src/radix-primitives/server.ts

Cursor

In .cursor/mcp.json:

{
  "mcpServers": {
    "variant-authority": {
      "command": "npx",
      "args": ["tsx", "src/variant-authority/server.ts"]
    },
    "radix-primitives": {
      "command": "npx",
      "args": ["tsx", "src/radix-primitives/server.ts"]
    }
  }
}

Codex CLI

codex mcp add variant-authority -- npx tsx src/variant-authority/server.ts
codex mcp add radix-primitives -- npx tsx src/radix-primitives/server.ts

Development

npm scripts

Script

Purpose

npm run build

Compile TypeScript with tsc

npm test

Run tests with Vitest

npm run dev:va

Start variant-authority server in dev mode

npm run dev:rp

Start radix-primitives server in dev mode

Project structure

component-contracts/
  src/
    variant-authority/
      server.ts             MCP server entry point
      registry.ts           JSON registry read/write
    radix-primitives/
      server.ts             MCP server entry point
      capability-map.ts     Static primitive data
    shared/
      schemas.ts            TypeScript interfaces + validation
      errors.ts             Shared error types
  dist/                     Compiled output
  .variant-authority/       Registry storage (gitignored in consuming repos)

Relationship to d2c

component-contracts provides the authority layer. d2c provides the lifecycle operator. During its phases, d2c calls these MCP servers to read and write variant manifests, query primitive mappings, and validate component usage. The two packages are designed to work together but can be used independently -- any tooling that needs a persistent variant registry or a Radix capability map can consume these servers directly.

License

MIT

Available Tools

4 tools
get_caveatsA

Returns known issues, workarounds, and version-specific behavior for a Radix primitive.

Inputs: primitive (required).

get_composition_patternA

Returns the recommended Radix primitive(s) and composition pattern for a given component type.

Inputs: component (required).

get_primitiveB

Returns the primitive API, accessibility contract, composition pattern, and known caveats for a Radix UI primitive.

Inputs: name (required).

list_primitivesA

Returns all available Radix primitives with a one-line description.

Inputs: no named parameters.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    TDQS

    A3.7/5.0

    Scored across 4 tools

    Disambiguation3/5

    get_primitive overlaps with get_composition_pattern and get_caveats since it already returns composition patterns and caveats. However, get_composition_pattern is scoped to component types rather than primitives, and get_caveats is more targeted, so descriptions help somewhat, but the boundaries remain fuzzy.

    Naming Consistency5/5

    All tools follow a consistent verb_noun snake_case pattern: list_primitives uses 'list' and the others use 'get', which is a predictable and uniform convention. There are no mixed styles or ambiguous verbs.

    Tool Count4/5

    Four tools is a reasonable size for a focused server, but two of them (get_composition_pattern, get_caveats) largely duplicate what get_primitive already provides, so the count feels slightly padded rather than perfectly lean.

    Completeness4/5

    The set covers listing primitives and retrieving detailed contract information, which serves the stated purpose. A minor gap is the lack of a dedicated tool for just the API or accessibility contract, but get_primitive essentially covers this in aggregate, so no critical dead ends exist.

    Related MCP Connectors

    Related MCP Servers

    • A
      license
      A
      quality
      B
      maintenance
      Design system MCP server. 20 tools: extract design tokens from any URL, pull from Figma or Penpot, generate React + shadcn/ui components from specs, run WCAG audits, sync tokens bidirectionally.
      50
      190 npm
      50
      MIT
    • A
      license
      Not graded
      quality
      D
      maintenance
      MCP server that exposes your design system components and tokens to AI agents, preventing duplicate component creation and hardcoded token values.
      4 npm
      9
      MIT
    • A
      license
      Not graded
      quality
      C
      maintenance
      A read-only MCP server that provides AI coding agents with a queryable contract for design system tokens, components, patterns, and anti-patterns.
      24 npm
      1
      Apache 2.0
    • A
      license
      A
      quality
      F
      maintenance
      Comprehensive MCP server for end-to-end UI development, offering tools to generate components, manage design tokens, audit accessibility, autofix issues, inspect live pages, compare screenshots, and more across multiple frameworks.
      13
      10 npm
      MIT