@vadenai/mcp-server 0.1.0 → 0.2.1

package/README.md

@@ -30,7 +30,7 @@ This MCP Server solves this by providing **design context** that agents can refe
 | `get_design_tokens`    | Returns design tokens (colors, fonts, spacing, radius, etc.)                                     | none                        |
 | `get_theme_css`        | Returns CSS variables (`:root`, `.dark`, `@theme`)                                               | none                        |
 | `get_component_list`   | Returns a list of available components                                                           | none                        |
-| `get_component_spec`   | Returns the spec for a component (props, variants, etc.)                                         | `component`: component name |
+| `get_component_spec`   | Returns the spec for a component (props, variants, CVA classes, resolved colors)                 | `component`: component name |
 | `search_components`    | Searches components by keyword (Japanese supported)                                              | `query`: search query       |
 | `get_wireframes`       | Returns wireframe screen list and navigation flows                                               | none                        |
 | `get_wireframe_detail` | Returns screen details (components, states, behaviors)                                           | `screen_id`: screen ID      |
@@ -105,6 +105,28 @@ Supported: hover, focus-visible, active, disabled
 
 ---
 
+## Style Config (botanical-organic)
+
+**Type**: single
+
+**Base Styles**:
+`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium ...`
+
+**variant**:
+- default: `bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow`
+- destructive: `bg-destructive text-destructive-foreground hover:bg-destructive/90`
+- outline: `border border-primary/50 bg-transparent text-primary hover:bg-primary/5`
+- secondary: `bg-secondary text-secondary-foreground hover:bg-secondary/80`
+- ghost: `text-primary hover:bg-accent`
+- link: `text-primary underline-offset-4 hover:underline`
+
+**Resolved Colors** (preferred appearance):
+- primary: bg=#7C3AED, fg=#FFFFFF
+- secondary: bg=#F472B6, fg=#1E293B
+- destructive: #EF4444
+
+---
+
 ## Registry Spec (JSON)
 ```json
 {
@@ -119,7 +141,7 @@ Supported: hover, focus-visible, active, disabled
 }
 ````
 
-Components with registered metadata return both a guide and registry JSON. Components without metadata return registry JSON only.
+Components with registered metadata return both a guide and registry JSON. Components without metadata return registry JSON only. When the project has a generated design system, a **Style Config** section with CVA class definitions and resolved color values is included between the guide and registry spec.
 
 **`get_component_list`** — Array of component summaries
 

package/dist/guides/generate-guide.js

@@ -95,10 +95,17 @@ export function generateComponentGuide(info) {
     }
     // Important rules (common to all)
     lines.push("## Important Rules");
-    lines.push("- Always use design token CSS variables — never hardcode colors or spacing.");
+    lines.push("- Always use design token CSS variables — never hardcode colors or spacing. However, Style Config classes override tokens when explicitly specified (see Style Precedence below).");
     lines.push("- Follow the variant system — do not create ad-hoc style overrides.");
     if (meta.type === "multipart") {
         lines.push("- Use the slot-based structure — each slot has specific styling responsibilities.");
     }
+    lines.push("");
+    // Style precedence rules
+    lines.push("## Style Precedence");
+    lines.push("When Style Config and Semantic Tokens conflict, apply this order:");
+    lines.push("1. **Style Config classes take highest priority** — they encode component-specific design intent (e.g. `text-white` overrides `text-primary-foreground`).");
+    lines.push("2. **Semantic Tokens as fallback** — use tokens only for attributes not specified in the Style Config.");
+    lines.push("3. **Resolved Colors are reference values** — they show the actual rendered colors but do not override Style Config classes.");
     return lines.join("\n");
 }

package/dist/index.js

@@ -17,7 +17,7 @@ import { handleGetConcept, handleGetDesignRationale } from "./tools/concept.js";
 import { handleGetDesignTokens, handleGetThemeCss, } from "./tools/design-tokens.js";
 import { handleGetWireframeDetail, handleGetWireframes, } from "./tools/wireframes.js";
 // --- コマンドライン引数パース ---
-const VERSION = "0.1.0";
+const VERSION = "0.2.1";
 function parseArgs() {
     const args = process.argv.slice(2);
     if (args.includes("--help") || args.includes("-h")) {
@@ -92,7 +92,7 @@ const TOOLS = [
     },
     {
         name: "get_component_spec",
-        description: "指定したコンポーネントの仕様（props・バリアント等）を返します",
+        description: "指定したコンポーネントの仕様(props・バリアント等)を返します。プロジェクトにデザインシステムが生成済みの場合、CVAクラス定義・解決済みカラー値も含まれます",
         inputSchema: {
             type: "object",
             properties: {

package/dist/tools/components.js

@@ -93,11 +93,24 @@ export async function handleGetComponentSpec(client, projectId, componentName) {
         description: spec.description,
         categories: spec.categories,
     });
+    // スタイル設定を取得（失敗しても既存レスポンスは返す）
+    let styleSection = "";
+    try {
+        const styleData = await client.get(`/api/projects/${encodeURIComponent(projectId)}/design-system/component-styles/${encodeURIComponent(componentName)}`);
+        styleSection = formatStyleSection(styleData);
+    }
+    catch {
+        // DS未生成等でスタイルが取得できない場合はスキップ
+    }
     const parts = [];
     if (guide) {
         parts.push(guide);
         parts.push("", "---", "");
     }
+    if (styleSection) {
+        parts.push(styleSection);
+        parts.push("", "---", "");
+    }
     parts.push("## Registry Spec (JSON)");
     parts.push("```json");
     parts.push(JSON.stringify(spec, null, 2));
@@ -227,6 +240,75 @@ export async function handleSearchComponents(client, projectId, query) {
     const text = `## Search Results for "${query}"\n\n${header}${rows}\n\nUse \`get_component_spec\` with a component name for full details.`;
     return [{ type: "text", text }];
 }
+function formatStyleSection(data) {
+    const lines = [];
+    const styleId = data.styleId;
+    const type = data.type;
+    const overrideApplied = data.overrideApplied;
+    lines.push(`## Style Config${styleId ? ` (${styleId})` : ""}${overrideApplied ? " [override applied]" : ""}`);
+    lines.push("");
+    lines.push("> **Priority**: Resolve conflicts in this order — (1) **Style Config classes** (highest), (2) **Semantic Tokens** (fallback when class is not specified), (3) **Resolved Colors** (reference-only; never override classes).");
+    lines.push("");
+    lines.push(`**Type**: ${type}`);
+    lines.push("");
+    if (type === "single") {
+        const baseStyles = data.baseStyles;
+        const variants = data.variants;
+        lines.push("**Base Styles**:");
+        lines.push(`\`${baseStyles}\``);
+        lines.push("");
+        if (variants) {
+            for (const [groupName, groupVariants] of Object.entries(variants)) {
+                lines.push(`**${groupName}**:`);
+                for (const [name, classes] of Object.entries(groupVariants)) {
+                    lines.push(`- ${name}: \`${classes}\``);
+                }
+                lines.push("");
+            }
+        }
+    }
+    else if (type === "multipart") {
+        const slots = data.slots;
+        if (slots) {
+            lines.push("**Slots**:");
+            for (const [slotName, classes] of Object.entries(slots)) {
+                lines.push(`- ${slotName}: \`${classes}\``);
+            }
+            lines.push("");
+        }
+        const variants = data.variants;
+        if (variants && Object.keys(variants).length > 0) {
+            for (const [groupName, groupVariants] of Object.entries(variants)) {
+                lines.push(`**${groupName}**:`);
+                for (const [name, classes] of Object.entries(groupVariants)) {
+                    lines.push(`- ${name}: \`${classes}\``);
+                }
+                lines.push("");
+            }
+        }
+    }
+    const resolvedColors = data.resolvedColors;
+    if (resolvedColors && Object.keys(resolvedColors).length > 0) {
+        lines.push("**Resolved Colors** (preferred appearance):");
+        for (const [name, value] of Object.entries(resolvedColors)) {
+            if (typeof value === "string") {
+                lines.push(`- ${name}: ${value}`);
+            }
+            else if (value && typeof value === "object") {
+                const pair = value;
+                if (typeof pair.background === "string" ||
+                    typeof pair.foreground === "string") {
+                    lines.push(`- ${name}: bg=${pair.background ?? "-"}, fg=${pair.foreground ?? "-"}`);
+                }
+                else {
+                    lines.push(`- ${name}: \`${JSON.stringify(value)}\``);
+                }
+            }
+        }
+        lines.push("");
+    }
+    return lines.join("\n");
+}
 /** テスト用にキャッシュをクリアする */
 export function clearRegistryCache() {
     cache = new WeakMap();

package/package.json

@@ -10,7 +10,7 @@
   ],
   "homepage": "https://vaden.ai",
   "license": "MIT",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -34,6 +34,7 @@
     "postbuild": "node scripts/postbuild.js",
     "prepack": "npm run build",
     "test": "vitest run",
+    "test:unit": "vitest run",
     "typecheck": "tsc --noEmit"
   },
   "files": [