skillui 1.1.0

package/dist/modes/dir.js

@@ -0,0 +1,213 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runDirMode = runDirMode;
+const framework_1 = require("../extractors/framework");
+const tailwind_1 = require("../extractors/tokens/tailwind");
+const css_1 = require("../extractors/tokens/css");
+const tokens_file_1 = require("../extractors/tokens/tokens-file");
+const components_1 = require("../extractors/components");
+const normalizer_1 = require("../normalizer");
+/**
+ * DIR mode: scan a local project directory and extract design tokens.
+ */
+async function runDirMode(projectDir, nameOverride) {
+    // Step 1: Detect frameworks
+    const frameworks = (0, framework_1.detectFrameworks)(projectDir);
+    const projectName = (0, framework_1.getProjectName)(projectDir, nameOverride);
+    // Step 2: Detect project libraries (icons, state, animations)
+    const libraries = (0, components_1.detectProjectLibraries)(projectDir);
+    // Step 3: Extract raw tokens from all sources (priority order)
+    const tailwindTokens = (0, tailwind_1.extractTailwindTokens)(projectDir);
+    const tokensFileTokens = (0, tokens_file_1.extractTokensFile)(projectDir);
+    const cssTokens = (0, css_1.extractCSSTokens)(projectDir);
+    // Merge all raw tokens
+    const merged = mergeRawTokens([tailwindTokens, tokensFileTokens, cssTokens]);
+    // Step 4: Extract components
+    const components = (0, components_1.extractComponents)(projectDir);
+    // Step 5: Scan component files for additional color/font tokens
+    for (const comp of components) {
+        extractComponentTokens(comp, merged);
+    }
+    // Step 6: Collect animation tokens from components
+    for (const comp of components) {
+        if (comp.hasAnimation) {
+            for (const detail of comp.animationDetails) {
+                if (detail.startsWith('framer-motion')) {
+                    merged.animations.push({
+                        name: 'framer-motion',
+                        type: 'framer-motion',
+                        value: detail,
+                        source: comp.filePath,
+                    });
+                }
+                else if (detail.startsWith('spring:')) {
+                    merged.animations.push({
+                        name: 'spring-config',
+                        type: 'spring',
+                        value: detail.replace('spring: ', ''),
+                        source: comp.filePath,
+                    });
+                }
+                else if (detail.startsWith('tw-animate-')) {
+                    merged.animations.push({
+                        name: detail.replace('tw-', ''),
+                        type: 'css-keyframe',
+                        value: detail,
+                        source: comp.filePath,
+                    });
+                }
+            }
+        }
+    }
+    // Step 7: Normalize into clean DesignProfile
+    return (0, normalizer_1.normalize)(projectName, frameworks, merged, components, libraries);
+}
+function mergeRawTokens(sources) {
+    const merged = {
+        colors: [],
+        fonts: [],
+        spacingValues: [],
+        shadows: [],
+        cssVariables: [],
+        breakpoints: [],
+        borderRadii: [],
+        gradients: [],
+        fontVarMap: {},
+        animations: [],
+        darkModeVars: [],
+        zIndexValues: [],
+        containerMaxWidth: null,
+        fontSources: [],
+        pageSections: [],
+        transitionDurations: [],
+        transitionEasings: [],
+    };
+    for (const src of sources) {
+        // Merge colors, deduplicating by hex value
+        for (const color of src.colors) {
+            const existing = merged.colors.find(c => c.value === color.value);
+            if (existing) {
+                existing.frequency += color.frequency;
+                if (color.name && !existing.name)
+                    existing.name = color.name;
+            }
+            else {
+                merged.colors.push({ ...color });
+            }
+        }
+        // Merge fonts
+        for (const font of src.fonts) {
+            if (font.family && !merged.fonts.find(f => f.family === font.family && f.size === font.size)) {
+                merged.fonts.push({ ...font });
+            }
+        }
+        // Merge spacing
+        merged.spacingValues.push(...src.spacingValues);
+        // Merge shadows
+        for (const shadow of src.shadows) {
+            if (!merged.shadows.find(s => s.value === shadow.value)) {
+                merged.shadows.push({ ...shadow });
+            }
+        }
+        // Merge CSS variables
+        for (const v of src.cssVariables) {
+            if (!merged.cssVariables.find(cv => cv.name === v.name)) {
+                merged.cssVariables.push({ ...v });
+            }
+        }
+        // Merge breakpoints (prefer tailwind over css)
+        for (const bp of src.breakpoints) {
+            if (!merged.breakpoints.find(b => b.value === bp.value)) {
+                merged.breakpoints.push({ ...bp });
+            }
+        }
+        // Merge border radii
+        if (src.borderRadii) {
+            for (const r of src.borderRadii) {
+                if (!merged.borderRadii.includes(r))
+                    merged.borderRadii.push(r);
+            }
+        }
+        // Merge gradients
+        if (src.gradients) {
+            merged.gradients.push(...src.gradients);
+        }
+        // Merge font var map
+        if (src.fontVarMap) {
+            Object.assign(merged.fontVarMap, src.fontVarMap);
+        }
+        // Merge animations
+        if (src.animations) {
+            merged.animations.push(...src.animations);
+        }
+        // Merge dark mode vars
+        if (src.darkModeVars) {
+            for (const dmv of src.darkModeVars) {
+                if (!merged.darkModeVars.find(d => d.variable === dmv.variable)) {
+                    merged.darkModeVars.push(dmv);
+                }
+            }
+        }
+        // Merge z-index values
+        if (src.zIndexValues) {
+            for (const z of src.zIndexValues) {
+                if (!merged.zIndexValues.includes(z))
+                    merged.zIndexValues.push(z);
+            }
+        }
+        // Container max-width: prefer explicit
+        if (src.containerMaxWidth && !merged.containerMaxWidth) {
+            merged.containerMaxWidth = src.containerMaxWidth;
+        }
+        // Merge font sources
+        if (src.fontSources) {
+            for (const fs of src.fontSources) {
+                if (!merged.fontSources.find(f => f.family === fs.family && f.src === fs.src)) {
+                    merged.fontSources.push(fs);
+                }
+            }
+        }
+        // Merge page sections
+        if (src.pageSections) {
+            for (const ps of src.pageSections) {
+                if (!merged.pageSections.find(p => p.type === ps.type)) {
+                    merged.pageSections.push(ps);
+                }
+            }
+        }
+        // Merge transition durations/easings
+        if (src.transitionDurations) {
+            for (const d of src.transitionDurations) {
+                if (!merged.transitionDurations.includes(d))
+                    merged.transitionDurations.push(d);
+            }
+        }
+        if (src.transitionEasings) {
+            for (const e of src.transitionEasings) {
+                if (!merged.transitionEasings.includes(e))
+                    merged.transitionEasings.push(e);
+            }
+        }
+    }
+    return merged;
+}
+function extractComponentTokens(comp, tokens) {
+    if (comp.jsxSnippet) {
+        const hexMatches = comp.jsxSnippet.matchAll(/#([0-9a-fA-F]{3,6})\b/g);
+        for (const m of hexMatches) {
+            let hex = m[0].toLowerCase();
+            if (hex.length === 4) {
+                const [, r, g, b] = hex.split('');
+                hex = `#${r}${r}${g}${g}${b}${b}`;
+            }
+            const existing = tokens.colors.find(c => c.value === hex);
+            if (existing) {
+                existing.frequency++;
+            }
+            else {
+                tokens.colors.push({ value: hex, frequency: 1, source: 'component' });
+            }
+        }
+    }
+}
+//# sourceMappingURL=dir.js.map

package/dist/modes/repo.d.ts

@@ -0,0 +1,6 @@
+import { DesignProfile } from '../types';
+/**
+ * REPO mode: clone a git repo into a temp directory, then run dir mode.
+ */
+export declare function runRepoMode(repoUrl: string, nameOverride?: string): Promise<DesignProfile>;
+//# sourceMappingURL=repo.d.ts.map

package/dist/modes/repo.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runRepoMode = runRepoMode;
+const tmp = __importStar(require("tmp"));
+const dir_1 = require("./dir");
+/**
+ * REPO mode: clone a git repo into a temp directory, then run dir mode.
+ */
+async function runRepoMode(repoUrl, nameOverride) {
+    // Import simple-git
+    const { simpleGit } = await Promise.resolve().then(() => __importStar(require('simple-git')));
+    const git = simpleGit();
+    // Create temp directory
+    const tmpDir = tmp.dirSync({ unsafeCleanup: true, prefix: 'skillui-' });
+    const cloneDir = tmpDir.name;
+    try {
+        process.stdout.write('  Cloning...');
+        await git.clone(repoUrl, cloneDir, ['--depth', '1', '--single-branch']);
+        console.log(' \u2713');
+        // Derive project name from repo URL if not overridden
+        const derivedName = nameOverride || deriveRepoName(repoUrl);
+        // Run dir mode on the cloned repo
+        const profile = await (0, dir_1.runDirMode)(cloneDir, derivedName);
+        return profile;
+    }
+    finally {
+        // Cleanup temp directory
+        try {
+            tmpDir.removeCallback();
+        }
+        catch {
+            // Best effort cleanup
+        }
+    }
+}
+function deriveRepoName(url) {
+    // Handle GitHub URLs: https://github.com/org/repo or git@github.com:org/repo.git
+    const match = url.match(/\/([^\/]+?)(?:\.git)?$/);
+    if (match)
+        return match[1];
+    return 'project';
+}
+//# sourceMappingURL=repo.js.map

package/dist/modes/ultra.d.ts

@@ -0,0 +1,22 @@
+import { DesignProfile } from '../types';
+import { UltraOptions, UltraResult } from '../types-ultra';
+/**
+ * Ultra mode orchestrator.
+ *
+ * Runs AFTER the normal url mode pipeline. Adds:
+ * - screens/pages/      — full-page screenshots per crawled page
+ * - screens/sections/   — clipped section screenshots per page
+ * - screens/states/     — hover/focus state screenshots per interactive element
+ * - screens/scroll/     — 7 scroll-journey screenshots + video first frames
+ * - references/LAYOUT.md
+ * - references/INTERACTIONS.md
+ * - references/COMPONENTS.md
+ * - references/ANIMATIONS.md  ← NEW: cinematic animation documentation
+ * - tokens/colors.json
+ * - tokens/spacing.json
+ * - tokens/typography.json
+ *
+ * All existing outputs remain untouched.
+ */
+export declare function runUltraMode(url: string, profile: DesignProfile, skillDir: string, opts: UltraOptions): Promise<UltraResult>;
+//# sourceMappingURL=ultra.d.ts.map

package/dist/modes/ultra.js

@@ -0,0 +1,285 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runUltraMode = runUltraMode;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const pages_1 = require("../extractors/ultra/pages");
+const interactions_1 = require("../extractors/ultra/interactions");
+const layout_1 = require("../extractors/ultra/layout");
+const components_dom_1 = require("../extractors/ultra/components-dom");
+const animations_1 = require("../extractors/ultra/animations");
+const layout_md_1 = require("../writers/layout-md");
+const interactions_md_1 = require("../writers/interactions-md");
+const components_md_1 = require("../writers/components-md");
+const animations_md_1 = require("../writers/animations-md");
+const tokens_json_1 = require("../writers/tokens-json");
+/**
+ * Ultra mode orchestrator.
+ *
+ * Runs AFTER the normal url mode pipeline. Adds:
+ * - screens/pages/      — full-page screenshots per crawled page
+ * - screens/sections/   — clipped section screenshots per page
+ * - screens/states/     — hover/focus state screenshots per interactive element
+ * - screens/scroll/     — 7 scroll-journey screenshots + video first frames
+ * - references/LAYOUT.md
+ * - references/INTERACTIONS.md
+ * - references/COMPONENTS.md
+ * - references/ANIMATIONS.md  ← NEW: cinematic animation documentation
+ * - tokens/colors.json
+ * - tokens/spacing.json
+ * - tokens/typography.json
+ *
+ * All existing outputs remain untouched.
+ */
+async function runUltraMode(url, profile, skillDir, opts) {
+    // Ensure all output directories exist
+    fs.mkdirSync(path.join(skillDir, 'screens', 'pages'), { recursive: true });
+    fs.mkdirSync(path.join(skillDir, 'screens', 'sections'), { recursive: true });
+    fs.mkdirSync(path.join(skillDir, 'screens', 'states'), { recursive: true });
+    fs.mkdirSync(path.join(skillDir, 'screens', 'scroll'), { recursive: true });
+    fs.mkdirSync(path.join(skillDir, 'references'), { recursive: true });
+    fs.mkdirSync(path.join(skillDir, 'tokens'), { recursive: true });
+    let hasPlaywright = false;
+    try {
+        require.resolve('playwright');
+        hasPlaywright = true;
+    }
+    catch { /* not installed */ }
+    if (!hasPlaywright) {
+        process.stdout.write('\n  ⚠  Playwright not installed — ultra visual features skipped\n');
+        process.stdout.write('     Run: npm install playwright && npx playwright install chromium\n\n');
+        (0, tokens_json_1.writeTokensJson)(profile, skillDir);
+        writeStubs(skillDir);
+        const emptyAnim = emptyAnimResult();
+        return { pageScreenshots: [], sectionScreenshots: [], interactions: [], layouts: [], domComponents: [], animations: emptyAnim };
+    }
+    // ── Step 1: Animation extraction (scroll journey + keyframes + libraries) ──
+    process.stdout.write('  Extracting animations & scroll journey...');
+    const animations = await (0, animations_1.captureAnimations)(url, skillDir);
+    console.log(` ✓ (${animations.keyframes.length} keyframes · ${animations.scrollFrames.length} scroll frames · ${animations.libraries.length} libs)`);
+    // ── Step 2: Multi-page screenshots + section clips ─────────────────────
+    process.stdout.write(`  Crawling ${opts.screens} pages...`);
+    const { pages, sections } = await (0, pages_1.capturePageScreenshots)(url, skillDir, opts.screens);
+    console.log(` ✓ (${pages.length} pages · ${sections.length} sections)`);
+    // ── Step 3: Micro-interactions ────────────────────────────────────────
+    process.stdout.write('  Capturing interactions...');
+    const interactions = await (0, interactions_1.captureInteractions)(url, skillDir);
+    console.log(` ✓ (${interactions.length} components)`);
+    // ── Step 4: Layout extraction ──────────────────────────────────────────
+    process.stdout.write('  Extracting layout...');
+    const layouts = await (0, layout_1.extractLayouts)(url);
+    console.log(` ✓ (${layouts.length} containers)`);
+    // ── Step 5: DOM component detection ───────────────────────────────────
+    process.stdout.write('  Detecting DOM components...');
+    const domComponents = await (0, components_dom_1.detectDOMComponents)(url);
+    console.log(` ✓ (${domComponents.length} patterns)`);
+    // ── Step 6: Write all reference files ─────────────────────────────────
+    process.stdout.write('  Writing extended outputs...');
+    const refsDir = path.join(skillDir, 'references');
+    // ANIMATIONS.md — cinematic motion documentation
+    const animMd = (0, animations_md_1.generateAnimationsMd)(animations, profile);
+    fs.writeFileSync(path.join(refsDir, 'ANIMATIONS.md'), animMd, 'utf-8');
+    // LAYOUT.md
+    const layoutMd = (0, layout_md_1.generateLayoutMd)(layouts, profile);
+    fs.writeFileSync(path.join(refsDir, 'LAYOUT.md'), layoutMd, 'utf-8');
+    // INTERACTIONS.md
+    const interactionsMd = (0, interactions_md_1.generateInteractionsMd)(interactions, profile);
+    fs.writeFileSync(path.join(refsDir, 'INTERACTIONS.md'), interactionsMd, 'utf-8');
+    // COMPONENTS.md
+    const componentsMd = (0, components_md_1.generateComponentsMd)(domComponents, profile);
+    fs.writeFileSync(path.join(refsDir, 'COMPONENTS.md'), componentsMd, 'utf-8');
+    // Token JSON files
+    (0, tokens_json_1.writeTokensJson)(profile, skillDir);
+    // VISUAL_GUIDE.md — master visual reference embedding all screenshots
+    const visualGuideMd = generateVisualGuideMd(profile, pages, sections, animations);
+    fs.writeFileSync(path.join(refsDir, 'VISUAL_GUIDE.md'), visualGuideMd, 'utf-8');
+    // Ultra screenshot index
+    writeScreensIndex(pages, sections, animations, skillDir);
+    console.log(' ✓');
+    // ── Print ultra summary ────────────────────────────────────────────────
+    printUltraSummary(animations);
+    return { pageScreenshots: pages, sectionScreenshots: sections, interactions, layouts, domComponents, animations };
+}
+// ── Visual Guide Generator ────────────────────────────────────────────
+function generateVisualGuideMd(profile, pages, sections, anim) {
+    let md = `# ${profile.projectName} — Visual Guide\n\n`;
+    md += `> Master visual reference. Study every screenshot carefully before implementing any UI.\n`;
+    md += `> Match colors, layout, typography, spacing, and motion states exactly.\n\n`;
+    // Animation stack summary
+    if (anim.libraries.length > 0) {
+        const libs = anim.libraries.map(l => `**${l.name}**`).join(', ');
+        md += `**Motion Stack:** ${libs}\n\n`;
+    }
+    if (anim.webglDetected) {
+        md += `**WebGL/3D:** Detected (${anim.canvasCount} canvas elements) — replicate with Three.js or CSS 3D transforms\n\n`;
+    }
+    // Scroll journey — most important section
+    if (anim.scrollFrames.length > 0) {
+        md += `## Scroll Journey\n\n`;
+        md += `The page has cinematic scroll animations. Each screenshot below shows the exact visual state at that scroll depth.\n`;
+        md += `**Replicate these transitions precisely** — the design changes dramatically as you scroll.\n\n`;
+        for (const frame of anim.scrollFrames) {
+            const relPath = `../screens/scroll/${path.basename(frame.filePath)}`;
+            const label = frame.scrollPercent === 0 ? 'Hero — Above the fold'
+                : frame.scrollPercent === 100 ? 'Footer — End of page'
+                    : `${frame.scrollPercent}% scroll depth`;
+            md += `### ${label}\n\n`;
+            md += `*Scroll position: ${frame.scrollY}px of ${frame.pageHeight}px total*\n\n`;
+            md += `![${label}](${relPath})\n\n`;
+        }
+    }
+    // Video backgrounds
+    if (anim.videos.some(v => v.firstFramePath)) {
+        md += `## Video Backgrounds\n\n`;
+        md += `These videos play as background elements. Use first-frame as poster image while video loads.\n\n`;
+        for (const v of anim.videos.filter(vv => vv.firstFramePath)) {
+            const relPath = `../screens/scroll/${path.basename(v.firstFramePath)}`;
+            md += `### Video ${v.index} (${v.role})\n\n`;
+            if (v.src)
+                md += `*Source: \`${v.src.slice(0, 80)}...\`*\n\n`;
+            md += `![Video ${v.index} first frame](${relPath})\n\n`;
+        }
+    }
+    // Page screenshots
+    if (pages.length > 0) {
+        md += `## Full Page Screenshots\n\n`;
+        for (const p of pages) {
+            const relPath = `../screens/pages/${path.basename(p.filePath)}`;
+            md += `### ${p.title}\n\n`;
+            md += `*URL: \`${p.url}\`*\n\n`;
+            md += `![${p.title}](${relPath})\n\n`;
+        }
+    }
+    // Section clips
+    if (sections.length > 0) {
+        md += `## Section Screenshots\n\n`;
+        md += `Clipped sections showing individual components in context.\n\n`;
+        for (const s of sections) {
+            const relPath = `../screens/sections/${path.basename(s.filePath)}`;
+            md += `### Section ${s.index} — \`${s.selector}\`\n\n`;
+            md += `*${s.width}×${s.height}px*\n\n`;
+            md += `![Section ${s.index}](${relPath})\n\n`;
+        }
+    }
+    return md;
+}
+// ── Helpers ───────────────────────────────────────────────────────────
+function printUltraSummary(anim) {
+    const libs = anim.libraries.map(l => l.name).join(', ') || 'none';
+    console.log('');
+    console.log(`  Animation Stack: ${libs}`);
+    if (anim.webglDetected)
+        console.log(`  WebGL/3D: detected (${anim.canvasCount} canvas elements)`);
+    if (anim.videos.length > 0) {
+        const bg = anim.videos.filter(v => v.role === 'background').length;
+        console.log(`  Video: ${anim.videos.length} elements (${bg} background)`);
+    }
+    if (anim.lottieCount > 0)
+        console.log(`  Lottie: ${anim.lottieCount} players`);
+    if (anim.keyframes.length > 0)
+        console.log(`  Keyframes: ${anim.keyframes.length} extracted`);
+    if (anim.scrollPatterns.length > 0)
+        console.log(`  Scroll patterns: ${anim.scrollPatterns.length} types`);
+}
+function writeScreensIndex(pages, sections, anim, skillDir) {
+    let md = `# Screenshot Index\n\n`;
+    // Scroll journey (most important for animation sites)
+    if (anim.scrollFrames.length > 0) {
+        md += `## Scroll Journey\n\n`;
+        md += `> Shows the cinematic state at each point of the page\n\n`;
+        md += `| Scroll | Y Position | File |\n`;
+        md += `|--------|-----------|------|\n`;
+        for (const f of anim.scrollFrames) {
+            md += `| ${f.scrollPercent}% | ${f.scrollY}px | \`${f.filePath}\` |\n`;
+        }
+        md += `\n`;
+    }
+    // Video frames
+    if (anim.videos.some(v => v.firstFramePath)) {
+        md += `## Video First Frames\n\n`;
+        for (const v of anim.videos) {
+            if (v.firstFramePath) {
+                md += `- Video ${v.index} (${v.role}): \`${v.firstFramePath}\`\n`;
+            }
+        }
+        md += `\n`;
+    }
+    if (pages.length > 0) {
+        md += `## Pages\n\n`;
+        md += `| Page | URL | File |\n`;
+        md += `|------|-----|------|\n`;
+        for (const p of pages) {
+            md += `| ${p.title} | \`${p.url}\` | \`${p.filePath}\` |\n`;
+        }
+        md += `\n`;
+    }
+    if (sections.length > 0) {
+        md += `## Sections\n\n`;
+        md += `| Page | Section | File |\n`;
+        md += `|------|---------|------|\n`;
+        for (const s of sections) {
+            md += `| ${s.page} | #${s.index} (${s.selector}) | \`${s.filePath}\` |\n`;
+        }
+        md += `\n`;
+    }
+    fs.writeFileSync(path.join(skillDir, 'screens', 'INDEX.md'), md, 'utf-8');
+}
+function writeStubs(skillDir) {
+    const refsDir = path.join(skillDir, 'references');
+    const note = '> Install Playwright to enable: `npm install playwright && npx playwright install chromium`\n\nRun `skillui --url <url> --mode ultra` after installing.\n';
+    for (const file of ['ANIMATIONS.md', 'LAYOUT.md', 'INTERACTIONS.md', 'COMPONENTS.md']) {
+        const filePath = path.join(refsDir, file);
+        if (!fs.existsSync(filePath)) {
+            const title = file.replace('.md', '').replace(/-/g, ' ');
+            fs.writeFileSync(filePath, `# ${title} Reference\n\n${note}`, 'utf-8');
+        }
+    }
+}
+function emptyAnimResult() {
+    return {
+        keyframes: [],
+        scrollFrames: [],
+        libraries: [],
+        videos: [],
+        scrollPatterns: [],
+        animationVars: [],
+        globalTransitions: [],
+        canvasCount: 0,
+        webglDetected: false,
+        lottieCount: 0,
+    };
+}
+//# sourceMappingURL=ultra.js.map

package/dist/modes/url.d.ts

@@ -0,0 +1,14 @@
+import { DesignProfile } from '../types';
+/**
+ * URL mode: crawl a live website and extract design tokens.
+ *
+ * Strategy:
+ * 1. ALWAYS fetch HTML + linked CSS via HTTP (no Playwright needed)
+ * 2. If Playwright is available, ALSO extract computed styles from live DOM
+ * 3. Merge both token sets for maximum coverage
+ */
+export declare function runUrlMode(url: string, nameOverride?: string, skillDir?: string): Promise<{
+    profile: DesignProfile;
+    screenshotPath: string | null;
+}>;
+//# sourceMappingURL=url.d.ts.map