skillui 1.1.3 → 1.1.5

package/README.md

@@ -1,8 +1,14 @@
-# skillui
-
-**Reverse-engineer any design system. Pure static analysis — no AI, no API keys.**
+```
+ ░██████╗██╗░░██╗██╗██╗░░░░░██╗░░░░░██╗░░░██╗██╗
+ ██╔════╝██║░██╔╝██║██║░░░░░██║░░░░░██║░░░██║██║
+ ╚█████╗░█████═╝░██║██║░░░░░██║░░░░░██║░░░██║██║
+ ░╚═══██╗██╔═██╗░██║██║░░░░░██║░░░░░██║░░░██║██║
+ ██████╔╝██║░╚██╗██║███████╗███████╗╚██████╔╝██║
+ ╚═════╝░╚═╝░░╚═╝╚═╝╚══════╝╚══════╝░╚═════╝░╚═╝
+```
+> Reverse-engineer any design system. Pure static analysis. No AI, no API keys.
 
-Point `skillui` at any website, git repo, or local project and get exact colors, fonts, spacing, components, and animations — packaged as a `.skill` file Claude can read.
+Point skillui at any website, git repo, or local project and get exact colors, fonts, spacing, components, and animations packaged as a `.skill` file Claude can read.
 
 ```bash
 npm install -g skillui
@@ -16,7 +22,7 @@ skillui --url https://yoursite.com --mode ultra
 skillui crawls your target and extracts:
 
 | Output | Contents |
-|--------|----------|
+|---|---|
 | `DESIGN.md` | Colors, typography, spacing, border radius, components |
 | `ANIMATIONS.md` | CSS keyframes, scroll triggers, GSAP/Lottie/Three.js detection |
 | `LAYOUT.md` | Flex/grid containers, page structure, spacing relationships |
@@ -63,6 +69,7 @@ skillui --url https://linear.app --mode ultra
 ```
 
 Ultra mode adds:
+
 - 7 scroll journey screenshots showing the page at each scroll depth
 - Hover/focus interaction state diffs
 - Full CSS keyframe extraction
@@ -83,9 +90,7 @@ skillui --dir ./my-app
 skillui --repo https://github.com/org/repo
 ```
 
----
-
-## All flags
+### All flags
 
 ```
 skillui --url <url>           Crawl a live website
@@ -114,7 +119,7 @@ Then ask Claude:
 
 > "Build me a dashboard that matches the Linear design system"
 
-Claude will read DESIGN.md, ANIMATIONS.md, LAYOUT.md, COMPONENTS.md, and all scroll journey screenshots to reconstruct the exact visual language of the site.
+Claude will read `DESIGN.md`, `ANIMATIONS.md`, `LAYOUT.md`, `COMPONENTS.md`, and all scroll journey screenshots to reconstruct the exact visual language of the site.
 
 ---
 
@@ -174,12 +179,12 @@ skillui --url https://linear.app --out ./design-systems
 
 ## How it works
 
-skillui uses pure static analysis — no AI, no API keys, no cloud.
+skillui uses pure static analysis. No AI, no API keys, no cloud.
 
-1. **URL mode** — fetches HTML, crawls all linked CSS files, extracts computed styles via Playwright DOM inspection
-2. **Dir mode** — scans all `.css`, `.scss`, `.ts`, `.tsx`, `.js`, `.jsx` files for design tokens, Tailwind config, CSS variables, and component patterns
-3. **Repo mode** — clones the repo to a temp directory and runs dir mode
-4. **Ultra mode** — runs Playwright to capture scroll journey screenshots, detect animation libraries from `window.*` globals, extract `@keyframes` from `document.styleSheets`, capture hover/focus state diffs, and fingerprint DOM components
+- **URL mode** fetches HTML, crawls all linked CSS files, extracts computed styles via Playwright DOM inspection
+- **Dir mode** scans all `.css`, `.scss`, `.ts`, `.tsx`, `.js`, `.jsx` files for design tokens, Tailwind config, CSS variables, and component patterns
+- **Repo mode** clones the repo to a temp directory and runs dir mode
+- **Ultra mode** runs Playwright to capture scroll journey screenshots, detect animation libraries from `window.*` globals, extract `@keyframes` from `document.styleSheets`, capture hover/focus state diffs, and fingerprint DOM components
 
 ---
 
@@ -192,4 +197,4 @@ skillui uses pure static analysis — no AI, no API keys, no cloud.
 
 ## License
 
-MIT
+MIT

package/dist/cli.js

@@ -104561,7 +104561,7 @@ gradient.pastel = pastel;
 // src/ui.ts
 var import_cli_progress = __toESM(require_cli_progress());
 var path15 = __toESM(require("path"));
-var VERSION = "1.1.3";
+var VERSION = "1.1.5";
 function padAnsi(str, width) {
   const raw = stripAnsi(str);
   return str + " ".repeat(Math.max(0, width - raw.length));
@@ -104755,7 +104755,7 @@ function showUltraPlaywrightError() {
   console.log("");
 }
 function showResults(data) {
-  const { profile, animations, skillFilePath, designMdPath, projectName } = data;
+  const { profile, animations, skillFilePath, designMdPath, projectName, skillInstalled } = data;
   const fontCount = new Set(profile.typography.map((t) => t.fontFamily)).size;
   const framework = profile.frameworks.map((f) => f.name).join(", ") || "none detected";
   const darkMode = profile.designTraits.hasDarkMode ? "detected" : "not detected";
@@ -104806,17 +104806,17 @@ function showResults(data) {
     }));
     console.log("");
   }
+  const skillLine = skillInstalled ? source_default.hex("#4ade80")("  \u2713 Skill auto-installed") + source_default.dim(" \u2014 type ") + source_default.hex("#38bdf8")("/skills") + source_default.dim(" in Claude Code to see it") : source_default.dim("  Copy SKILL.md to ") + source_default.hex("#38bdf8")("~/.claude/skills/" + projectName + ".md");
   const nextSteps = [
-    source_default.dim("  Install skill in Claude Code:"),
-    "    " + source_default.hex("#38bdf8")("claude skill install ./" + projectName + ".skill"),
+    skillLine,
     "",
-    source_default.dim("  Or drop DESIGN.md into your project and ask Claude:"),
-    "    " + source_default.dim('"Build me a UI that matches this design system"')
+    source_default.dim("  Then ask Claude:"),
+    "    " + source_default.dim('"Build me a UI that matches the ' + projectName + ' design system"')
   ].join("\n");
   console.log(boxen(nextSteps, {
     title: source_default.bold(" Next steps "),
     borderStyle: "round",
-    borderColor: "yellow",
+    borderColor: skillInstalled ? "green" : "yellow",
     width: 76,
     padding: { top: 0, bottom: 0, left: 0, right: 1 }
   }));
@@ -104973,12 +104973,14 @@ program2.name("skillui").description("Reverse-engineer design systems from any p
       succeedSpinner(spWrite, "DESIGN.md", designMdPath);
     }
     let skillFilePath;
+    let skillInstalled = false;
     if (shouldWriteSkill) {
       const spSkill = startSpinner("Bundling .skill package...");
       try {
         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);
       } catch (e) {
         failSpinner(spSkill, ".skill package", e.message);
         throw e;
@@ -104989,7 +104991,8 @@ program2.name("skillui").description("Reverse-engineer design systems from any p
       animations: ultraAnimations ?? void 0,
       skillFilePath,
       designMdPath,
-      projectName: safeName
+      projectName: safeName,
+      skillInstalled
     });
   } catch (err) {
     console.error(`
@@ -104999,6 +105002,20 @@ program2.name("skillui").description("Reverse-engineer design systems from any p
   }
 });
 program2.parse();
+function installSkillForClaude(skillDir, safeName) {
+  try {
+    const skillMdSrc = path16.join(skillDir, "SKILL.md");
+    if (!fs14.existsSync(skillMdSrc)) return false;
+    const homeDir = process.env.HOME || process.env.USERPROFILE || "";
+    const claudeSkillsDir = path16.join(homeDir, ".claude", "skills");
+    fs14.mkdirSync(claudeSkillsDir, { recursive: true });
+    const dest = path16.join(claudeSkillsDir, `${safeName}.md`);
+    fs14.copyFileSync(skillMdSrc, dest);
+    return true;
+  } catch {
+    return false;
+  }
+}
 /*! Bundled license information:
 
 tmp/lib/tmp.js:

package/package.json

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