@lism-css/mcp

English | 日本語

An MCP (Model Context Protocol) server for Lism CSS. Enables AI tools (Claude Code, Cursor, etc.) to accurately reference Lism CSS documentation and API, matching the version of this package that is installed.

Available Tools

| Tool | Description | |------|-------------| | get_overview | Framework overview (architecture, design philosophy, packages, breakpoints, CSS layers, implementation rules) | | get_tokens | Get the full design token reference (colors, spacing, font sizes, shadows, radii, etc.) | | get_props_system | Props system reference — how React/Astro props map to CSS classes and styles. Supports reverse lookup by CSS property name (e.g. padding → p) and Property Class notation (e.g. -g:5) | | get_component | Component details (props, usage examples, sub-component structure). Optionally filter by package (lism-css or @lism-css/ui) | | get_guide | Detailed guide on a specific topic (CSS rules, responsive design, utility classes, primitive/trait classes, set classes, base styles, naming, customization, etc.) | | search_docs | Full-text documentation search with relevance scoring. Supports category filtering and CSS property name expansion | | convert_css | Convert CSS code to lism-css props and component suggestions. Useful for migrating existing CSS to Lism CSS |

Example Queries

• "What is the basic architecture of Lism CSS?" → get_overview
• "Show me the spacing tokens" → get_tokens()
• "What do shorthand props like p or fz map to?" → get_props_system(prop: "p")
• "What does the class -g:5 mean?" → get_props_system(prop: "-g:5")
• "What CSS property does fz correspond to?" → get_props_system(prop: "font-size")
• "How do I use the Accordion component?" → get_component(name: "Accordion")
• "Show me only UI components" → get_component(name: "Accordion", package: "@lism-css/ui")
• "How does the CSS layer structure work?" → get_guide(topic: "css-rules")
• "How does responsive design work?" → get_guide(topic: "responsive")
• "Search only guide docs" → search_docs(query: "responsive", category: "guide")
• "Convert display: flex; gap: 1rem; to Lism" → convert_css(css: "display: flex; gap: 1rem;")

Setup

Claude Code

claude mcp add lism-css -- npx -y @lism-css/mcp

Cursor

.cursor/mcp.json:

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

Windsurf

.windsurf/mcp.json:

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

VS Code (GitHub Copilot)

.vscode/mcp.json:

{
  "servers": {
    "lism-css": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@lism-css/mcp"]
    }
  }
}