@matchkit.io/cli 0.1.3 → 0.1.5

package/dist/commands/pull.js

@@ -23,10 +23,25 @@ function buildImportMap(fullSkillDir) {
             // Skip non-component entries (layouts, patterns)
             if (comp.type === "registry:layout" || comp.type === "registry:pattern")
                 continue;
-            const file = comp.file.replace(/\.tsx$/, "");
+            // Strip directory prefix from file path (e.g. "components/button.tsx" → "button")
+            const basename = comp.file.replace(/^(components|lib)\//, "").replace(/\.tsx?$/, "");
             const exports = Array.isArray(comp.exportName) ? comp.exportName : [comp.exportName];
             const importStr = `{ ${exports.join(", ")} }`;
-            lines.push(`| ${comp.name} | \`import ${importStr} from "@/components/ui/${file}"\` |`);
+            // Use the registry category to determine the correct import prefix:
+            //   lib    → @/lib/{name}           (utils.ts)
+            //   layout → @/components/layout/{name}  (sidebar-nav, top-bar, page-header)
+            //   ui/chart/other → @/components/ui/{name}   (everything else)
+            let importPath;
+            if (comp.category === "lib") {
+                importPath = `@/lib/${basename}`;
+            }
+            else if (comp.category === "layout") {
+                importPath = `@/components/layout/${basename}`;
+            }
+            else {
+                importPath = `@/components/ui/${basename}`;
+            }
+            lines.push(`| ${comp.name} | \`import ${importStr} from "${importPath}"\` |`);
         }
         if (lines.length === 0)
             return "";
@@ -62,6 +77,9 @@ A full design system is installed at \`${skillDir}/\`. You MUST use it for ALL U
    export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }
    \`\`\`
 5. **Copy component files** from \`${skillDir}/components/\` to \`src/components/ui/\` as needed
+6. **Copy layout files** from \`${skillDir}/layouts/\` to \`src/components/layout/\` as needed (sidebar-nav, top-bar, page-header)
+7. **Read \`${skillDir}/layouts/app-shell.tsx\`** — reference implementation showing how to compose the app shell
+8. **Read the .tsx source** of any component before using it — the file contains the exact props interface
 
 ### Rules — follow these at ALL times:
 
@@ -70,8 +88,10 @@ A full design system is installed at \`${skillDir}/\`. You MUST use it for ALL U
 - **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 \`@/components/ui/{name}\` import paths for UI components
+- **ALWAYS** use \`@/components/layout/{name}\` import paths for layout components (sidebar-nav, top-bar, page-header)
 - **ALWAYS** use \`@/lib/utils\` for the \`cn()\` helper
+- **ALWAYS** read the component .tsx source to see its props interface before using it — do NOT guess props
 
 ### Available resources in \`${skillDir}/\`:
 
@@ -138,6 +158,37 @@ function writeAiRulesFiles(cwd, skillDir, theme) {
     }
     return written;
 }
+/**
+ * Detect if ZIP paths share a common prefix that matches the skillDir.
+ * e.g., if skillDir is ".claude/skills/glass-ui" and ZIP paths start with
+ * ".claude/skills/glass-ui/components/...", return ".claude/skills/glass-ui/"
+ * so we can strip it and avoid double nesting.
+ *
+ * Returns the prefix string (with trailing slash) or null if paths are flat.
+ */
+function detectPrefix(paths, skillDir) {
+    if (paths.length === 0)
+        return null;
+    // Normalize skillDir: remove leading/trailing slashes, then add trailing slash
+    const normalized = skillDir.replace(/^\/+|\/+$/g, "") + "/";
+    // Check if most paths start with the skillDir prefix
+    const matchCount = paths.filter((p) => p.startsWith(normalized)).length;
+    // If >50% of paths match, it's a prefixed ZIP
+    if (matchCount > paths.length / 2) {
+        return normalized;
+    }
+    // Also check for .claude/skills/<theme>-ui/ pattern in case skillDir differs
+    const firstPath = paths[0];
+    const match = firstPath.match(/^(\.claude\/skills\/[^/]+\/)/);
+    if (match) {
+        const candidatePrefix = match[1];
+        const prefixCount = paths.filter((p) => p.startsWith(candidatePrefix)).length;
+        if (prefixCount > paths.length / 2) {
+            return candidatePrefix;
+        }
+    }
+    return null;
+}
 export async function pullCommand(options) {
     p.intro(pc.bold("matchkit pull"));
     // Check auth
@@ -243,12 +294,22 @@ export async function pullCommand(options) {
         if (!existsSync(fullSkillDir)) {
             mkdirSync(fullSkillDir, { recursive: true });
         }
+        // Detect if ZIP paths are prefixed with a skill directory
+        // (e.g., ".claude/skills/glass-ui/components/..." vs "components/...")
+        // The server may include the full skillDir prefix — we need to strip it
+        // so files land directly in fullSkillDir, not double-nested.
+        const allPaths = Object.keys(zip.files).filter((p) => !zip.files[p].dir);
+        const skillDirPrefix = detectPrefix(allPaths, config.skillDir);
         let fileCount = 0;
         for (const [path, entry] of Object.entries(zip.files)) {
             if (entry.dir)
                 continue;
+            // Strip the detected prefix to avoid double nesting
+            const relativePath = skillDirPrefix && path.startsWith(skillDirPrefix)
+                ? path.slice(skillDirPrefix.length)
+                : path;
             const content = await entry.async("string");
-            const fullPath = join(fullSkillDir, path);
+            const fullPath = join(fullSkillDir, relativePath);
             const dir = dirname(fullPath);
             if (!existsSync(dir)) {
                 mkdirSync(dir, { recursive: true });

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.2");
+    .version("0.1.4");
 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.3",
+  "version": "0.1.5",
   "description": "CLI for MatchKit design system skills. Init projects, add components, manage your design system.",
   "type": "module",
   "main": "dist/index.js",