component-contracts
Manages variant manifests, design token mappings, and structural contracts between Figma and code, enabling variant lifecycle management and diff classification.
Provides accessibility contracts, composition patterns, keyboard interactions, and caveats for Radix UI primitives to ensure accessible component composition.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@component-contracts Show me the accessibility contract for Dialog"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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 |
| Returns the full variant manifest |
| Writes or updates a manifest, validates with |
| Scans workspace for files importing the component |
| Classifies changes as major/minor/patch |
| Validates variant values and required slots |
Radix Primitives (4 tools)
Tool | Description |
| Returns accessibility contract, composition pattern, caveats |
| Maps a component type to its Radix primitive |
| Returns known issues and workarounds |
| 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.tsCursor
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.tsDevelopment
npm scripts
Script | Purpose |
| Compile TypeScript with |
| Run tests with Vitest |
| Start variant-authority server in dev mode |
| 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 toolsget_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
Scored across 4 tools
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.
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.
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.
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
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
The Figma MCP server brings Figma design context directly into your AI workflow.
Accessible React components, tokens, usage guidance, and install commands for product interfaces.
Hosted AgentLux MCP server for marketplace, identity, creator, services, and social flows.
Related MCP Servers
- AlicenseAqualityBmaintenanceDesign 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.50190 npm50MIT
- AlicenseNot gradedqualityDmaintenanceMCP server that exposes your design system components and tokens to AI agents, preventing duplicate component creation and hardcoded token values.4 npm9MIT
- AlicenseNot gradedqualityCmaintenanceA read-only MCP server that provides AI coding agents with a queryable contract for design system tokens, components, patterns, and anti-patterns.24 npm1Apache 2.0
- AlicenseAqualityFmaintenanceComprehensive 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.1310 npmMIT