skillui 1.1.9 → 1.2.1

package/dist/cli.js

@@ -4010,7 +4010,7 @@ var require_jiti = __commonJS({
         }, pathe_ff20891b_dirname = function(p) {
           const segments = normalizeWindowsPath(p).replace(/\/$/, "").split("/").slice(0, -1);
           return 1 === segments.length && _DRIVE_LETTER_RE.test(segments[0]) && (segments[0] += "/"), segments.join("/") || (isAbsolute(p) ? "/" : ".");
-        }, basename5 = function(p, extension) {
+        }, basename6 = function(p, extension) {
           const lastSegment = normalizeWindowsPath(p).split("/").pop();
           return extension && lastSegment.endsWith(extension) ? lastSegment.slice(0, -extension.length) : lastSegment;
         }, suspectProtoRx = /"(?:_|\\u0{2}5[Ff]){2}(?:p|\\u0{2}70)(?:r|\\u0{2}72)(?:o|\\u0{2}6[Ff])(?:t|\\u0{2}74)(?:o|\\u0{2}6[Ff])(?:_|\\u0{2}5[Ff]){2}"\s*:/, suspectConstructorRx = /"(?:c|\\u0063)(?:o|\\u006[Ff])(?:n|\\u006[Ee])(?:s|\\u0073)(?:t|\\u0074)(?:r|\\u0072)(?:u|\\u0075)(?:c|\\u0063)(?:t|\\u0074)(?:o|\\u006[Ff])(?:r|\\u0072)"\s*:/, JsonSigRx = /^\s*["[{]|^\s*-?\d{1,16}(\.\d{1,17})?([Ee][+-]?\d+)?\s*$/;
@@ -6706,7 +6706,7 @@ Default "index" lookups for the main are deprecated for ES modules.`, "Deprecati
           function transform2(topts) {
             let code2 = (function(filename, source, get) {
               if (!opts.cache || !filename) return get();
-              const sourceHash = ` /* v${opts.cacheVersion}-${md5(source, 16)} */`, filebase = basename5(pathe_ff20891b_dirname(filename)) + "-" + basename5(filename), cacheFile = join16(opts.cache, filebase + "." + md5(filename) + ".js");
+              const sourceHash = ` /* v${opts.cacheVersion}-${md5(source, 16)} */`, filebase = basename6(pathe_ff20891b_dirname(filename)) + "-" + basename6(filename), cacheFile = join16(opts.cache, filebase + "." + md5(filename) + ".js");
               if ((0, external_fs_.existsSync)(cacheFile)) {
                 const cacheSource = (0, external_fs_.readFileSync)(cacheFile, "utf8");
                 if (cacheSource.endsWith(sourceHash)) return debug2("[cache hit]", filename, "~>", cacheFile), cacheSource;
@@ -6764,7 +6764,7 @@ Default "index" lookups for the main are deprecated for ES modules.`, "Deprecati
           }
           function evalModule(source, evalOptions = {}) {
             var _a2;
-            const id = evalOptions.id || (evalOptions.filename ? basename5(evalOptions.filename) : `_jitiEval.${evalOptions.ext || ".js"}`), filename = evalOptions.filename || _resolve2(id), ext = evalOptions.ext || extname3(filename), cache3 = evalOptions.cache || parentCache || {}, isTypescript = ".ts" === ext || ".mts" === ext || ".cts" === ext, isNativeModule = ".mjs" === ext || ".js" === ext && "module" === (null === (_a2 = (function(path17) {
+            const id = evalOptions.id || (evalOptions.filename ? basename6(evalOptions.filename) : `_jitiEval.${evalOptions.ext || ".js"}`), filename = evalOptions.filename || _resolve2(id), ext = evalOptions.ext || extname3(filename), cache3 = evalOptions.cache || parentCache || {}, isTypescript = ".ts" === ext || ".mts" === ext || ".cts" === ext, isNativeModule = ".mjs" === ext || ".js" === ext && "module" === (null === (_a2 = (function(path17) {
               for (; path17 && "." !== path17 && "/" !== path17; ) {
                 path17 = join16(path17, "..");
                 try {
@@ -46006,8 +46006,8 @@ var require_tmp = __commonJS({
       if (!_isUndefined(options.name)) {
         const name42 = options.name;
         if (path17.isAbsolute(name42)) throw new Error(`name option must not contain an absolute path, found "${name42}".`);
-        const basename5 = path17.basename(name42);
-        if (basename5 === ".." || basename5 === "." || basename5 !== name42)
+        const basename6 = path17.basename(name42);
+        if (basename6 === ".." || basename6 === "." || basename6 !== name42)
           throw new Error(`name option must not contain a path, found "${name42}".`);
       }
       if (!_isUndefined(options.template) && !options.template.match(TEMPLATE_PATTERN)) {
@@ -100933,15 +100933,16 @@ function embedReferenceFiles(refsDir, skillDir) {
 # Full Reference Files
 
 `;
-  md += `> All reference files are embedded below so Claude has complete context from /skills.
+  md += `> Every output file is embedded below. Claude has full design system context from /skills alone.
 
 `;
   const refFiles = [
-    { file: "DESIGN.md", title: "Design System Tokens" },
-    { file: "ANIMATIONS.md", title: "Animations & Motion" },
-    { file: "LAYOUT.md", title: "Layout & Grid" },
-    { file: "COMPONENTS.md", title: "Component Patterns" },
-    { file: "INTERACTIONS.md", title: "Interactions & States" }
+    { file: "DESIGN.md", title: "Design System Tokens (DESIGN.md)" },
+    { file: "VISUAL_GUIDE.md", title: "Visual Guide \u2014 Screenshots (VISUAL_GUIDE.md)" },
+    { file: "ANIMATIONS.md", title: "Animations & Motion (ANIMATIONS.md)" },
+    { file: "LAYOUT.md", title: "Layout & Grid (LAYOUT.md)" },
+    { file: "COMPONENTS.md", title: "Component Patterns (COMPONENTS.md)" },
+    { file: "INTERACTIONS.md", title: "Interactions & States (INTERACTIONS.md)" }
   ];
   for (const { file, title } of refFiles) {
     const filePath = path14.join(refsDir, file);
@@ -100953,8 +100954,9 @@ function embedReferenceFiles(refsDir, skillDir) {
     }
     md += `## ${title}
 
+${content}
+
 `;
-    md += content + "\n\n";
   }
   const tokensDir = path14.join(skillDir, "tokens");
   const tokenFiles = ["colors.json", "spacing.json", "typography.json"];
@@ -100962,17 +100964,91 @@ function embedReferenceFiles(refsDir, skillDir) {
   for (const tf of tokenFiles) {
     const p = path14.join(tokensDir, tf);
     if (!fs13.existsSync(p)) continue;
-    const raw = fs13.readFileSync(p, "utf-8").trim();
-    tokenSections.push(`### ${tf}
+    tokenSections.push(`### tokens/${tf}
 \`\`\`json
-${raw}
+${fs13.readFileSync(p, "utf-8").trim()}
 \`\`\``);
   }
   if (tokenSections.length > 0) {
-    md += `## Design Tokens (JSON)
+    md += `## Design Tokens \u2014 JSON Files
+
+${tokenSections.join("\n\n")}
+
+`;
+  }
+  const fontsDir = path14.join(skillDir, "fonts");
+  if (fs13.existsSync(fontsDir)) {
+    const fontFiles = fs13.readdirSync(fontsDir).filter((f) => /\.(woff2?|ttf|otf)$/i.test(f));
+    if (fontFiles.length > 0) {
+      md += `## Bundled Fonts (fonts/)
+
+`;
+      md += `The following font files are bundled in the \`fonts/\` directory:
+
+`;
+      for (const f of fontFiles) {
+        md += `- \`fonts/${f}\`
+`;
+      }
+      md += `
+Use these local font files in \`@font-face\` declarations instead of fetching from Google Fonts.
+
+`;
+    }
+  }
+  const screensDir = path14.join(skillDir, "screens");
+  if (fs13.existsSync(screensDir)) {
+    md += `## Screenshots Inventory (screens/)
+
+`;
+    md += `> Study all screenshots carefully before implementing any UI. Match every visual detail exactly.
 
 `;
-    md += tokenSections.join("\n\n") + "\n\n";
+    const screenSubDirs = [
+      { dir: "scroll", label: "Scroll Journey", desc: "Cinematic scroll states \u2014 page visual at each scroll depth" },
+      { dir: "pages", label: "Full Page Screenshots", desc: "Full-page screenshots of each crawled URL" },
+      { dir: "sections", label: "Section Clips", desc: "Clipped individual sections and components" },
+      { dir: "states", label: "Interaction States", desc: "Hover, focus, and active state captures" }
+    ];
+    for (const { dir: dir2, label, desc } of screenSubDirs) {
+      const subDir = path14.join(screensDir, dir2);
+      if (!fs13.existsSync(subDir)) continue;
+      const imgs = fs13.readdirSync(subDir).filter((f) => /\.(png|jpg|jpeg|webp)$/i.test(f)).sort();
+      if (imgs.length === 0) continue;
+      md += `### ${label} (screens/${dir2}/)
+
+*${desc}*
+
+`;
+      for (const img of imgs) {
+        md += `![${img}](screens/${dir2}/${img})
+
+`;
+      }
+    }
+    const indexPath = path14.join(screensDir, "INDEX.md");
+    if (fs13.existsSync(indexPath)) {
+      const indexContent = fs13.readFileSync(indexPath, "utf-8").trim();
+      md += `### Screenshot Index (screens/INDEX.md)
+
+${indexContent}
+
+`;
+    }
+  }
+  const ssDir = path14.join(skillDir, "screenshots");
+  if (fs13.existsSync(ssDir)) {
+    const ssFiles = fs13.readdirSync(ssDir).filter((f) => /\.(png|jpg|jpeg|webp)$/i.test(f));
+    if (ssFiles.length > 0) {
+      md += `## Homepage Screenshots (screenshots/)
+
+`;
+      for (const f of ssFiles) {
+        md += `![${f}](screenshots/${f})
+
+`;
+      }
+    }
   }
   return md;
 }
@@ -104610,7 +104686,7 @@ gradient.pastel = pastel;
 // src/ui.ts
 var import_cli_progress = __toESM(require_cli_progress());
 var path15 = __toESM(require("path"));
-var VERSION = "1.1.9";
+var VERSION = "1.2.1";
 function padAnsi(str, width) {
   const raw = stripAnsi(str);
   return str + " ".repeat(Math.max(0, width - raw.length));
@@ -105029,8 +105105,9 @@ program2.name("skillui").description("Reverse-engineer design systems from any p
         const result = await generateSkill(profile, designMdContent, path16.resolve(opts.out), screenshotPath, ultraAnimations);
         skillFilePath = result.skillFile;
         succeedSpinner(spSkill, ".skill package", skillFilePath);
-        skillInstalled = installSkillForClaude(result.skillDir, safeName);
-        writeClaludeMd(result.skillDir, safeName, profile.projectName);
+        const skillFolderName = path16.basename(result.skillDir);
+        skillInstalled = installSkillForClaude(result.skillDir, skillFolderName);
+        writeClaludeMd(result.skillDir, skillFolderName, profile.projectName);
       } catch (e) {
         failSpinner(spSkill, ".skill package", e.message);
         throw e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skillui",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "description": "Reverse-engineer design systems from any website, repo, or project. Extracts colors, fonts, spacing, animations, and components — packaged as a .skill file for Claude. Pure static analysis, zero AI, zero API keys.",
   "main": "dist/cli.js",
   "bin": {