skillui 1.1.9 → 1.2.0

package/dist/cli.js

@@ -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.0";
 function padAnsi(str, width) {
   const raw = stripAnsi(str);
   return str + " ".repeat(Math.max(0, width - raw.length));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skillui",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "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": {