skillui 1.1.0

package/dist/writers/tokens-json.d.ts

@@ -0,0 +1,11 @@
+import { DesignProfile } from '../types';
+/**
+ * Ultra mode — Token JSON Writer
+ *
+ * Writes structured JSON token files to tokens/ directory:
+ * - tokens/colors.json
+ * - tokens/spacing.json
+ * - tokens/typography.json
+ */
+export declare function writeTokensJson(profile: DesignProfile, skillDir: string): void;
+//# sourceMappingURL=tokens-json.d.ts.map

package/dist/writers/tokens-json.js

@@ -0,0 +1,164 @@
+"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.writeTokensJson = writeTokensJson;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+/**
+ * Ultra mode — Token JSON Writer
+ *
+ * Writes structured JSON token files to tokens/ directory:
+ * - tokens/colors.json
+ * - tokens/spacing.json
+ * - tokens/typography.json
+ */
+function writeTokensJson(profile, skillDir) {
+    const tokensDir = path.join(skillDir, 'tokens');
+    fs.mkdirSync(tokensDir, { recursive: true });
+    writeColorsJson(profile, tokensDir);
+    writeSpacingJson(profile, tokensDir);
+    writeTypographyJson(profile, tokensDir);
+}
+// ── colors.json ──────────────────────────────────────────────────────
+function writeColorsJson(profile, tokensDir) {
+    const core = {};
+    const extended = {};
+    const status = {};
+    for (const color of profile.colors) {
+        const token = {
+            value: color.hex,
+            role: color.role,
+        };
+        if (color.name)
+            token.name = color.name;
+        switch (color.role) {
+            case 'background':
+            case 'surface':
+            case 'text-primary':
+            case 'text-muted':
+            case 'accent':
+            case 'border':
+                core[color.role] = token;
+                break;
+            case 'danger':
+            case 'success':
+            case 'warning':
+                status[color.role] = token;
+                break;
+            default:
+                const key = color.name
+                    ? color.name.replace(/\s+/g, '-').toLowerCase()
+                    : color.hex.replace('#', 'color-');
+                extended[key] = token;
+        }
+    }
+    const output = {
+        $schema: 'https://design-tokens.github.io/community-group/format/',
+        core,
+        status,
+        extended,
+        meta: {
+            theme: profile.designTraits.isDark ? 'dark' : 'light',
+            extracted: new Date().toISOString().slice(0, 10),
+        },
+    };
+    fs.writeFileSync(path.join(tokensDir, 'colors.json'), JSON.stringify(output, null, 2), 'utf-8');
+}
+// ── spacing.json ─────────────────────────────────────────────────────
+function writeSpacingJson(profile, tokensDir) {
+    const { base, values, unit } = profile.spacing;
+    // Named semantic scale
+    const scale = {};
+    const sortedValues = [...values].sort((a, b) => a - b);
+    // Assign t-shirt sizes
+    const labels = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'];
+    sortedValues.slice(0, labels.length).forEach((v, i) => {
+        scale[labels[i]] = { value: `${v}${unit}`, px: v };
+    });
+    // Multiplier aliases
+    const multipliers = {};
+    for (let i = 1; i <= 16; i++) {
+        multipliers[`${i}x`] = base * i;
+    }
+    const output = {
+        base: { value: `${base}px`, description: 'Grid unit — all spacing must be multiples of this' },
+        unit,
+        scale,
+        multipliers: Object.fromEntries(Object.entries(multipliers).map(([k, v]) => [k, { value: `${v}px`, raw: v }])),
+        meta: {
+            totalValues: values.length,
+            min: sortedValues[0] ?? 0,
+            max: sortedValues[sortedValues.length - 1] ?? 0,
+        },
+    };
+    fs.writeFileSync(path.join(tokensDir, 'spacing.json'), JSON.stringify(output, null, 2), 'utf-8');
+}
+// ── typography.json ──────────────────────────────────────────────────
+function writeTypographyJson(profile, tokensDir) {
+    const scale = {};
+    for (const token of profile.typography) {
+        const key = token.role;
+        scale[key] = {
+            fontFamily: token.fontFamily,
+            fontSize: token.fontSize || null,
+            fontWeight: token.fontWeight || null,
+            lineHeight: token.lineHeight || null,
+            source: token.source,
+        };
+    }
+    // Unique font families
+    const families = [...new Set(profile.typography.map(t => t.fontFamily).filter(Boolean))];
+    // Font face declarations
+    const fontFaces = profile.fontSources.map(src => ({
+        family: src.family,
+        src: src.src,
+        format: src.format || 'truetype',
+        weight: src.weight || '400',
+    }));
+    const output = {
+        families,
+        scale,
+        fontFaces,
+        rules: {
+            maxSizesPerScreen: 4,
+            headingWeightRange: '600-700',
+            bodyWeight: 400,
+            lineHeightBody: 1.5,
+            lineHeightHeading: 1.2,
+        },
+    };
+    fs.writeFileSync(path.join(tokensDir, 'typography.json'), JSON.stringify(output, null, 2), 'utf-8');
+}
+//# sourceMappingURL=tokens-json.js.map

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "skillui",
+  "version": "1.1.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": {
+    "skillui": "dist/cli.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/cli.js",
+    "dev": "ts-node src/cli.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "static-analysis",
+    "css",
+    "tailwind",
+    "cli",
+    "claude",
+    "claude-code",
+    "skill",
+    "ui",
+    "figma",
+    "reverse-engineer",
+    "animations",
+    "playwright"
+  ],
+  "author": "Amaan",
+  "license": "MIT",
+  "homepage": "https://github.com/amaanbuilds/skillui#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/amaanbuilds/skillui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/amaanbuilds/skillui/issues"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.24.0",
+    "@babel/traverse": "^7.24.0",
+    "@babel/types": "^7.24.0",
+    "archiver": "^7.0.0",
+    "commander": "^12.0.0",
+    "css-tree": "^2.3.1",
+    "culori": "^4.0.0",
+    "glob": "^10.3.0",
+    "jiti": "^1.21.0",
+    "postcss": "^8.4.0",
+    "simple-git": "^3.24.0",
+    "tmp": "^0.2.3"
+  },
+  "devDependencies": {
+    "@types/archiver": "^6.0.0",
+    "@types/css-tree": "^2.3.0",
+    "@types/node": "^20.0.0",
+    "@types/tmp": "^0.2.6",
+    "playwright": "^1.59.1",
+    "typescript": "^5.4.0"
+  },
+  "peerDependencies": {
+    "playwright": "^1.40.0"
+  },
+  "peerDependenciesMeta": {
+    "playwright": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts"
+  ]
+}