create-claudecraft 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Radu Ceuca
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,194 @@
+# create-claudecraft
+
+Your taste. Their labor. Finally.
+
+```bash
+bun create claudecraft my-app
+```
+
+---
+
+## What
+
+Hey, designer. Your job isn't going anywhere—but it is getting weirder. The robots are here, and they have opinions about border-radius.
+
+This is a boilerplate for people who'd rather shape the slop than become it. Pre-configured with design constraints, accessibility guilt trips, and 32 themes so you can procrastinate on the hard decisions.
+
+---
+
+## Install
+
+```bash
+bun create claudecraft my-app
+cd my-app
+bun dev
+```
+
+Open `localhost:6969`. Nice.
+
+**Also works with:**
+```bash
+npx create-claudecraft my-app
+pnpm create claudecraft my-app
+```
+
+---
+
+## Stack
+
+| Tool | Why |
+|------|-----|
+| React 18 | You know why |
+| TypeScript 5 | Lies surfaced early |
+| Vite 5 | Fast enough to feel productive |
+| Tailwind 3 | Utility cope |
+| DaisyUI 4 | 32 themes, 0 decisions |
+| Vitest | Tests that might catch bugs |
+| Bun | Speed you'll briefly appreciate |
+
+---
+
+## What's Inside
+
+### 27 Skills
+
+Guardrails. Claude wants to help. These make sure it helps *correctly*.
+
+**Process** (via [obra/superpowers](https://github.com/obra/superpowers))
+
+| Skill | What it does |
+|-------|--------------|
+| `brainstorming` | Poke holes before you build |
+| `writing-plans` | Scope creep prevention |
+| `executing-plans` | Checkpoints for the anxious |
+| `test-driven-development` | Write the test first, cry later |
+| `systematic-debugging` | Denial → anger → acceptance → fix |
+| `verification-before-completion` | Did you actually check? |
+| `requesting-code-review` | Brace for feedback |
+| `receiving-code-review` | They meant well |
+| `using-git-worktrees` | Branch isolation therapy |
+| `finishing-a-development-branch` | Merge it or delete it |
+| `subagent-driven-development` | Outsource to yourself |
+| `dispatching-parallel-agents` | Fake productivity, real results |
+| `writing-skills` | Teach Claude your ways |
+
+**Design**
+
+| Skill | What it does |
+|-------|--------------|
+| `react-best-practices` | Fewer re-renders, more peace |
+| `testing-patterns` | Tests that find bugs, not LOC |
+| `ui-skills` | CSS that cooperates |
+| `a11y-audit` | WCAG compliance therapy |
+| `seo-review` | Feed the algorithm |
+| `og-image` | Social cards worth clicking |
+| `microcopy` | Words that don't annoy users |
+| `sitemap-generator` | Crawler food |
+| `json-ld` | Structured data for bots |
+| `figma-to-code` | Pixel-perfect from Figma |
+| `design-polish` | Systematic polish passes |
+| `visual-iteration` | Mockup to code loop |
+| `ralph-wiggum-loops` | Sleep while Claude ships |
+
+### 7 Commands
+
+```
+/build          Compile and hope
+/typecheck      Surface the lies in your types
+/lint           Formatting tribunal
+/brainstorm     Interrogate your assumptions
+/write-plan     Think before you ship
+/execute-plan   Stop planning, start building
+/ralph          Autonomous loop templates
+```
+
+### 32 Themes
+
+DaisyUI ships 32 themes. Pick one. Everything updates. Decision deferred successfully.
+
+### 2 Hooks
+
+| Hook | What it does |
+|------|--------------|
+| `typecheck-after-edit` | TypeScript check after saves |
+| `check-branch` | Warns before you commit to main |
+
+---
+
+## The Superpower
+
+**Ralph Wiggum loops.** Claude works autonomously—building, checking, fixing—until done. Walk away. Come back to finished work.
+
+```bash
+/ralph-loop "Build a card component with hover states" \
+  --completion-promise "COMPLETE" \
+  --max-iterations 15
+```
+
+YC teams shipped 6 repos overnight. $50k contracts completed for $297 in API costs.
+
+Named after the Simpsons character. Keeps going despite everything.
+
+---
+
+## Structure
+
+```
+.claude/
+├── commands/           # /build, /lint, /ralph
+├── hooks/              # typecheck, branch warnings
+├── skills/             # 27 behavioral guardrails
+├── settings.json       # hook config
+└── settings.local.json # pre-approved chaos
+
+src/
+├── components/ui/      # Button, ThemeSelector, CodeBlock
+├── context/            # ThemeContext
+├── pages/              # HomePage
+└── lib/                # utils
+
+CLAUDE.md               # project brain dump
+```
+
+---
+
+## Options
+
+```bash
+bun create claudecraft [name] [flags]
+
+Flags:
+  -y, --yes        Skip prompts. Use defaults.
+  --no-git         Skip git init
+  --no-install     Skip bun install
+  --init           Add skills to existing project
+  -h, --help       This
+  -v, --version    Version number
+```
+
+---
+
+## Requirements
+
+**Bun** — The fast one.
+```bash
+curl -fsSL https://bun.sh/install | bash
+```
+
+**Claude Code** — The AI that reads your CLAUDE.md and (mostly) follows it.
+
+---
+
+## Links
+
+[Website](https://claudecraft.dev) · [GitHub](https://github.com/raduceuca/claudecraft) · [Issues](https://github.com/raduceuca/claudecraft/issues)
+
+---
+
+## License
+
+MIT. Do whatever. Credit appreciated, not required.
+
+---
+
+Made by a designer who got tired of the slop. [@raduceuca](https://x.com/raduceuca)

package/bin/cli.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '../dist/index.js';

package/dist/constants.d.ts

@@ -0,0 +1,71 @@
+export declare const PACKAGE_NAME = "create-claudecraft";
+export declare const VERSION = "1.0.0";
+export declare const DEFAULT_PORT = 6969;
+export declare const DEFAULT_THEME = "halloween";
+export declare const TAGLINE = "Your taste. Their labor. Finally.";
+export declare const STACK: {
+    readonly react: "18.x";
+    readonly typescript: "5.x";
+    readonly vite: "5.x";
+    readonly tailwind: "3.x";
+    readonly daisyui: "4.x";
+};
+export declare const ASSETS: {
+    readonly skills: 27;
+    readonly commands: 7;
+    readonly themes: 32;
+    readonly hooks: 2;
+    readonly components: 6;
+};
+export interface Skill {
+    name: string;
+    description: string;
+    group: 'workflow' | 'design';
+    bytes: number;
+}
+export declare const SKILLS: Skill[];
+export declare const BUNDLES: {
+    readonly everything: {
+        readonly name: "Everything";
+        readonly description: "All of it. No restraint.";
+        readonly skills: string[];
+        readonly commands: 6;
+        readonly files: 48;
+    };
+    readonly designer: {
+        readonly name: "Designer Essentials";
+        readonly description: "UI, a11y, Figma, and enough process to stay sane.";
+        readonly skills: readonly ["react-best-practices", "ui-skills", "a11y-audit", "testing-patterns", "seo-review", "systematic-debugging", "brainstorming", "writing-plans", "verification-before-completion", "design-polish", "visual-iteration", "ralph-wiggum-loops", "figma-to-code"];
+        readonly commands: 4;
+        readonly files: 35;
+    };
+    readonly workflow: {
+        readonly name: "Workflow Only";
+        readonly description: "Process without opinions.";
+        readonly skills: string[];
+        readonly commands: 3;
+        readonly files: 28;
+    };
+};
+export declare const COMMANDS: {
+    name: string;
+    description: string;
+}[];
+export declare const ERRORS: {
+    dirExists: (name: string) => {
+        title: string;
+        body: string;
+    };
+    noBun: () => {
+        title: string;
+        body: string;
+    };
+    network: () => {
+        title: string;
+        body: string;
+    };
+    noProject: () => {
+        title: string;
+        body: string;
+    };
+};

package/dist/constants.js

@@ -0,0 +1,128 @@
+export const PACKAGE_NAME = 'create-claudecraft';
+export const VERSION = '1.0.0';
+export const DEFAULT_PORT = 6969;
+export const DEFAULT_THEME = 'halloween';
+export const TAGLINE = 'Your taste. Their labor. Finally.';
+export const STACK = {
+    react: '18.x',
+    typescript: '5.x',
+    vite: '5.x',
+    tailwind: '3.x',
+    daisyui: '4.x',
+};
+export const ASSETS = {
+    skills: 27,
+    commands: 7,
+    themes: 32,
+    hooks: 2,
+    components: 6,
+};
+export const SKILLS = [
+    // Workflow (via obra/superpowers)
+    { name: 'brainstorming', description: 'poke holes before you build', group: 'workflow', bytes: 2800 },
+    { name: 'writing-plans', description: 'scope creep prevention', group: 'workflow', bytes: 3200 },
+    { name: 'executing-plans', description: 'checkpoints for the anxious', group: 'workflow', bytes: 2400 },
+    { name: 'systematic-debugging', description: 'denial → anger → acceptance → fix', group: 'workflow', bytes: 8500 },
+    { name: 'test-driven-development', description: 'write the test first, cry later', group: 'workflow', bytes: 3100 },
+    { name: 'verification-before-completion', description: 'did you actually check?', group: 'workflow', bytes: 1800 },
+    { name: 'requesting-code-review', description: 'brace for feedback', group: 'workflow', bytes: 2200 },
+    { name: 'receiving-code-review', description: 'they meant well', group: 'workflow', bytes: 1900 },
+    { name: 'using-git-worktrees', description: 'branch isolation therapy', group: 'workflow', bytes: 2100 },
+    { name: 'finishing-a-development-branch', description: 'merge it or delete it', group: 'workflow', bytes: 1700 },
+    { name: 'subagent-driven-development', description: 'outsource to yourself', group: 'workflow', bytes: 4200 },
+    { name: 'dispatching-parallel-agents', description: 'fake productivity, real results', group: 'workflow', bytes: 1600 },
+    { name: 'writing-skills', description: 'teach Claude your ways', group: 'workflow', bytes: 5800 },
+    { name: 'using-superpowers', description: 'RTFM energy', group: 'workflow', bytes: 1200 },
+    // Design
+    { name: 'react-best-practices', description: 'fewer re-renders, more peace', group: 'design', bytes: 4200 },
+    { name: 'testing-patterns', description: 'tests that catch bugs', group: 'design', bytes: 3800 },
+    { name: 'ui-skills', description: "CSS that cooperates", group: 'design', bytes: 2900 },
+    { name: 'a11y-audit', description: 'WCAG compliance therapy', group: 'design', bytes: 3400 },
+    { name: 'seo-review', description: 'feed the algorithm', group: 'design', bytes: 2100 },
+    { name: 'og-image', description: 'cards worth clicking', group: 'design', bytes: 1800 },
+    { name: 'microcopy', description: 'interface text that helps', group: 'design', bytes: 2200 },
+    { name: 'sitemap-generator', description: 'crawler food', group: 'design', bytes: 1400 },
+    { name: 'json-ld', description: 'structured data for bots', group: 'design', bytes: 1600 },
+    { name: 'figma-to-code', description: 'pixel-perfect from Figma', group: 'design', bytes: 3200 },
+    { name: 'design-polish', description: 'systematic polish passes', group: 'design', bytes: 2400 },
+    { name: 'visual-iteration', description: 'mockup to code loop', group: 'design', bytes: 2100 },
+    { name: 'ralph-wiggum-loops', description: 'sleep while Claude ships', group: 'design', bytes: 6800 },
+];
+export const BUNDLES = {
+    everything: {
+        name: 'Everything',
+        description: 'All of it. No restraint.',
+        skills: SKILLS.map((s) => s.name),
+        commands: 6,
+        files: 48,
+    },
+    designer: {
+        name: 'Designer Essentials',
+        description: 'UI, a11y, Figma, and enough process to stay sane.',
+        skills: [
+            'react-best-practices',
+            'ui-skills',
+            'a11y-audit',
+            'testing-patterns',
+            'seo-review',
+            'systematic-debugging',
+            'brainstorming',
+            'writing-plans',
+            'verification-before-completion',
+            'design-polish',
+            'visual-iteration',
+            'ralph-wiggum-loops',
+            'figma-to-code',
+        ],
+        commands: 4,
+        files: 35,
+    },
+    workflow: {
+        name: 'Workflow Only',
+        description: 'Process without opinions.',
+        skills: SKILLS.filter((s) => s.group === 'workflow').map((s) => s.name),
+        commands: 3,
+        files: 28,
+    },
+};
+export const COMMANDS = [
+    { name: '/build', description: 'compile and hope' },
+    { name: '/typecheck', description: 'surface the lies' },
+    { name: '/lint', description: 'formatting tribunal' },
+    { name: '/brainstorm', description: 'interrogate your assumptions' },
+    { name: '/write-plan', description: 'think before you ship' },
+    { name: '/execute-plan', description: 'stop planning, start building' },
+    { name: '/ralph', description: 'autonomous loop templates' },
+];
+export const ERRORS = {
+    dirExists: (name) => ({
+        title: `"${name}" already exists`,
+        body: `Your options:
+  1. Pick a different name (creativity exercise)
+  2. Delete the old one (commitment issues)
+  3. Use --init to add skills to it (pragmatism)`,
+    }),
+    noBun: () => ({
+        title: 'Bun not found',
+        body: `The fast runtime. You need it.
+
+  curl -fsSL https://bun.sh/install | bash
+
+Then try again. We'll wait.`,
+    }),
+    network: () => ({
+        title: 'Network gave up',
+        body: `Either your wifi or npm. Probably npm.
+
+Check your connection and retry. If npm is down,
+join the mass hallucination at status.npmjs.org.`,
+    }),
+    noProject: () => ({
+        title: 'Nothing here',
+        body: `--init needs an existing project. This directory is empty.
+No package.json. No hope.
+
+Create something first:
+  bun create claudecraft my-app`,
+    }),
+};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,229 @@
+import pc from 'picocolors';
+import fs from 'fs';
+import path from 'path';
+import { renderHeader, renderManifest, renderMiniHeader, renderProgress, renderProgressFooter, renderComplete, renderError, renderInitComplete, } from './ui.js';
+import { runInkPrompts, runInkInitPrompts } from './ink-prompts.js';
+import { scaffold, initExisting } from './scaffold.js';
+import { ERRORS, DEFAULT_THEME, DEFAULT_PORT, ASSETS, SKILLS, VERSION } from './constants.js';
+async function main() {
+    // Parse args
+    const args = process.argv.slice(2);
+    const projectName = args.find((a) => !a.startsWith('-'));
+    const skipPrompts = args.includes('--yes') || args.includes('-y');
+    const noGit = args.includes('--no-git');
+    const noInstall = args.includes('--no-install');
+    const showHelp = args.includes('--help') || args.includes('-h') || args.includes('/help');
+    const showVersion = args.includes('--version') || args.includes('-v') || args.includes('/version');
+    const initMode = args.includes('--init') || args.includes('-i') || args.includes('/init');
+    if (showVersion) {
+        console.log(VERSION);
+        process.exit(0);
+    }
+    if (showHelp) {
+        console.log(`
+${pc.bold('create-claudecraft')} - Designer-first boilerplate for Claude Code
+
+${pc.bold('Usage:')}
+  bun create claudecraft [project-name] [options]
+
+${pc.bold('Options:')}
+  --yes, -y          Skip prompts, use defaults
+  --init, -i         Add skills to existing project (no scaffold)
+  --no-git           Skip git initialization
+  --no-install       Skip dependency installation
+  --help, -h         Show this help
+  --version, -v      Show version
+
+${pc.bold('Slash Commands:')}
+  /help              Same as --help
+  /init              Same as --init
+  /version           Same as --version
+
+${pc.bold('Examples:')}
+  ${pc.dim('# New project')}
+  bun create claudecraft my-app
+  bun create claudecraft my-app --yes
+
+  ${pc.dim('# Existing project (run from project root)')}
+  bunx create-claudecraft --init
+  bunx create-claudecraft --init --yes
+
+${pc.bold('Figma Integration:')}
+  After setup, connect Figma MCP:
+  claude mcp add --transport http figma https://mcp.figma.com/mcp
+`);
+        process.exit(0);
+    }
+    // Init mode: add to existing project
+    if (initMode) {
+        await runInitMode(skipPrompts);
+        return;
+    }
+    // Get user choices
+    let choices;
+    if (skipPrompts) {
+        // Show header only for non-interactive mode
+        console.clear();
+        console.log(renderHeader());
+        console.log(renderManifest());
+        choices = {
+            projectName: projectName || 'claudecraft-app',
+            bundle: 'everything',
+            selectedSkills: SKILLS.map((s) => s.name),
+            includeHomepage: true,
+            initGit: !noGit,
+        };
+        console.log(pc.dim(`  Using defaults: ${choices.projectName}, all skills, homepage, git init`));
+        console.log('');
+    }
+    else {
+        const result = await runInkPrompts(projectName);
+        if (!result)
+            process.exit(0);
+        choices = result;
+    }
+    // Override git if --no-git flag
+    if (noGit)
+        choices.initGit = false;
+    // Progress state
+    const progressState = {
+        scaffolding: { name: 'scaffolding', progress: 0, status: 'queued', detail: '' },
+        dependencies: { name: 'dependencies', progress: 0, status: 'queued', detail: '' },
+        'git init': { name: 'git init', progress: 0, status: 'queued', detail: '' },
+    };
+    let startTime = Date.now();
+    const updateProgress = (task, progress, detail) => {
+        progressState[task] = {
+            name: task,
+            progress,
+            status: progress >= 100 ? 'done' : 'active',
+            time: progress >= 100 ? `${((Date.now() - startTime) / 1000).toFixed(1)}s` : undefined,
+            detail: detail || '',
+        };
+        // Mark previous tasks as done
+        const tasks = Object.keys(progressState);
+        const currentIndex = tasks.indexOf(task);
+        for (let i = 0; i < currentIndex; i++) {
+            if (progressState[tasks[i]].status !== 'done') {
+                progressState[tasks[i]].status = 'done';
+                progressState[tasks[i]].progress = 100;
+            }
+        }
+        // Re-render progress
+        console.clear();
+        console.log(renderMiniHeader());
+        console.log('');
+        console.log(renderProgress([
+            progressState['scaffolding'],
+            progressState['dependencies'],
+            progressState['git init'],
+        ]));
+        const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+        console.log(renderProgressFooter(`${elapsed}s`, ''));
+    };
+    try {
+        startTime = Date.now();
+        const result = await scaffold(choices, updateProgress);
+        // Final output
+        console.clear();
+        console.log(renderMiniHeader());
+        console.log(renderComplete(choices.projectName, {
+            files: result.files,
+            skills: result.skills,
+            commands: result.commands,
+            themes: ASSETS.themes,
+            time: result.time,
+            deps: result.deps,
+            disk: result.disk,
+            theme: DEFAULT_THEME,
+            port: DEFAULT_PORT,
+        }));
+    }
+    catch (err) {
+        const error = err;
+        if (error.message.startsWith('DIR_EXISTS:')) {
+            const name = error.message.split(':')[1];
+            const { title, body } = ERRORS.dirExists(name);
+            console.log(renderError(title, body));
+        }
+        else if (error.message === 'INSTALL_FAILED') {
+            const { title, body } = ERRORS.network();
+            console.log(renderError(title, body));
+        }
+        else {
+            console.log(renderError('Unexpected error', error.message));
+        }
+        process.exit(1);
+    }
+}
+async function runInitMode(skipPrompts) {
+    // Check if we're in a project directory
+    const cwd = process.cwd();
+    const pkgPath = path.join(cwd, 'package.json');
+    if (!fs.existsSync(pkgPath)) {
+        const { title, body } = ERRORS.noProject();
+        console.log(renderError(title, body));
+        process.exit(1);
+    }
+    // Check if .claude already exists
+    const claudeDir = path.join(cwd, '.claude');
+    const alreadyInit = fs.existsSync(claudeDir);
+    // Show warning if .claude already exists (for --yes mode)
+    if (alreadyInit && skipPrompts) {
+        console.log(pc.yellow('  ⚠ .claude/ exists - will merge, not overwrite'));
+    }
+    // Get choices
+    let choices;
+    if (skipPrompts) {
+        choices = {
+            selectedSkills: SKILLS.map((s) => s.name),
+        };
+        console.log(pc.dim(`  Using defaults: all ${SKILLS.length} skills`));
+        console.log('');
+    }
+    else {
+        const result = await runInkInitPrompts();
+        if (!result)
+            process.exit(0);
+        choices = result;
+    }
+    // Progress state (simpler for init)
+    const progressState = {
+        scaffolding: { name: 'scaffolding', progress: 0, status: 'queued', detail: '' },
+    };
+    let startTime = Date.now();
+    const updateProgress = (task, progress, detail) => {
+        progressState[task] = {
+            name: task,
+            progress,
+            status: progress >= 100 ? 'done' : 'active',
+            time: progress >= 100 ? `${((Date.now() - startTime) / 1000).toFixed(1)}s` : undefined,
+            detail: detail || '',
+        };
+        console.clear();
+        console.log(renderMiniHeader());
+        console.log('');
+        console.log(renderProgress([progressState['scaffolding']]));
+        const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+        console.log(renderProgressFooter(`${elapsed}s`, ''));
+    };
+    try {
+        startTime = Date.now();
+        const result = await initExisting(choices, updateProgress);
+        // Final output
+        console.clear();
+        console.log(renderMiniHeader());
+        console.log(renderInitComplete({
+            files: result.files,
+            skills: result.skills,
+            commands: result.commands,
+            time: result.time,
+        }));
+    }
+    catch (err) {
+        const error = err;
+        console.log(renderError('Init failed', error.message));
+        process.exit(1);
+    }
+}
+main().catch(console.error);

package/dist/ink-prompts.d.ts

@@ -0,0 +1,12 @@
+export interface UserChoices {
+    projectName: string;
+    bundle: 'everything' | 'designer' | 'workflow' | 'custom';
+    selectedSkills: string[];
+    includeHomepage: boolean;
+    initGit: boolean;
+}
+export interface InitChoices {
+    selectedSkills: string[];
+}
+export declare function runInkPrompts(defaultName?: string): Promise<UserChoices | null>;
+export declare function runInkInitPrompts(): Promise<InitChoices | null>;