create-claudecraft 1.0.0

package/dist/scaffold.js

@@ -0,0 +1,303 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { execSync } from 'child_process';
+import { fileURLToPath } from 'url';
+import { SKILLS } from './constants.js';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATES_DIR = path.join(__dirname, '..', 'templates');
+export async function scaffold(choices, onProgress) {
+    const startTime = Date.now();
+    const targetDir = path.resolve(process.cwd(), choices.projectName);
+    // Check if directory exists
+    if (await fs.pathExists(targetDir)) {
+        throw new Error(`DIR_EXISTS:${choices.projectName}`);
+    }
+    // Create directory
+    await fs.ensureDir(targetDir);
+    // Copy base template
+    onProgress('scaffolding', 10, 'base files');
+    const baseDir = path.join(TEMPLATES_DIR, 'base');
+    if (await fs.pathExists(baseDir)) {
+        await fs.copy(baseDir, targetDir);
+    }
+    // Ensure .claude directories exist
+    const claudeDir = path.join(targetDir, '.claude');
+    const skillsDir = path.join(claudeDir, 'skills');
+    const commandsDir = path.join(claudeDir, 'commands');
+    await fs.ensureDir(skillsDir);
+    await fs.ensureDir(commandsDir);
+    // Copy selected skills
+    onProgress('scaffolding', 30, 'skills');
+    for (const skillName of choices.selectedSkills) {
+        const skill = SKILLS.find((s) => s.name === skillName);
+        if (!skill)
+            continue;
+        // Try workflow first, then design
+        let sourceDir = path.join(TEMPLATES_DIR, 'skills', 'workflow', skillName);
+        if (!(await fs.pathExists(sourceDir))) {
+            sourceDir = path.join(TEMPLATES_DIR, 'skills', 'design', skillName);
+        }
+        if (await fs.pathExists(sourceDir)) {
+            await fs.copy(sourceDir, path.join(skillsDir, skillName));
+        }
+    }
+    // Copy commands
+    onProgress('scaffolding', 50, 'commands');
+    const commandsSrc = path.join(TEMPLATES_DIR, 'commands');
+    if (await fs.pathExists(commandsSrc)) {
+        await fs.copy(commandsSrc, commandsDir);
+    }
+    // Copy hooks
+    onProgress('scaffolding', 55, 'hooks');
+    const hooksSrc = path.join(TEMPLATES_DIR, 'hooks');
+    const hooksDir = path.join(claudeDir, 'hooks');
+    if (await fs.pathExists(hooksSrc)) {
+        await fs.ensureDir(hooksDir);
+        await fs.copy(hooksSrc, hooksDir);
+    }
+    // Copy settings files
+    const settingsSrc = path.join(TEMPLATES_DIR, 'settings');
+    if (await fs.pathExists(settingsSrc)) {
+        const files = await fs.readdir(settingsSrc);
+        for (const file of files) {
+            await fs.copy(path.join(settingsSrc, file), path.join(claudeDir, file));
+        }
+    }
+    // Copy components
+    onProgress('scaffolding', 60, 'components');
+    const componentsSrc = path.join(TEMPLATES_DIR, 'components');
+    const componentsDir = path.join(targetDir, 'src', 'components');
+    if (await fs.pathExists(componentsSrc)) {
+        await fs.ensureDir(componentsDir);
+        await fs.copy(componentsSrc, componentsDir);
+    }
+    // Copy context
+    onProgress('scaffolding', 65, 'context');
+    const contextSrc = path.join(TEMPLATES_DIR, 'context');
+    const contextDir = path.join(targetDir, 'src', 'context');
+    if (await fs.pathExists(contextSrc)) {
+        await fs.ensureDir(contextDir);
+        await fs.copy(contextSrc, contextDir);
+    }
+    // Copy lib
+    const libSrc = path.join(TEMPLATES_DIR, 'lib');
+    const libDir = path.join(targetDir, 'src', 'lib');
+    if (await fs.pathExists(libSrc)) {
+        await fs.ensureDir(libDir);
+        await fs.copy(libSrc, libDir);
+    }
+    // Copy types
+    const typesSrc = path.join(TEMPLATES_DIR, 'types');
+    const typesDir = path.join(targetDir, 'src', 'types');
+    if (await fs.pathExists(typesSrc)) {
+        await fs.ensureDir(typesDir);
+        await fs.copy(typesSrc, typesDir);
+    }
+    // Copy homepage or create blank App
+    onProgress('scaffolding', 70, 'pages');
+    const pagesDir = path.join(targetDir, 'src', 'pages');
+    await fs.ensureDir(pagesDir);
+    if (choices.includeHomepage) {
+        const homepageSrc = path.join(TEMPLATES_DIR, 'homepage');
+        if (await fs.pathExists(homepageSrc)) {
+            await fs.copy(homepageSrc, pagesDir);
+        }
+        // Copy the full App.tsx that includes routing
+        const appSrc = path.join(TEMPLATES_DIR, 'app', 'App.tsx');
+        if (await fs.pathExists(appSrc)) {
+            await fs.copy(appSrc, path.join(targetDir, 'src', 'App.tsx'));
+        }
+    }
+    else {
+        // Create blank App.tsx
+        const blankApp = `export default function App() {
+  return (
+    <div className="min-h-dvh bg-base-100 text-base-content flex items-center justify-center">
+      <h1 className="text-2xl font-bold">Your mass of pixels starts here.</h1>
+    </div>
+  )
+}
+`;
+        await fs.writeFile(path.join(targetDir, 'src', 'App.tsx'), blankApp);
+        // Create blank NotFoundPage
+        const notFound = `import { Link } from 'react-router-dom'
+
+export function NotFoundPage() {
+  return (
+    <div className="min-h-dvh bg-base-100 text-base-content flex items-center justify-center px-6">
+      <div className="text-center max-w-md">
+        <h1 className="text-6xl font-bold mb-4">404</h1>
+        <p className="text-xl text-base-content/70 mb-8">
+          This page doesn't exist.
+        </p>
+        <Link to="/" className="btn btn-primary">
+          Back to home
+        </Link>
+      </div>
+    </div>
+  )
+}
+`;
+        await fs.writeFile(path.join(pagesDir, 'NotFoundPage.tsx'), notFound);
+    }
+    // Update package.json with project name
+    onProgress('scaffolding', 80, 'package.json');
+    const pkgPath = path.join(targetDir, 'package.json');
+    if (await fs.pathExists(pkgPath)) {
+        const pkg = await fs.readJson(pkgPath);
+        pkg.name = choices.projectName;
+        await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+    }
+    // Copy main.tsx
+    const mainSrc = path.join(TEMPLATES_DIR, 'main.tsx');
+    if (await fs.pathExists(mainSrc)) {
+        await fs.copy(mainSrc, path.join(targetDir, 'src', 'main.tsx'));
+    }
+    // Copy index.css
+    const cssSrc = path.join(TEMPLATES_DIR, 'index.css');
+    if (await fs.pathExists(cssSrc)) {
+        await fs.copy(cssSrc, path.join(targetDir, 'src', 'index.css'));
+    }
+    // Copy vite-env.d.ts
+    const viteSrc = path.join(TEMPLATES_DIR, 'vite-env.d.ts');
+    if (await fs.pathExists(viteSrc)) {
+        await fs.copy(viteSrc, path.join(targetDir, 'src', 'vite-env.d.ts'));
+    }
+    onProgress('scaffolding', 100, 'done');
+    // Install dependencies
+    onProgress('dependencies', 0, 'bun install');
+    try {
+        execSync('bun install', { cwd: targetDir, stdio: 'pipe' });
+    }
+    catch {
+        throw new Error('INSTALL_FAILED');
+    }
+    onProgress('dependencies', 100, 'done');
+    // Git init
+    if (choices.initGit) {
+        onProgress('git init', 0, '.git/');
+        try {
+            execSync('git init', { cwd: targetDir, stdio: 'pipe' });
+            execSync('git add .', { cwd: targetDir, stdio: 'pipe' });
+            execSync('git commit -m "init: claudecraft scaffolding"', {
+                cwd: targetDir,
+                stdio: 'pipe',
+            });
+        }
+        catch {
+            // Git init failed, not critical
+        }
+        onProgress('git init', 100, 'done');
+    }
+    const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+    const files = await countFiles(targetDir);
+    const diskUsage = await getDiskUsage(targetDir);
+    return {
+        files,
+        skills: choices.selectedSkills.length,
+        commands: 6,
+        time: `${elapsed}s`,
+        deps: 24,
+        disk: diskUsage,
+    };
+}
+/**
+ * Initialize claudecraft in an existing project
+ * Only adds .claude folder with skills, commands, hooks, settings
+ */
+export async function initExisting(choices, onProgress) {
+    const startTime = Date.now();
+    const targetDir = process.cwd();
+    // Ensure .claude directories exist
+    onProgress('scaffolding', 10, '.claude/');
+    const claudeDir = path.join(targetDir, '.claude');
+    const skillsDir = path.join(claudeDir, 'skills');
+    const commandsDir = path.join(claudeDir, 'commands');
+    await fs.ensureDir(skillsDir);
+    await fs.ensureDir(commandsDir);
+    // Copy selected skills
+    onProgress('scaffolding', 30, 'skills');
+    for (const skillName of choices.selectedSkills) {
+        const skill = SKILLS.find((s) => s.name === skillName);
+        if (!skill)
+            continue;
+        // Try workflow first, then design
+        let sourceDir = path.join(TEMPLATES_DIR, 'skills', 'workflow', skillName);
+        if (!(await fs.pathExists(sourceDir))) {
+            sourceDir = path.join(TEMPLATES_DIR, 'skills', 'design', skillName);
+        }
+        if (await fs.pathExists(sourceDir)) {
+            await fs.copy(sourceDir, path.join(skillsDir, skillName));
+        }
+    }
+    // Copy commands
+    onProgress('scaffolding', 50, 'commands');
+    const commandsSrc = path.join(TEMPLATES_DIR, 'commands');
+    if (await fs.pathExists(commandsSrc)) {
+        await fs.copy(commandsSrc, commandsDir);
+    }
+    // Copy hooks
+    onProgress('scaffolding', 70, 'hooks');
+    const hooksSrc = path.join(TEMPLATES_DIR, 'hooks');
+    const hooksDir = path.join(claudeDir, 'hooks');
+    if (await fs.pathExists(hooksSrc)) {
+        await fs.ensureDir(hooksDir);
+        await fs.copy(hooksSrc, hooksDir);
+    }
+    // Copy settings files
+    onProgress('scaffolding', 85, 'settings');
+    const settingsSrc = path.join(TEMPLATES_DIR, 'settings');
+    if (await fs.pathExists(settingsSrc)) {
+        const files = await fs.readdir(settingsSrc);
+        for (const file of files) {
+            const destPath = path.join(claudeDir, file);
+            // Don't overwrite existing settings
+            if (!(await fs.pathExists(destPath))) {
+                await fs.copy(path.join(settingsSrc, file), destPath);
+            }
+        }
+    }
+    // Create or update CLAUDE.md if it doesn't exist
+    const claudeMdPath = path.join(targetDir, 'CLAUDE.md');
+    if (!(await fs.pathExists(claudeMdPath))) {
+        const claudeMdSrc = path.join(TEMPLATES_DIR, 'base', 'CLAUDE.md');
+        if (await fs.pathExists(claudeMdSrc)) {
+            await fs.copy(claudeMdSrc, claudeMdPath);
+        }
+    }
+    onProgress('scaffolding', 100, 'done');
+    const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+    const claudeFiles = await countFiles(claudeDir);
+    return {
+        files: claudeFiles,
+        skills: choices.selectedSkills.length,
+        commands: 7,
+        time: `${elapsed}s`,
+        deps: 0,
+        disk: '~500kb',
+    };
+}
+async function countFiles(dir) {
+    let count = 0;
+    const items = await fs.readdir(dir, { withFileTypes: true });
+    for (const item of items) {
+        if (item.name === 'node_modules' || item.name === '.git')
+            continue;
+        if (item.isDirectory()) {
+            count += await countFiles(path.join(dir, item.name));
+        }
+        else {
+            count++;
+        }
+    }
+    return count;
+}
+async function getDiskUsage(dir) {
+    try {
+        const result = execSync(`du -sh "${dir}" | cut -f1`, { encoding: 'utf-8' });
+        return result.trim();
+    }
+    catch {
+        return '~4mb';
+    }
+}

package/dist/ui.d.ts

@@ -0,0 +1,27 @@
+export declare function renderHeader(): string;
+export declare function renderManifest(): string;
+export declare function renderMiniHeader(_step?: number, _total?: number): string;
+export declare function renderStepHeader(step: number, total: number, _title: string, _required?: boolean): string;
+export declare function renderStepFooter(): string;
+export declare function renderSpecs(specs: Array<{
+    label: string;
+    value: string;
+}>): string;
+export declare function renderAnnotation(text: string): string;
+export declare function renderError(title: string, body: string): string;
+export interface ProgressTask {
+    name: string;
+    status: 'done' | 'active' | 'queued';
+    progress?: number;
+    time?: string;
+    detail?: string;
+}
+export declare function renderProgress(tasks: ProgressTask[]): string;
+export declare function renderProgressFooter(elapsed: string, _eta: string): string;
+export declare function renderComplete(projectName: string, stats: Record<string, string | number>): string;
+export declare function renderInitComplete(stats: {
+    files: number;
+    skills: number;
+    commands: number;
+    time: string;
+}): string;

package/dist/ui.js

@@ -0,0 +1,254 @@
+import figlet from 'figlet';
+import gradient from 'gradient-string';
+import pc from 'picocolors';
+import { TAGLINE, STACK, ASSETS, DEFAULT_THEME, DEFAULT_PORT, VERSION } from './constants.js';
+// Split gradients for two-line logo
+const claudeGradient = gradient(['#00ff9f', '#00b8ff']); // Green → Cyan (fresh)
+const craftGradient = gradient(['#a855f7', '#6d28d9']); // Purple → Violet (deep)
+// Generate ASCII art for each word separately
+const asciiClaude = figlet.textSync('CLAUDE', { font: 'ANSI Shadow', horizontalLayout: 'fitted' });
+const asciiCraft = figlet.textSync('CRAFT', { font: 'ANSI Shadow', horizontalLayout: 'fitted' });
+// Get today's date for the revision block
+const today = new Date().toISOString().split('T')[0].replace(/-/g, '.');
+// ═══════════════════════════════════════════════════════════════════════════
+// ALIGNMENT: Frame width = 76 chars exactly
+// Normal row:   "  │ │  " (7) + content (66) + "│ │" (3) = 76
+// CAP HT row:   "  │ │  " (7) + content (58) + "│◀┼─ CAP HT" (11) = 76
+// BASELINE row: "  │ │  " (7) + content (56) + "│◀┼─ BASELINE" (13) = 76
+// ASCII art: CLAUDE=49 chars, CRAFT=41 chars
+// ═══════════════════════════════════════════════════════════════════════════
+const FRAME = 76;
+const PREFIX = '  │ │  '; // 7 chars
+const SUFFIX = '│ │'; // 3 chars
+const INNER = 66; // Normal content width
+// Pad content to exact width (strips ANSI codes for length calc)
+const padTo = (line, width) => {
+    const visible = line.replace(/\x1b\[[0-9;]*m/g, '').length;
+    return line + ' '.repeat(Math.max(0, width - visible));
+};
+// Build a normal row: prefix(7) + content(66) + suffix(3) = 76 chars
+const row = (content) => {
+    return `${pc.dim(PREFIX)}${padTo(content, INNER)}${pc.dim(SUFFIX)}`;
+};
+// Build a callout row with specific suffix
+const calloutRow = (content, suffix) => {
+    const contentWidth = FRAME - PREFIX.length - suffix.length;
+    return `${pc.dim(PREFIX)}${padTo(content, contentWidth)}${pc.dim(suffix)}`;
+};
+export function renderHeader() {
+    // Apply gradients and filter empty lines
+    const claudeLines = claudeGradient(asciiClaude).split('\n').filter(l => l.trim());
+    const craftLines = craftGradient(asciiCraft).split('\n').filter(l => l.trim());
+    const lines = [];
+    // ═══ TOP FRAME (76 chars) ════════════════════════════════════════════════
+    // "  ⊕" (3) + "─┬" (2) + dashes (68) + "┬─" (2) + "⊕" (1) = 76
+    lines.push(pc.cyan('  ⊕') + pc.dim('─┬' + '─'.repeat(68) + '┬─') + pc.cyan('⊕'));
+    // "    │ ◀" (7) + dashes (28) + " 72 COLS " (9) + dashes (28) + "▶ │" (4) = 76
+    lines.push(pc.dim('    │ ◀' + '─'.repeat(28) + ' 72 COLS ' + '─'.repeat(28) + '▶ │ '));
+    // "  ┌─┼" (5) + dashes (68) + "┼─┐" (3) = 76
+    lines.push(pc.dim('  ┌─┼' + '─'.repeat(68) + '┼─┐'));
+    // ═══ CONTENT AREA ════════════════════════════════════════════════════════
+    // Ruler
+    lines.push(row('┆ · · · · ┆ · · · · ┆ · · · · ┆ · · · · ┆ · · · · ┆ · · · · ┆ ·'));
+    // CLAUDE with CAP HT callout on first line
+    claudeLines.forEach((line, i) => {
+        if (i === 0) {
+            lines.push(calloutRow(line, '│◀┼─ CAP HT'));
+        }
+        else {
+            lines.push(row(line));
+        }
+    });
+    // Baseline separator (content = 76 - 7 - 13 = 56, so 53 dashes + 2 for ├┤ = 55)
+    lines.push(calloutRow('├' + '─'.repeat(53) + '┤', '│◀┼─ BASELINE'));
+    // CRAFT
+    craftLines.forEach((line) => {
+        lines.push(row(line));
+    });
+    // Measurement ruler
+    lines.push(row('0        10        20        30        40        50        60'));
+    // ═══ BOTTOM FRAME (76 chars) ══════════════════════════════════════════════
+    // "  └─┼" (5) + dashes (68) + "┼─┘" (3) = 76
+    lines.push(pc.dim('  └─┼' + '─'.repeat(68) + '┼─┘'));
+    // CMYK bar + revision block (76 chars)
+    // "    │  " (7) + "■ C  ■ M  ■ Y  ■ K" (18) + spaces (11) + rev (37) + "  │" (3) = 76
+    const cmyk = pc.cyan('■') + pc.dim(' C  ') + pc.magenta('■') + pc.dim(' M  ') + pc.yellow('■') + pc.dim(' Y  ') + pc.white('■') + pc.dim(' K');
+    const rev = pc.green(`REV ${VERSION}`) + pc.dim(` │ ${today} │ `) + pc.yellow('WORKS ON MAC');
+    lines.push(pc.dim('    │  ') + cmyk + pc.dim('           ') + rev + pc.dim('  │'));
+    // Bottom registration marks: "  ⊕" (3) + "─┴" (2) + dashes (68) + "┴─" (2) + "⊕" (1) = 76
+    lines.push(pc.cyan('  ⊕') + pc.dim('─┴' + '─'.repeat(68) + '┴─') + pc.cyan('⊕'));
+    return '\n' + lines.join('\n') + '\n';
+}
+export function renderManifest() {
+    // Frame = 76 chars exactly
+    // Structure: "  │ " (4) + content (70) + " │" (2) = 76
+    // 3-col data: col1 (22) + " │ " (3) + col2 (20) + " │ " (3) + col3 (22) = 70 ✓
+    const p = (s, len) => s.padEnd(len);
+    const D = pc.dim;
+    // Column builders: label + value, totaling exact width
+    const col1 = (label, value) => `${D(p(label, 11))}${pc.cyan(p(value, 11))}`; // 22 chars
+    const col2 = (label, value) => `${D(p(label, 10))}${pc.cyan(p(value, 10))}`; // 20 chars
+    const col3 = (label, value) => `${D(p(label, 10))}${pc.cyan(p(value, 12))}`; // 22 chars
+    // Header dividers: ─ sections must match column widths + frame chars
+    // col1 section: "─── STACK " (10) + 14 dashes = 24 (for 22 + " │" = 25... wait)
+    // Actually: between ├ and first ┬ = col1(22) + " " (1) = 23, plus ─'s for label
+    // Let me just hardcode the exact strings that work
+    const lines = [
+        `  ${D('╭' + '─'.repeat(72) + '╮')}`,
+        `  ${D('│')} ${D('SPECS ·')} ${p(TAGLINE, 63)}${D('│')}`,
+        `  ${D('├─── STACK ────────────────┬─── ASSETS ────────────┬─── DEFAULTS ────────┤')}`,
+        `  ${D('│')} ${col1('react', STACK.react)} ${D('│')} ${col2('skills', String(ASSETS.skills))} ${D('│')} ${col3('theme', DEFAULT_THEME)} ${D('│')}`,
+        `  ${D('│')} ${col1('typescript', STACK.typescript)} ${D('│')} ${col2('commands', String(ASSETS.commands))} ${D('│')} ${col3('port', String(DEFAULT_PORT))} ${D('│')}`,
+        `  ${D('│')} ${col1('vite', STACK.vite)} ${D('│')} ${col2('themes', String(ASSETS.themes))} ${D('│')} ${col3('tests', 'vitest')} ${D('│')}`,
+        `  ${D('│')} ${col1('tailwind', STACK.tailwind)} ${D('│')} ${col2('hooks', String(ASSETS.hooks))} ${D('│')} ${col3('pkg', 'bun')} ${D('│')}`,
+        `  ${D('│')} ${col1('daisyui', STACK.daisyui)} ${D('│')} ${col2('comps', String(ASSETS.components))} ${D('│')} ${col3('license', 'MIT')} ${D('│')}`,
+        `  ${D('├──────────────────────────┴────────────────────────┴────────────────────┤')}`,
+        `  ${D('│')} ${D('~48 files · 0 deps ·')} ${pc.cyan('/help')} ${D('for existential guidance')}                    ${D('│')}`,
+        `  ${D('╰' + '─'.repeat(72) + '╯')}`,
+    ];
+    return '\n' + lines.join('\n');
+}
+export function renderMiniHeader(_step, _total) {
+    // Condensed ASCII logo with measurement tick - split gradient
+    const logoGradient = gradient(['#00ff9f', '#00b8ff', '#a855f7', '#6d28d9']);
+    const logo = logoGradient('▓▒░ CLAUDECRAFT');
+    const tick = pc.dim('┆');
+    return `
+  ${tick} ${logo} ${pc.dim(`v${VERSION}`)} ${tick}
+`;
+}
+export function renderStepHeader(step, total, _title, _required = false) {
+    return renderMiniHeader(step, total);
+}
+export function renderStepFooter() {
+    return '';
+}
+export function renderSpecs(specs) {
+    return specs.map((s) => `  ${pc.dim('│')} ${pc.dim(s.label + ':')} ${s.value}`).join('\n');
+}
+export function renderAnnotation(text) {
+    return `  ${pc.dim('│')} ${pc.dim(text)}`;
+}
+export function renderError(title, body) {
+    return `
+  ${pc.dim('╭─── ERROR ────────────────────────────────────────────────────────────╮')}
+  ${pc.dim('│')} ${pc.red('✗')} ${pc.bold(pc.red(title))}
+  ${pc.dim('├─────────────────────────────────────────────────────────────────────┤')}
+${body
+        .split('\n')
+        .map((line) => `  ${pc.dim('│')} ${line}`)
+        .join('\n')}
+  ${pc.dim('╰─────────────────────────────────────────────────────────────────────╯')}
+`;
+}
+export function renderProgress(tasks) {
+    const lines = tasks.map((t, i) => {
+        const width = 24;
+        let bar = '';
+        let statusText = '';
+        const lineNum = pc.dim(`${String(i + 1).padStart(2)}`);
+        if (t.status === 'done') {
+            bar = pc.green('█'.repeat(width));
+            statusText = pc.green('✓ done');
+        }
+        else if (t.status === 'active') {
+            const filled = Math.floor(((t.progress || 0) / 100) * width);
+            // Animated-looking bar with gradient feel
+            bar = pc.cyan('▓'.repeat(filled)) + pc.dim('░'.repeat(width - filled));
+            statusText = pc.yellow(`◐ ${t.progress}%`);
+        }
+        else {
+            bar = pc.dim('·'.repeat(width));
+            statusText = pc.dim('○ waiting');
+        }
+        const detail = t.detail ? pc.dim(` ${t.detail}`) : '';
+        return `  ${pc.dim('│')} ${lineNum} ${t.name.padEnd(12)} ${bar} ${statusText.padEnd(10)}${detail}`;
+    });
+    return `
+  ${pc.dim('╭─── PROGRESS ─────────────────────────────────────────────────────────╮')}
+${lines.join('\n')}
+  ${pc.dim('├─────────────────────────────────────────────────────────────────────┤')}`;
+}
+export function renderProgressFooter(elapsed, _eta) {
+    return `  ${pc.dim('│')} elapsed: ${elapsed}
+  ${pc.dim('╰─────────────────────────────────────────────────────────────────────╯')}
+`;
+}
+export function renderComplete(projectName, stats) {
+    // Existential dread for designers
+    const dread = [
+        "The blank canvas awaits. It judges you silently.",
+        "You wanted this. Remember that when it's 3am.",
+        "The cursor blinks. It will outlast us all.",
+        "Another project. Another chance to mass Cmd+Z.",
+        "Ship it before the doubt sets in.",
+        "The robots built this. You still have to design it.",
+        "Perfection is the enemy. So is that deadline.",
+        "It works on localhost. That's something.",
+        "Congratulations. You've automated your anxiety.",
+        "The PRD was 'make it pop'. Good luck.",
+        "Your taste exceeds your velocity. As always.",
+        "Claude believes in you. Claude is wrong sometimes.",
+        "27 skills. 0 excuses.",
+        "The slop awaits your curation.",
+        "localhost:6969. Nice.",
+    ];
+    const randomDread = dread[Math.floor(Math.random() * dread.length)];
+    // Stats with units for designer feel
+    const filesVal = String(stats.files).padEnd(4);
+    const skillsVal = String(stats.skills).padEnd(4);
+    const timeVal = String(stats.time).padEnd(6);
+    return `
+  ${pc.dim('╭─── COMPLETE ─────────────────────────────────────────────────────────╮')}
+  ${pc.dim('│')} ${pc.green('✓')} ${pc.bold('Ready')} ${pc.dim('·')} ${pc.dim(randomDread)}
+  ${pc.dim('├─── NEXT ─────────────────────────────────────────────────────────────┤')}
+  ${pc.dim('│')} ${pc.dim('01')} ${pc.cyan('$')} cd ${projectName}
+  ${pc.dim('│')} ${pc.dim('02')} ${pc.cyan('$')} bun dev
+  ${pc.dim('│')} ${pc.dim('03')} ${pc.cyan('$')} open http://localhost:${DEFAULT_PORT}
+  ${pc.dim('├─── STATS ────────────────────────────────────────────────────────────┤')}
+  ${pc.dim('│')} files ${filesVal} ${pc.dim('│')} skills ${skillsVal} ${pc.dim('│')} time ${timeVal} ${pc.dim('│')} deps 0
+  ${pc.dim('├─── COMMANDS ─────────────────────────────────────────────────────────┤')}
+  ${pc.dim('│')} ${pc.cyan('/build')}       ${pc.dim('compile and hope')}
+  ${pc.dim('│')} ${pc.cyan('/brainstorm')}  ${pc.dim('poke holes in your ideas')}
+  ${pc.dim('│')} ${pc.cyan('/ralph')}       ${pc.dim('sleep while Claude ships')}
+  ${pc.dim('│')} ${pc.cyan('/write-plan')}  ${pc.dim('think before you regret')}
+  ${pc.dim('├─────────────────────────────────────────────────────────────────────┤')}
+  ${pc.dim('│')} ${pc.dim('github.com/raduceuca/claudecraft')} ${pc.dim('·')} ${pc.dim('MIT')} ${pc.dim('·')} ${pc.dim(`v${VERSION}`)}
+  ${pc.dim('╰─────────────────────────────────────────────────────────────────────╯')}
+`;
+}
+export function renderInitComplete(stats) {
+    // Existential dread for existing projects
+    const dread = [
+        "Your existing chaos now has structure. Briefly.",
+        "The slop has been organized. Alphabetically, even.",
+        "Claude will remember this project. Unfortunately.",
+        "Skills injected. Side effects may include productivity.",
+        ".claude/ added. Your git diff weeps.",
+        "Now Claude knows your codebase. Be afraid.",
+        "Legacy code meets AI. Pray.",
+        "27 guardrails installed. You're still the driver.",
+        "Your technical debt now has company.",
+    ];
+    const randomDread = dread[Math.floor(Math.random() * dread.length)];
+    return `
+  ${pc.dim('╭─── INIT COMPLETE ────────────────────────────────────────────────────╮')}
+  ${pc.dim('│')} ${pc.green('✓')} ${pc.bold('Skills injected')} ${pc.dim('·')} ${pc.dim(randomDread)}
+  ${pc.dim('├─── ADDED ────────────────────────────────────────────────────────────┤')}
+  ${pc.dim('│')} .claude/skills/     ${pc.dim(`${stats.skills} skills`)}
+  ${pc.dim('│')} .claude/commands/   ${pc.dim(`${stats.commands} commands`)}
+  ${pc.dim('│')} .claude/hooks/      ${pc.dim('2 hooks')}
+  ${pc.dim('│')} .claude/settings/   ${pc.dim('config + MCP guide')}
+  ${pc.dim('│')} CLAUDE.md           ${pc.dim('project context (if missing)')}
+  ${pc.dim('├─── FIGMA INTEGRATION ────────────────────────────────────────────────┤')}
+  ${pc.dim('│')} ${pc.cyan('$')} claude mcp add --transport http figma https://mcp.figma.com/mcp
+  ${pc.dim('│')} ${pc.dim('Then /mcp → figma → Authenticate')}
+  ${pc.dim('├─── STATS ────────────────────────────────────────────────────────────┤')}
+  ${pc.dim('│')} files ${String(stats.files).padEnd(4)} ${pc.dim('│')} skills ${String(stats.skills).padEnd(4)} ${pc.dim('│')} time ${stats.time}
+  ${pc.dim('├─── NEXT ─────────────────────────────────────────────────────────────┤')}
+  ${pc.dim('│')} ${pc.cyan('/brainstorm')}  ${pc.dim('start a conversation')}
+  ${pc.dim('│')} ${pc.cyan('/write-plan')}  ${pc.dim('plan before building')}
+  ${pc.dim('│')} ${pc.dim('See .claude/settings/MCP_SETUP.md for more integrations')}
+  ${pc.dim('╰─────────────────────────────────────────────────────────────────────╯')}
+`;
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "create-claudecraft",
+  "version": "1.0.0",
+  "description": "Designer-first boilerplate for Claude Code. 27 skills, 7 commands, 32 themes. The robots are here.",
+  "type": "module",
+  "bin": {
+    "create-claudecraft": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "templates",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "start": "node bin/cli.js",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "ai",
+    "boilerplate",
+    "react",
+    "typescript",
+    "tailwind",
+    "daisyui",
+    "create",
+    "cli",
+    "designer",
+    "vite",
+    "bun",
+    "anthropic",
+    "skills",
+    "agents"
+  ],
+  "author": {
+    "name": "Radu Ceuca",
+    "url": "https://x.com/raduceuca"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/raduceuca/claudecraft.git",
+    "directory": "create-claudecraft"
+  },
+  "bugs": {
+    "url": "https://github.com/raduceuca/claudecraft/issues"
+  },
+  "homepage": "https://claudecraft.dev",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/figlet": "^1.5.8",
+    "@types/fs-extra": "^11.0.4",
+    "@types/gradient-string": "^1.1.6",
+    "@types/node": "^20.11.0",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "figlet": "^1.7.0",
+    "fs-extra": "^11.2.0",
+    "gradient-string": "^2.0.2",
+    "ink": "^6.6.0",
+    "ink-select-input": "^6.2.0",
+    "ink-text-input": "^6.0.0",
+    "picocolors": "^1.0.0",
+    "react": "^19.2.3"
+  }
+}