@framingui/mcp

@framingui/mcp

MCP (Model Context Protocol) server for FramingUI — a token-driven design system for coding agents.

Free scope: the editorial-tech theme + 30 components. The full catalog (more themes, more components, packs) is at framingui.com.

The server is a thin stdio wrapper around the FramingUI skill's bundled, zero-dependency validation scripts. Reports are returned verbatim — including LICENSE_REQUIRED messages for vocabulary outside the free scope.

Usage

{
  "mcpServers": {
    "framingui": {
      "command": "npx",
      "args": ["-y", "@framingui/mcp"]
    }
  }
}

Or with Claude Code:

claude mcp add framingui -- npx -y @framingui/mcp

Tools

Tool	What it does
framingui_doctor	Verifies FramingUI wiring in a project (theme CSS variables, components, config).
framingui_validate_screen	Validates a screen definition JSON against the design-system contract; returns the report verbatim.
framingui_catalog	Returns the free-scope reference docs: components, themes, tokens, or recipes.
framingui_recipe_show	Shows one screen recipe as JSON (anatomy, states, accessibility, acceptance).

Development

The package embeds a copy of the repo's skill at skill/framingui/ so it is self-contained on npm. After changing ../skill/framingui, re-sync and commit:

node scripts/sync-skill.mjs

Smoke test (spawns the server over stdio and exercises every tool):

npm install
npm run smoke

License

MIT