# Box Kite

An offline styling engine and documentation bridge for Box Kite in React. Validates style properties, components, and CSS output directly within coding agents.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 12
- Author: box-kite
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/box-kite/box-kite/tree/HEAD/mcp
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/mcp/box-kite

## What it does

This server exposes six dedicated tools for working with Box Kite React code. Agents can inspect component contracts, check accessibility mappings, and examine exact scale measurements.

The server requires no network access. Everything runs locally from the bundled package engine without state or API keys. You must run Node 22 or higher, because older runtime versions fail when executing the package via `npx`.

Box Kite silently discards unrecognized styling properties rather than rendering malformed classes. Running prop sets through `check_styles` lets the agent catch silent styling typos before browser rendering starts.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add mcp -- npx -y @box-kite/mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add mcp -- npx -y @box-kite/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp": {
            "command": "npx",
            "args": [
                "-y",
                "@box-kite/mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@box-kite/mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add mcp npx -y @box-kite/mcp
```

## When to use it
- verify whether given style props produce valid CSS declarations
- inspect component contracts including keyboard navigation and ARIA attributes
- resolve numeric scaling for spacing, font sizes, and borders
- pull interface layouts such as dashboard shells and data tables

## Example prompts
- Verify whether the property set `p: 4` and `fontSize: 14` creates working CSS via `check_styles`.
- Inspect the component contract and accessibility attributes with `get_component`.
- Look up layout guidelines and nesting rules using `search_docs`.

## Similar
- [refactoring-ui](https://affpapa.org/en/nevibecode/skills/refactoring-ui.md) — skill · 9200 installs
- [frontend-design](https://affpapa.org/en/nevibecode/skills/bytedance-frontend-design.md) — skill · 3700 installs
- [ui-designer](https://affpapa.org/en/nevibecode/skills/ui-designer.md) — skill · 3600 installs
- [designing-frontend-interfaces](https://affpapa.org/en/nevibecode/skills/designing-frontend-interfaces.md) — skill · 642 installs
- [scss-best-practices](https://affpapa.org/en/nevibecode/skills/scss-best-practices.md) — skill · 1700 installs
- [tailwind-4](https://affpapa.org/en/nevibecode/skills/tailwind-4.md) — skill · 612 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md