skillui 1.1.0

package/dist/extractors/ultra/components-dom.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectDOMComponents = detectDOMComponents;
+/**
+ * Ultra mode — DOM Component Detector
+ *
+ * Detects repeated UI components by analyzing DOM structure:
+ * - Elements with the same class pattern appearing 3+ times → component
+ * - Groups by normalized class fingerprint
+ * - Extracts representative HTML snippet
+ *
+ * Requires Playwright (optional peer dependency).
+ */
+async function detectDOMComponents(url) {
+    let playwright;
+    try {
+        playwright = require('playwright');
+    }
+    catch {
+        return [];
+    }
+    const browser = await playwright.chromium.launch({ headless: true });
+    try {
+        const context = await browser.newContext({
+            viewport: { width: 1440, height: 900 },
+            userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+        });
+        const page = await context.newPage();
+        await page.goto(url, { waitUntil: 'networkidle', timeout: 25000 });
+        await page.waitForTimeout(1000);
+        const components = await page.evaluate(() => {
+            // ── Fingerprint an element by its structure ───────────────────────
+            function fingerprint(el) {
+                const tag = el.tagName.toLowerCase();
+                // Normalize class names: remove dynamic/utility classes, sort
+                const stableClasses = Array.from(el.classList)
+                    .filter(c => {
+                    // Skip Tailwind utility classes, JS hooks, state classes
+                    if (/^(js-|is-|has-|data-|aria-)/.test(c))
+                        return false;
+                    if (/^(hover:|focus:|active:|sm:|md:|lg:|xl:|2xl:)/.test(c))
+                        return false;
+                    // Keep semantic/BEM-like classes
+                    return c.length >= 3 && c.length <= 40 && /^[a-zA-Z]/.test(c);
+                })
+                    .sort()
+                    .slice(0, 4);
+                const childTags = Array.from(el.children)
+                    .slice(0, 4)
+                    .map(c => c.tagName.toLowerCase())
+                    .join(',');
+                return `${tag}[${stableClasses.join('.')}](${childTags})`;
+            }
+            // ── Serialize HTML snippet (truncated) ─────────────────────────────
+            function htmlSnippet(el) {
+                const clone = el.cloneNode(true);
+                // Remove deeply nested children to keep snippet readable
+                const children = clone.querySelectorAll('*');
+                if (children.length > 12) {
+                    Array.from(children).slice(12).forEach(c => c.remove());
+                }
+                // Truncate text nodes
+                clone.querySelectorAll('*').forEach(n => {
+                    if (n.children.length === 0 && n.textContent && n.textContent.length > 40) {
+                        n.textContent = n.textContent.slice(0, 40) + '…';
+                    }
+                });
+                return clone.outerHTML.replace(/\s+/g, ' ').slice(0, 600);
+            }
+            // ── Categorize a component ────────────────────────────────────────
+            function categorize(el, classes) {
+                const tag = el.tagName.toLowerCase();
+                const classStr = classes.join(' ').toLowerCase();
+                if (/card|tile|item|product|post/.test(classStr))
+                    return 'card';
+                if (/nav.*item|menu.*item|tab/.test(classStr))
+                    return 'nav-item';
+                if (tag === 'li' || /list.*item/.test(classStr))
+                    return 'list-item';
+                if (tag === 'button' || /btn|button/.test(classStr))
+                    return 'button';
+                if (/badge|tag|chip|label/.test(classStr))
+                    return 'badge';
+                if (/field|input|form/.test(classStr))
+                    return 'form-field';
+                return 'unknown';
+            }
+            // ── Walk all elements with 1+ class ─────────────────────────────────
+            const allElements = document.querySelectorAll('[class]');
+            const groups = new Map();
+            allElements.forEach(el => {
+                const rect = el.getBoundingClientRect();
+                // Must be visible and reasonably sized
+                if (rect.width < 40 || rect.height < 20)
+                    return;
+                // Skip wrapper-only elements (body, html, main, etc.)
+                const tag = el.tagName.toLowerCase();
+                if (['html', 'body', 'main', 'head', 'script', 'style', 'link', 'meta'].includes(tag))
+                    return;
+                const fp = fingerprint(el);
+                if (!groups.has(fp))
+                    groups.set(fp, []);
+                groups.get(fp).push(el);
+            });
+            // ── Filter to repeated components (3+ instances) ──────────────────
+            const results = [];
+            for (const [fp, els] of groups.entries()) {
+                if (els.length < 3)
+                    continue;
+                const representative = els[0];
+                const stableClasses = Array.from(representative.classList)
+                    .filter(c => {
+                    if (/^(js-|is-|has-)/.test(c))
+                        return false;
+                    if (/^(hover:|focus:|sm:|md:|lg:)/.test(c))
+                        return false;
+                    return c.length >= 3;
+                })
+                    .sort()
+                    .slice(0, 6);
+                // Generate a human-readable component name
+                const tag = representative.tagName.toLowerCase();
+                const mainClass = stableClasses[0] || tag;
+                const name = mainClass
+                    .replace(/[-_]/g, ' ')
+                    .replace(/\b\w/g, l => l.toUpperCase())
+                    .trim() || tag;
+                const category = categorize(representative, stableClasses);
+                results.push({
+                    name,
+                    pattern: fp,
+                    instances: els.length,
+                    commonClasses: stableClasses,
+                    htmlSnippet: htmlSnippet(representative),
+                    category,
+                });
+                if (results.length >= 20)
+                    break;
+            }
+            // Sort by instance count descending
+            return results.sort((a, b) => b.instances - a.instances);
+        });
+        await page.close();
+        await browser.close();
+        return components;
+    }
+    catch {
+        await browser.close().catch(() => { });
+        return [];
+    }
+}
+//# sourceMappingURL=components-dom.js.map

package/dist/extractors/ultra/interactions.d.ts

@@ -0,0 +1,14 @@
+import { InteractionRecord } from '../../types-ultra';
+/**
+ * Ultra mode — Micro-Interaction Extractor
+ *
+ * For each interactive element type (button, link, input, role-button):
+ * - Capture default screenshot
+ * - Simulate hover → capture screenshot + diff computed styles
+ * - Simulate focus → capture screenshot + diff computed styles
+ *
+ * Saves screenshots to screens/states/
+ * Returns InteractionRecord[] for INTERACTIONS.md generation.
+ */
+export declare function captureInteractions(url: string, skillDir: string): Promise<InteractionRecord[]>;
+//# sourceMappingURL=interactions.d.ts.map

package/dist/extractors/ultra/interactions.js

@@ -0,0 +1,225 @@
+"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.captureInteractions = captureInteractions;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const TRACKED_PROPS = [
+    'backgroundColor',
+    'color',
+    'borderColor',
+    'borderWidth',
+    'boxShadow',
+    'opacity',
+    'transform',
+    'outline',
+    'outlineColor',
+    'textDecoration',
+    'transition',
+];
+const INTERACTIVE_SELECTORS = [
+    { type: 'button', selector: 'button:not([disabled])' },
+    { type: 'role-button', selector: '[role="button"]:not([disabled])' },
+    { type: 'link', selector: 'a[href]:not([href^="#"]):not([href^="mailto"])' },
+    { type: 'input', selector: 'input:not([type="hidden"]):not([disabled])' },
+];
+/**
+ * Ultra mode — Micro-Interaction Extractor
+ *
+ * For each interactive element type (button, link, input, role-button):
+ * - Capture default screenshot
+ * - Simulate hover → capture screenshot + diff computed styles
+ * - Simulate focus → capture screenshot + diff computed styles
+ *
+ * Saves screenshots to screens/states/
+ * Returns InteractionRecord[] for INTERACTIONS.md generation.
+ */
+async function captureInteractions(url, skillDir) {
+    let playwright;
+    try {
+        playwright = require('playwright');
+    }
+    catch {
+        return [];
+    }
+    const statesDir = path.join(skillDir, 'screens', 'states');
+    fs.mkdirSync(statesDir, { recursive: true });
+    const records = [];
+    const browser = await playwright.chromium.launch({ headless: true });
+    try {
+        const context = await browser.newContext({
+            viewport: { width: 1440, height: 900 },
+            userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+        });
+        const page = await context.newPage();
+        await page.goto(url, { waitUntil: 'networkidle', timeout: 25000 });
+        await page.waitForTimeout(1500);
+        for (const { type, selector } of INTERACTIVE_SELECTORS) {
+            try {
+                // Find up to 3 visible elements of this type
+                const elements = await page.locator(selector).all();
+                const visible = [];
+                for (const el of elements) {
+                    try {
+                        const box = await el.boundingBox();
+                        if (box && box.width > 0 && box.height > 0 && box.width < 800) {
+                            visible.push(el);
+                            if (visible.length >= 3)
+                                break;
+                        }
+                    }
+                    catch { /* skip */ }
+                }
+                for (let i = 0; i < visible.length; i++) {
+                    const el = visible[i];
+                    const prefix = `${type}-${i + 1}`;
+                    try {
+                        // Get label text
+                        const label = await el.evaluate((node) => {
+                            const text = node.innerText?.trim() ||
+                                node.getAttribute('aria-label') ||
+                                node.getAttribute('placeholder') ||
+                                node.getAttribute('type') ||
+                                node.tagName.toLowerCase();
+                            return text.slice(0, 40);
+                        });
+                        // ── Default state ─────────────────────────────────────
+                        const defaultStyles = await getStyles(el);
+                        const defaultFile = `${prefix}-default.png`;
+                        await screenshotElement(el, path.join(statesDir, defaultFile));
+                        // ── Hover state ───────────────────────────────────────
+                        let hoverStyles = null;
+                        let hoverFile;
+                        try {
+                            await el.hover({ force: true, timeout: 3000 });
+                            await page.waitForTimeout(300);
+                            hoverStyles = await getStyles(el);
+                            hoverFile = `${prefix}-hover.png`;
+                            await screenshotElement(el, path.join(statesDir, hoverFile));
+                            // Move away
+                            await page.mouse.move(0, 0);
+                            await page.waitForTimeout(200);
+                        }
+                        catch { /* hover not supported */ }
+                        // ── Focus state ───────────────────────────────────────
+                        let focusStyles = null;
+                        let focusFile;
+                        try {
+                            await el.focus({ timeout: 3000 });
+                            await page.waitForTimeout(300);
+                            focusStyles = await getStyles(el);
+                            focusFile = `${prefix}-focus.png`;
+                            await screenshotElement(el, path.join(statesDir, focusFile));
+                            // Blur
+                            await page.evaluate(() => document.activeElement?.blur?.());
+                            await page.waitForTimeout(200);
+                        }
+                        catch { /* focus not supported */ }
+                        const hoverChanges = hoverStyles
+                            ? diffStyles(defaultStyles, hoverStyles)
+                            : [];
+                        const focusChanges = focusStyles
+                            ? diffStyles(defaultStyles, focusStyles)
+                            : [];
+                        // Only record if there are actual visual changes
+                        if (hoverChanges.length > 0 ||
+                            focusChanges.length > 0 ||
+                            defaultFile) {
+                            records.push({
+                                componentType: type,
+                                label: label || type,
+                                selector: `${selector}:nth-of-type(${i + 1})`,
+                                index: i + 1,
+                                screenshots: {
+                                    default: `screens/states/${defaultFile}`,
+                                    hover: hoverFile ? `screens/states/${hoverFile}` : undefined,
+                                    focus: focusFile ? `screens/states/${focusFile}` : undefined,
+                                },
+                                hoverChanges,
+                                focusChanges,
+                                transitionValue: defaultStyles.transition,
+                            });
+                        }
+                    }
+                    catch { /* element failed — skip */ }
+                }
+            }
+            catch { /* selector failed — skip */ }
+        }
+        await page.close();
+    }
+    finally {
+        await browser.close().catch(() => { });
+    }
+    return records;
+}
+async function getStyles(el) {
+    return el.evaluate((node) => {
+        const s = window.getComputedStyle(node);
+        return {
+            backgroundColor: s.backgroundColor,
+            color: s.color,
+            borderColor: s.borderColor,
+            borderWidth: s.borderWidth,
+            boxShadow: s.boxShadow,
+            opacity: s.opacity,
+            transform: s.transform,
+            outline: s.outline,
+            outlineColor: s.outlineColor,
+            textDecoration: s.textDecoration,
+            transition: s.transition,
+        };
+    });
+}
+async function screenshotElement(el, filePath) {
+    try {
+        await el.screenshot({ path: filePath });
+    }
+    catch {
+        // Element screenshot failed — ignore
+    }
+}
+function diffStyles(before, after) {
+    const diffs = [];
+    for (const prop of TRACKED_PROPS) {
+        const b = before[prop] || '';
+        const a = after[prop] || '';
+        if (b !== a && a !== '' && a !== 'none' && a !== 'normal') {
+            diffs.push({ property: prop, from: b, to: a });
+        }
+    }
+    return diffs;
+}
+//# sourceMappingURL=interactions.js.map

package/dist/extractors/ultra/layout.d.ts

@@ -0,0 +1,14 @@
+import { LayoutRecord } from '../../types-ultra';
+/**
+ * Ultra mode — DOM Layout Extractor
+ *
+ * Crawls the page DOM and extracts layout information from significant containers:
+ * - flex/grid parents
+ * - section-level wrappers
+ * - nav/header/footer
+ *
+ * Returns LayoutRecord[] for LAYOUT.md generation.
+ * Requires Playwright (optional peer dependency).
+ */
+export declare function extractLayouts(url: string): Promise<LayoutRecord[]>;
+//# sourceMappingURL=layout.d.ts.map

package/dist/extractors/ultra/layout.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractLayouts = extractLayouts;
+/**
+ * Ultra mode — DOM Layout Extractor
+ *
+ * Crawls the page DOM and extracts layout information from significant containers:
+ * - flex/grid parents
+ * - section-level wrappers
+ * - nav/header/footer
+ *
+ * Returns LayoutRecord[] for LAYOUT.md generation.
+ * Requires Playwright (optional peer dependency).
+ */
+async function extractLayouts(url) {
+    let playwright;
+    try {
+        playwright = require('playwright');
+    }
+    catch {
+        return [];
+    }
+    const browser = await playwright.chromium.launch({ headless: true });
+    try {
+        const context = await browser.newContext({
+            viewport: { width: 1440, height: 900 },
+            userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+        });
+        const page = await context.newPage();
+        await page.goto(url, { waitUntil: 'networkidle', timeout: 25000 });
+        await page.waitForTimeout(1000);
+        const records = await page.evaluate(() => {
+            const LAYOUT_SELECTORS = [
+                'header',
+                'nav',
+                'main',
+                'footer',
+                'section',
+                'article',
+                '[class*="container"]',
+                '[class*="wrapper"]',
+                '[class*="layout"]',
+                '[class*="grid"]',
+                '[class*="flex"]',
+                '[class*="row"]',
+                '[class*="col"]',
+                '[class*="hero"]',
+                '[class*="card"]',
+            ];
+            function getDepth(el) {
+                let depth = 0;
+                let node = el.parentElement;
+                while (node) {
+                    depth++;
+                    node = node.parentElement;
+                }
+                return depth;
+            }
+            function buildSelector(el) {
+                const tag = el.tagName.toLowerCase();
+                const id = el.id ? `#${el.id}` : '';
+                const classes = Array.from(el.classList)
+                    .filter(c => !/^(js-|is-|has-)/.test(c))
+                    .slice(0, 2)
+                    .map(c => `.${c}`)
+                    .join('');
+                return `${tag}${id}${classes}`.slice(0, 60);
+            }
+            const seen = new WeakSet();
+            const results = [];
+            for (const sel of LAYOUT_SELECTORS) {
+                const elements = document.querySelectorAll(sel);
+                elements.forEach((el) => {
+                    if (seen.has(el))
+                        return;
+                    seen.add(el);
+                    const s = window.getComputedStyle(el);
+                    const display = s.display;
+                    // Only capture flex/grid/block containers with children
+                    if (!['flex', 'grid', 'block', 'inline-flex', 'inline-grid'].includes(display))
+                        return;
+                    const rect = el.getBoundingClientRect();
+                    if (rect.width < 100 || rect.height < 30)
+                        return;
+                    const childCount = el.children.length;
+                    if (childCount === 0)
+                        return;
+                    results.push({
+                        tag: el.tagName.toLowerCase(),
+                        selector: buildSelector(el),
+                        display,
+                        flexDirection: s.flexDirection || '',
+                        flexWrap: s.flexWrap || '',
+                        justifyContent: s.justifyContent || '',
+                        alignItems: s.alignItems || '',
+                        gap: s.gap || '',
+                        rowGap: s.rowGap || '',
+                        columnGap: s.columnGap || '',
+                        padding: s.padding || '',
+                        margin: s.margin || '',
+                        gridTemplateColumns: s.gridTemplateColumns || '',
+                        gridTemplateRows: s.gridTemplateRows || '',
+                        maxWidth: s.maxWidth || '',
+                        width: s.width || '',
+                        height: s.height || '',
+                        position: s.position || '',
+                        childCount,
+                        depth: getDepth(el),
+                    });
+                    if (results.length >= 60)
+                        return;
+                });
+            }
+            // Sort by depth (shallower = more structural)
+            return results.sort((a, b) => a.depth - b.depth).slice(0, 40);
+        });
+        await page.close();
+        await browser.close();
+        return records;
+    }
+    catch {
+        await browser.close().catch(() => { });
+        return [];
+    }
+}
+//# sourceMappingURL=layout.js.map

package/dist/extractors/ultra/pages.d.ts

@@ -0,0 +1,16 @@
+import { PageScreenshot, SectionScreenshot } from '../../types-ultra';
+/**
+ * Ultra mode — Page & Section Screenshots
+ *
+ * 1. Crawl up to `maxPages` internal links from the origin URL
+ * 2. Take a full-page screenshot for each (screens/pages/[slug].png)
+ * 3. Detect major sections (section, article, main > div, height > 300px)
+ *    and clip one screenshot per section (screens/sections/[page]-section-N.png)
+ *
+ * Requires Playwright (optional peer dependency).
+ */
+export declare function capturePageScreenshots(originUrl: string, skillDir: string, maxPages: number): Promise<{
+    pages: PageScreenshot[];
+    sections: SectionScreenshot[];
+}>;
+//# sourceMappingURL=pages.d.ts.map