@matchkit.io/cli 0.1.1 → 0.1.2

package/dist/commands/pull.js

@@ -1,9 +1,111 @@
 import * as p from "@clack/prompts";
 import pc from "picocolors";
-import { writeFileSync, mkdirSync, existsSync } from "node:fs";
+import { writeFileSync, mkdirSync, existsSync, readFileSync } from "node:fs";
 import { join, dirname } from "node:path";
 import { readConfig, configExists, writeConfig, createDefaultConfig } from "../utils/config.js";
 import { getApiKey, authFetch, API_BASE_URL } from "../utils/auth.js";
+// Marker used to detect MatchKit-managed AI rules files
+const MATCHKIT_MARKER = "<!-- managed:matchkit -->";
+/**
+ * Build the content for AI rules files.
+ * This is the mandatory instruction set that tells AI tools to use the design system.
+ */
+function buildAiRulesContent(skillDir, theme) {
+    return `${MATCHKIT_MARKER}
+# MatchKit Design System — ${theme}-ui
+
+> Auto-generated by \`matchkit pull\`. Do not edit the marker line above.
+
+## MANDATORY — This project uses a complete design system
+
+A full design system is installed at \`${skillDir}/\`. You MUST use it for ALL UI work.
+
+### Before writing ANY UI code:
+
+1. **Read \`${skillDir}/SKILL.md\`** — contains design rules, component specs, and setup instructions
+2. **Read \`${skillDir}/registry.json\`** — lists all 27 available components with their dependencies
+3. **Copy \`${skillDir}/globals.css\`** to \`src/styles/globals.css\` if it doesn't exist yet
+4. **Create \`src/lib/utils.ts\`** with the \`cn()\` helper if it doesn't exist yet:
+   \`\`\`ts
+   import { clsx, type ClassValue } from "clsx";
+   import { twMerge } from "tailwind-merge";
+   export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }
+   \`\`\`
+5. **Copy component files** from \`${skillDir}/components/\` to \`src/components/ui/\` as needed
+
+### Rules — follow these at ALL times:
+
+- **ALWAYS** check \`${skillDir}/registry.json\` before creating any component — if it exists there, use it
+- **NEVER** create your own \`globals.css\`, Tailwind theme, or color tokens — use the provided \`globals.css\`
+- **NEVER** hardcode hex colors, pixel spacing, or font sizes — use CSS variables from \`globals.css\`
+- **NEVER** improvise a component if one already exists in the registry
+- **NEVER** modify files inside \`${skillDir}/\` — it is the upstream source of truth
+- **ALWAYS** use \`@/components/ui/{name}\` import paths for design system components
+- **ALWAYS** use \`@/lib/utils\` for the \`cn()\` helper
+
+### Available resources in \`${skillDir}/\`:
+
+| Path | Contents |
+|------|----------|
+| \`SKILL.md\` | Design rules, philosophy, component specs |
+| \`registry.json\` | Component registry with types, layers, dependencies |
+| \`components/*.tsx\` | 27 production-ready components |
+| \`layouts/*.tsx\` | 6 page layout references |
+| \`globals.css\` | Complete Tailwind v4 CSS with all tokens |
+| \`tokens/*.json\` | Design token values |
+| \`patterns/*.md\` | Responsive, dark mode, a11y, composition patterns |
+`;
+}
+/**
+ * Build Cursor .mdc format content (has YAML frontmatter with alwaysApply).
+ */
+function buildCursorMdcContent(skillDir, theme) {
+    return `---
+description: MatchKit ${theme}-ui design system — mandatory rules for all UI work
+alwaysApply: true
+---
+${buildAiRulesContent(skillDir, theme)}`;
+}
+/**
+ * Write AI rules files to the project root.
+ * Only writes if the file doesn't exist or is MatchKit-managed (has the marker).
+ * Returns the list of files that were written.
+ */
+function writeAiRulesFiles(cwd, skillDir, theme) {
+    const content = buildAiRulesContent(skillDir, theme);
+    const cursorMdcContent = buildCursorMdcContent(skillDir, theme);
+    const written = [];
+    const targets = [
+        { path: "CLAUDE.md", label: "CLAUDE.md", content },
+        { path: ".cursorrules", label: ".cursorrules", content },
+        { path: ".cursor/rules/matchkit.mdc", label: ".cursor/rules/matchkit.mdc", content: cursorMdcContent },
+        { path: ".github/copilot-instructions.md", label: ".github/copilot-instructions.md", content },
+        { path: ".windsurfrules", label: ".windsurfrules", content },
+    ];
+    for (const target of targets) {
+        const fullPath = join(cwd, target.path);
+        let shouldWrite = false;
+        if (!existsSync(fullPath)) {
+            shouldWrite = true;
+        }
+        else {
+            // File exists — only overwrite if it's MatchKit-managed
+            const existing = readFileSync(fullPath, "utf-8");
+            if (existing.includes(MATCHKIT_MARKER)) {
+                shouldWrite = true;
+            }
+        }
+        if (shouldWrite) {
+            const dir = dirname(fullPath);
+            if (!existsSync(dir)) {
+                mkdirSync(dir, { recursive: true });
+            }
+            writeFileSync(fullPath, target.content);
+            written.push(target.label);
+        }
+    }
+    return written;
+}
 export async function pullCommand(options) {
     p.intro(pc.bold("matchkit pull"));
     // Check auth
@@ -131,6 +233,11 @@ export async function pullCommand(options) {
         s.stop(`Extracted ${fileCount} files`);
         p.log.success(`${pc.bold(theme + "-ui")} v${version} → ${pc.dim(skillDir)}`);
         p.log.info(`Build: ${pc.dim(buildId)}`);
+        // Generate AI rules files so every AI tool uses the design system
+        const writtenRules = writeAiRulesFiles(process.cwd(), skillDir, theme);
+        if (writtenRules.length > 0) {
+            p.log.success(`AI rules → ${writtenRules.map((f) => pc.dim(f)).join(", ")}`);
+        }
         p.outro("Design system is up to date.");
     }
     catch (err) {

package/dist/index.js

@@ -11,7 +11,7 @@ const program = new Command();
 program
     .name("matchkit")
     .description("MatchKit — style-agnostic design system CLI")
-    .version("0.1.1");
+    .version("0.1.2");
 program
     .command("init")
     .description("Initialize a MatchKit design system in your project")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchkit.io/cli",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "CLI for MatchKit design system skills. Init projects, add components, manage your design system.",
   "type": "module",
   "main": "dist/index.js",