skillui 1.1.8 → 1.2.0

package/dist/cli.js

@@ -100917,14 +100917,141 @@ async function generateSkill(profile, designMdContent, outputDir, screenshotPath
     profile = { ...profile, fontSources: result.updatedSources };
     bundledFontCount = result.bundledCount;
   }
-  const skillMd = generateSkillMd(profile, screenshotPath, ultraResult);
-  fs13.writeFileSync(path14.join(skillDir, "SKILL.md"), skillMd, "utf-8");
   const finalDesignMd = bundledFontCount > 0 ? generateDesignMd(profile, screenshotPath) : designMdContent;
   fs13.writeFileSync(path14.join(refsDir, "DESIGN.md"), finalDesignMd, "utf-8");
+  let skillMd = generateSkillMd(profile, screenshotPath, ultraResult);
+  skillMd += embedReferenceFiles(refsDir, skillDir);
+  fs13.writeFileSync(path14.join(skillDir, "SKILL.md"), skillMd, "utf-8");
   const skillFile = path14.join(outputDir, `${skillDirName}.skill`);
   await createZip(skillDir, skillFile);
   return { skillDir, skillFile };
 }
+function embedReferenceFiles(refsDir, skillDir) {
+  let md = `
+---
+
+# Full Reference Files
+
+`;
+  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 (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);
+    if (!fs13.existsSync(filePath)) continue;
+    let content = fs13.readFileSync(filePath, "utf-8").trim();
+    if (content.startsWith("---")) {
+      const end = content.indexOf("---", 3);
+      if (end !== -1) content = content.slice(end + 3).trim();
+    }
+    md += `## ${title}
+
+${content}
+
+`;
+  }
+  const tokensDir = path14.join(skillDir, "tokens");
+  const tokenFiles = ["colors.json", "spacing.json", "typography.json"];
+  const tokenSections = [];
+  for (const tf of tokenFiles) {
+    const p = path14.join(tokensDir, tf);
+    if (!fs13.existsSync(p)) continue;
+    tokenSections.push(`### tokens/${tf}
+\`\`\`json
+${fs13.readFileSync(p, "utf-8").trim()}
+\`\`\``);
+  }
+  if (tokenSections.length > 0) {
+    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.
+
+`;
+    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;
+}
 function generateSkillMd(profile, screenshotPath, ultraResult) {
   const bg = profile.colors.find((c) => c.role === "background");
   const surface = profile.colors.find((c) => c.role === "surface");
@@ -104559,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.8";
+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.8",
+  "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": {