@classic-homes/theme-mcp 0.1.1

package/README.md

@@ -0,0 +1,186 @@
+# @classic-homes/theme-mcp
+
+MCP (Model Context Protocol) server for the Classic Theme design system. This package enables AI assistants like Claude to understand and correctly use Classic Theme components, design tokens, layout patterns, and validation schemas.
+
+## Why Use This?
+
+When AI assistants have access to the MCP server, they can:
+
+- **Generate correct component code** with proper props and variants
+- **Follow design system patterns** for layouts and forms
+- **Use the right design tokens** for colors, spacing, and typography
+- **Validate usage** to catch errors before runtime
+- **Speed up development** by eliminating guesswork
+
+## Quick Start
+
+### With npx (no installation)
+
+```bash
+npx @classic-homes/theme-mcp
+```
+
+### Install globally
+
+```bash
+npm install -g @classic-homes/theme-mcp
+classic-theme-mcp
+```
+
+### Install in a project
+
+```bash
+npm install --save-dev @classic-homes/theme-mcp
+```
+
+## Configure Claude Code
+
+Add to your `~/.claude/settings.json`:
+
+```json
+{
+  "mcpServers": {
+    "classic-theme": {
+      "command": "npx",
+      "args": ["@classic-homes/theme-mcp"]
+    }
+  }
+}
+```
+
+Or for a local installation:
+
+```json
+{
+  "mcpServers": {
+    "classic-theme": {
+      "command": "node",
+      "args": ["./node_modules/@classic-homes/theme-mcp/dist/cli.js"]
+    }
+  }
+}
+```
+
+Restart Claude Code after updating the configuration.
+
+## What's Included
+
+### Resources (Read-Only Data)
+
+| Resource                      | Description                                        |
+| ----------------------------- | -------------------------------------------------- |
+| `components://catalog`        | All 45+ components with props, variants, examples  |
+| `components://list`           | Component names and categories                     |
+| `components://{name}`         | Individual component (e.g., `components://Button`) |
+| `components://category/{cat}` | Filter by category                                 |
+| `tokens://colors`             | Brand and semantic color palette                   |
+| `tokens://spacing`            | Spacing scale (0-96)                               |
+| `tokens://typography`         | Font families, sizes, weights                      |
+| `patterns://layouts`          | Dashboard, public, auth, error layouts             |
+| `patterns://forms`            | Login, registration, contact forms                 |
+| `schemas://auth`              | Auth validation schemas                            |
+| `schemas://common`            | Common validation schemas                          |
+
+### Tools (Queryable Functions)
+
+| Tool                       | Description                                    |
+| -------------------------- | ---------------------------------------------- |
+| `search_components`        | Find components by name/category/functionality |
+| `get_component_props`      | Get detailed props for a component             |
+| `suggest_pattern`          | Get recommended pattern for a use case         |
+| `validate_component_usage` | Check if usage follows guidelines              |
+
+### Prompts (Templates)
+
+| Prompt            | Description                      |
+| ----------------- | -------------------------------- |
+| `build_form`      | Generate form with validation    |
+| `layout_page`     | Generate page layout             |
+| `component_usage` | Generate component usage example |
+
+## Example Interactions
+
+### Ask Claude to create a dashboard
+
+```
+"Create a dashboard page with sidebar navigation and a data table"
+```
+
+Claude will use the MCP to look up `DashboardLayout` props, `DataTable` configuration, and generate correct TypeScript code.
+
+### Ask about component variants
+
+```
+"What variants does the Alert component have?"
+```
+
+Claude queries `get_component_props` and returns: default, destructive, success, warning, info.
+
+### Generate a form
+
+```
+"Create a contact form with name, email, and message fields"
+```
+
+Claude uses the `build_form` prompt to generate a form with `FormField` components, Zod validation, and proper error handling.
+
+## Component Categories
+
+- **core**: Button, Input, Card, Badge, Label, etc.
+- **form**: FormField, Select, Checkbox, RadioGroup, Slider, etc.
+- **layout**: DashboardLayout, PublicLayout, AuthLayout, ErrorLayout
+- **feedback**: Toast, Spinner, Skeleton, Alert
+- **data**: DataTable, Tabs
+- **overlay**: Dialog, AlertDialog, Tooltip, DropdownMenu
+- **navigation**: Sidebar, Header, Footer, QuickLinks
+- **branding**: LogoMain, LoadingLogo
+
+## For Package Maintainers
+
+### Regenerate Catalog
+
+When Classic Theme components are updated:
+
+```bash
+npm run generate
+npm run build
+```
+
+### Build
+
+```bash
+npm run build      # Generate catalog + build
+npm run build:fast # Build only (skip generation)
+```
+
+### Test Locally
+
+```bash
+# Run the server
+npm run start
+
+# Test with MCP Inspector
+npx @modelcontextprotocol/inspector node dist/cli.js
+```
+
+## Requirements
+
+- Node.js 18 or later
+- Classic Theme packages installed in your project (for full functionality)
+
+## Related Packages
+
+- `@classic-homes/theme-svelte` - Svelte component library
+- `@classic-homes/theme-react` - React component library
+- `@classic-homes/theme-tokens` - Design tokens
+- `@classic-homes/theme-tailwind-preset` - Tailwind configuration
+
+## Documentation
+
+- [AI Integration Guide](https://theme.classichomes.com/svelte/docs/getting-started/ai-integration)
+- [Component Documentation](https://theme.classichomes.com/svelte/docs/components/button)
+- [Getting Started](https://theme.classichomes.com/svelte/docs/getting-started/installation)
+
+## License
+
+MIT

package/dist/cli.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node