@layoutdesign/context 0.4.0 → 0.6.0

package/dist/src/mcp/tools/scan-project.js

@@ -0,0 +1,97 @@
+import { z } from "zod";
+import { resolve } from "node:path";
+import { scanCodebase, scanStorybook } from "../../integrations/codebase-scan.js";
+export const name = "scan-project";
+export const description = "Scan the current project for React components and Storybook stories. " +
+    "Returns structured data about component names, props, export types, and story associations. " +
+    "Use this to understand the existing component inventory before generating new components or design system context.";
+export const inputSchema = {
+    path: z
+        .string()
+        .optional()
+        .describe("Directory to scan. Defaults to the current working directory."),
+    type: z
+        .enum(["both", "storybook", "codebase"])
+        .optional()
+        .describe("What to scan: 'both' (default) scans components and stories, 'storybook' scans only stories, 'codebase' scans only components."),
+};
+export function handler() {
+    return async (input) => {
+        const rootPath = resolve(input.path ?? process.cwd());
+        const scanType = input.type ?? "both";
+        try {
+            if (scanType === "storybook") {
+                const stories = await scanStorybook(rootPath);
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: JSON.stringify({
+                                type: "storybook-scan",
+                                rootPath,
+                                storiesFound: stories.length,
+                                stories,
+                            }, null, 2),
+                        },
+                    ],
+                };
+            }
+            const result = await scanCodebase(rootPath);
+            // For "codebase" type, strip storybook data
+            if (scanType === "codebase") {
+                const components = result.components.map(({ storybook: _sb, ...rest }) => rest);
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: JSON.stringify({
+                                type: "codebase-scan",
+                                rootPath,
+                                componentsFound: components.length,
+                                filesScanned: result.filesScanned,
+                                durationMs: result.durationMs,
+                                components,
+                            }, null, 2),
+                        },
+                    ],
+                };
+            }
+            // Default: both
+            const withStories = result.components.filter((c) => c.storybook);
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            type: "full-scan",
+                            rootPath,
+                            summary: {
+                                componentsFound: result.components.length,
+                                storiesFound: result.storybookStories.length,
+                                componentsWithStories: withStories.length,
+                                unmatchedStories: result.unmatchedStories.length,
+                                filesScanned: result.filesScanned,
+                                durationMs: result.durationMs,
+                            },
+                            components: result.components,
+                            unmatchedStories: result.unmatchedStories,
+                        }, null, 2),
+                    },
+                ],
+            };
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: `Error scanning project: ${msg}`,
+                    },
+                ],
+                isError: true,
+            };
+        }
+    };
+}
+//# sourceMappingURL=scan-project.js.map

package/dist/src/mcp/tools/scan-project.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scan-project.js","sourceRoot":"","sources":["../../../../src/mcp/tools/scan-project.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layoutdesign/context",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Design system context for AI coding agents — MCP server + CLI + live preview",
   "license": "MIT",
   "type": "module",
@@ -19,6 +19,7 @@
   "files": [
     "dist",
     "kits",
+    "skills",
     "README.md",
     "LICENSE"
   ],

package/skills/layout-md/SKILL.md

@@ -0,0 +1,135 @@
+---
+name: layout-md
+description: Use this skill when writing UI code against a Layout design system (`.layout/` directory with layout.md, tokens.css, tokens.json). Reads the design system, generates on-brand components, and validates output against the project's tokens and anti-patterns.
+---
+
+# Layout design system skill
+
+Use this skill whenever the repo contains a `.layout/` directory (or an opened
+`layout.md` file). It gives you the project's tokens, component patterns, and
+rules so the code you generate matches the design system.
+
+## When to use
+
+Invoke this skill for any task that produces UI, including:
+
+- Creating new components (buttons, cards, forms, modals, pages)
+- Editing existing components' styling
+- Generating page layouts or sections
+- Reviewing UI code for design-system compliance
+- Answering questions like "what's our accent colour" or "how should I style X"
+
+If the user opens a file in a folder with `.layout/`, assume this skill
+applies even without explicit invocation.
+
+## What's available
+
+Layout ships a local MCP server (`@layoutdesign/context`). If the user has
+installed it via `claude mcp add layout npx -- -y @layoutdesign/context serve`,
+the following MCP tools are available:
+
+- `get_design_system` — full layout.md content
+- `get_design_section` — one section (colours, typography, spacing, etc.)
+- `get_tokens` — token values by category
+- `get_component` — specific component's spec + code
+- `list_components` — every component with tokens used
+- `check_compliance` — validate generated code against design system rules
+
+If the MCP server is **not** installed, read the files directly:
+
+- `.layout/layout.md` — full specification
+- `.layout/tokens.css` — CSS custom properties
+- `.layout/tokens.json` — W3C DTCG token format
+- `.layout/kit.json` — manifest (name, version, tier)
+
+## Workflow for generating UI
+
+Follow these steps in order:
+
+### 1. Load context before writing code
+
+Call `get_design_system` (or read `.layout/layout.md`) once per task. Pay
+attention to:
+
+- The "Quick Reference" section at the top: core tokens, primary component
+  example, NEVER rules.
+- The "Colour System" three tiers: primitive, semantic, component. Use
+  semantic or component tokens in your code. Never reference primitive
+  tokens directly.
+- The "Components" section: the anatomy and states expected (default, hover,
+  focus, active, disabled, loading, error).
+- The "Anti-Patterns" section: rules you must not violate.
+
+### 2. Write code using tokens, not literal values
+
+**Do:**
+
+```tsx
+<button style={{ background: 'var(--color-primary)', color: 'var(--color-on-primary)' }} />
+```
+
+**Don't:**
+
+```tsx
+<button style={{ background: '#6366F1', color: '#fff' }} />
+```
+
+Hardcoded values drift from the design system and are flagged by
+`check_compliance`.
+
+### 3. Validate before finishing
+
+If the MCP server is available, call `check_compliance` with your generated
+code. Fix any errors (hardcoded colours, missing required props, unknown
+components, arbitrary spacing) before presenting the result.
+
+If the user has also installed `@layoutdesign/context` globally, suggest they
+run `npx @layoutdesign/context lint` in their project root to validate the
+entire `.layout/` directory against the seven built-in rules.
+
+## Multi-mode (light/dark)
+
+Layout design systems can define tokens per mode:
+
+```css
+:root {
+  --color-bg: #FFFFFF;
+}
+[data-theme="dark"] {
+  --color-bg: #0C0C0E;
+}
+```
+
+When you see `[data-theme="dark"]` blocks in tokens.css, the design system
+supports both modes. Use plain `var(--color-bg)` in components. The theme
+toggle on the body/html element will resolve correctly.
+
+## Kit Gallery
+
+If the user asks "is there a kit for X?" point them at the community Kit
+Gallery at https://layout.design/gallery. They can:
+
+- Browse kits by tag, sort by Featured / Top / New
+- Install from the CLI: `npx @layoutdesign/context install <slug>`
+- Import into Layout Studio with one click
+
+## If you cannot find a design system
+
+If `.layout/` does not exist and no layout.md is readable:
+
+1. Ask the user whether a design system has been set up.
+2. Offer to scaffold one with `npx @layoutdesign/context init` (starts with a
+   bundled kit: linear-lite, stripe-lite, or notion-lite).
+3. Offer to import from an existing `tokens.json` with
+   `npx @layoutdesign/context import-tokens path/to/tokens.json`.
+4. Offer to extract from a Figma file or live website in Layout Studio
+   (https://layout.design).
+
+Do not invent tokens or make up a design system.
+
+## Related
+
+- Spec: https://layout.design/spec
+- Comparison to Google's design.md: https://layout.design/vs/design-md
+- MCP tools: `serve` from `@layoutdesign/context`
+- CLI: `init`, `install`, `lint`, `diff`, `import-tokens`, `scan`, `serve`