screencraft 0.1.0

package/.claude/settings.local.json

@@ -0,0 +1,30 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(node -e:*)",
+      "Bash(node:*)",
+      "Bash(npm install:*)",
+      "Bash(xcrun simctl:*)",
+      "Bash(ls:*)",
+      "Bash('/Applications/Adobe After Effects 2026/aerender' -help)",
+      "Bash('/Applications/Adobe After Effects 2026/aerender' -project '/tmp/test-ae-output/source/app-launch.aep' -comp \"Screenshot_scene_1\" -RStemplate \"Best Settings\" -output '/tmp/test-ae-output/video/preview.mov' -v ERRORS_AND_PROGRESS -continueOnMissingFootage)",
+      "Bash(open:*)",
+      "Bash(find:*)",
+      "Bash('/Applications/Adobe After Effects 2026/aerender' -project '/tmp/test-ae-wild/source/app-launch.aep' -s '/tmp/test-ae-wild/source/ae_swap.jsx' -close SAVE_CHANGES -v ERRORS_AND_PROGRESS)",
+      "Bash('/Applications/Adobe After Effects 2026/aerender' -project '/tmp/test-ae-wild/source/app-launch.aep' -comp \"MASTER_app_launch\" -s '/tmp/test-ae-wild/source/ae_swap.jsx' -e 1 -close SAVE_CHANGES -v ERRORS_AND_PROGRESS)",
+      "Bash('/Applications/Adobe After Effects 2026/aerender' -project '/tmp/test-ae-wild/source/app-launch.aep' -comp \"MASTER_app_launch\" -s '/tmp/test-ae-wild/source/ae_swap.jsx' -output '/tmp/test-ae-wild/video/preview.mp4' -RStemplate \"Best Settings\" -v ERRORS_AND_PROGRESS -continueOnMissingFootage)",
+      "Bash(osascript:*)",
+      "Bash(kill:*)",
+      "Bash(pkill:*)",
+      "Bash('/Applications/Adobe After Effects 2026/aerender' -project '/tmp/test-ae-wild/source/app-launch.aep' -comp \"MASTER_app_launch\" -output '/tmp/test-ae-wild/video/preview.mp4' -RStemplate \"Best Settings\" -v ERRORS_AND_PROGRESS -continueOnMissingFootage)",
+      "Bash('/Applications/Adobe After Effects 2026/aerender' -project '/tmp/test-ae-final/source/app-launch.aep' -comp \"MASTER_app_launch\" -output '/tmp/test-ae-final/video/preview.mp4' -RStemplate \"Best Settings\" -v ERRORS_AND_PROGRESS -continueOnMissingFootage)",
+      "Bash(ffmpeg:*)",
+      "Bash(for:*)",
+      "Bash(do)",
+      "Bash(base=\"$f%.mp4\")",
+      "Bash(echo:*)",
+      "Bash(done)",
+      "Bash(sips -g hasAlpha:*)"
+    ]
+  }
+}

package/.env.example

@@ -0,0 +1,3 @@
+ANTHROPIC_API_KEY=sk-ant-your-key-here
+SCREENCRAFT_API=https://api.screencraft.dev
+NODE_ENV=development

package/MCP_README.md

@@ -0,0 +1,200 @@
+# ScreenCraft MCP Server
+
+ScreenCraft plugs directly into **Claude Code**, **Claude Desktop**, and **Claude Cowork** as an MCP (Model Context Protocol) server. This means your AI assistant can generate your entire App Store launch kit — screenshots, headlines, device mockups, PSDs, and preview video — without you leaving your coding session.
+
+The key insight: **Claude already understands your app**. It's read your codebase, knows your features, and understands your users. ScreenCraft lets Claude turn that understanding into App Store assets, with zero additional API costs.
+
+---
+
+## What It Does
+
+When ScreenCraft is connected as an MCP server, your AI assistant gets these tools:
+
+| Tool | What It Does |
+|------|-------------|
+| `detect_brand` | Scans your project for brand colors, app icon, fonts, logo, and framework |
+| `set_brand_overrides` | Lets Claude fix or refine colors/name based on what it knows from your code |
+| `suggest_screenshots` | Claude recommends which screens to capture based on your app's routes and features |
+| `set_headlines` | Claude writes App Store headline copy — the white text + accent word for each screen |
+| `list_templates` | Shows available PSD layout templates |
+| `set_template` | Picks a template for screenshot compositing |
+| `open_ui` | Launches the visual web UI at localhost:3141, pre-filled with everything Claude set up |
+| `generate_launch_kit` | Runs the full pipeline headlessly — no UI needed |
+| `get_session_status` | Checks what's been configured and what's still needed |
+
+---
+
+## Setup (One Time)
+
+### Option 1: Claude Code CLI
+
+```bash
+claude mcp add --transport stdio screencraft -- npx screencraft --mcp
+```
+
+### Option 2: Project config file
+
+Add a `.mcp.json` file to your project root:
+
+```json
+{
+  "mcpServers": {
+    "screencraft": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["screencraft", "--mcp"]
+    }
+  }
+}
+```
+
+This gets committed to git — anyone on your team who uses Claude Code gets ScreenCraft tools automatically.
+
+### Option 3: Claude Desktop
+
+Add to your Claude Desktop config (`claude_desktop_config.json`):
+
+```json
+{
+  "mcpServers": {
+    "screencraft": {
+      "command": "npx",
+      "args": ["screencraft", "--mcp"]
+    }
+  }
+}
+```
+
+---
+
+## How It Works
+
+### The Flow
+
+1. You're coding with Claude (Code, Desktop, or Cowork)
+2. You say: **"Generate App Store screenshots for my app"**
+3. Claude reads your codebase — it already knows your app's features, colors, and purpose
+4. Claude calls ScreenCraft tools:
+   - `detect_brand` → finds your colors, icon, font from the project
+   - `set_headlines` → writes headline copy for each screen (no API call — Claude IS the AI)
+   - `suggest_screenshots` → recommends which screens to capture
+   - `open_ui` → opens the web UI with everything pre-filled
+5. You review in the browser, capture screenshots from the Simulator, and click Generate
+6. Done — composited App Store PNGs, layered PSDs, AE project, and preview video
+
+### Why This Is Different
+
+Traditional approach: Screenshot tool asks you to type headlines, pick colors, configure everything manually. Or it calls an AI API (costing tokens) to analyze your app from scratch.
+
+ScreenCraft + MCP approach: Claude already has full context on your app from your coding session. It generates the headlines, suggests the right screens, and knows your brand — then pushes all of that into ScreenCraft. **Zero extra AI cost. Zero manual config.**
+
+---
+
+## Example Prompts
+
+Once MCP is connected, try these in Claude Code or Claude Desktop:
+
+### Full launch kit
+> Generate my App Store launch kit. Detect my brand, write headlines for 6 key screens, and open the ScreenCraft UI so I can capture screenshots.
+
+### Just headlines
+> Write App Store headline copy for my app. I need a short white text phrase and an accent word for each of these screens: home, settings, onboarding, profile, analytics, pricing.
+
+### Brand check
+> Run ScreenCraft brand detection on my project and tell me what colors, icon, and font it found. Fix anything that looks wrong.
+
+### Headless generation
+> I already have screenshots in my screenshots/ folder. Detect my brand, write headlines, and generate the launch kit without opening the UI.
+
+---
+
+## What Gets Generated
+
+| Output | Free Tier | Licensed |
+|--------|-----------|----------|
+| Composited App Store PNGs (1290x2796) | Yes | Yes |
+| Raw simulator screenshots | Yes | Yes |
+| Brand assets (icon, logo, font) | Yes | Yes |
+| Layered PSD files | — | Yes |
+| After Effects project (.aep) | — | Yes |
+| App Store preview video (.mp4) | — | Yes |
+
+Output lands in `your-project/launch-kit/`.
+
+---
+
+## Prerequisites
+
+- **Node.js 18+**
+- **ScreenCraft installed**: `npm install -g screencraft`
+- **For screenshot capture**: Xcode with your app running in the iOS Simulator (build with Cmd+R before generating)
+- **For video rendering** (optional): Adobe After Effects 2024-2026 with scripting enabled
+
+---
+
+## Architecture
+
+```
+Your AI Session (Claude Code / Desktop / Cowork)
+    │
+    │  MCP tools (stdio)
+    ▼
+ScreenCraft MCP Server (src/mcp/index.js)
+    │
+    │  Shared session state
+    ▼
+ScreenCraft Web UI (localhost:3141)
+    │
+    │  Calls existing pipeline
+    ▼
+┌─────────────────────────────────┐
+│  Brand Detection                │
+│  Screenshot Capture (Simulator) │
+│  PSD Compositing (sharp/ag-psd)│
+│  AE Project Prep + Render      │
+└─────────────────────────────────┘
+```
+
+The MCP server and web UI share the same session. MCP tools populate brand data, headlines, and preferences. The web UI reads that state and presents it visually. The user reviews, captures screenshots, and triggers generation.
+
+---
+
+## Registering as an Official MCP Server
+
+ScreenCraft can be published to the [Official MCP Registry](https://registry.modelcontextprotocol.io/) so users can discover it alongside 19,000+ other MCP servers.
+
+Steps:
+1. Publish the npm package (`npm publish`)
+2. Create a `server.json` with registry metadata
+3. Authenticate namespace via GitHub or DNS verification for screencraft.dev
+4. Submit via the MCP publisher CLI
+
+Once registered, ScreenCraft appears in the registry and downstream aggregators like mcp.so and mcpservers.org.
+
+---
+
+## Troubleshooting
+
+**"Tools not showing up in Claude Code"**
+- Run `/mcp` in Claude Code to check server status
+- Make sure `npx screencraft --mcp` works standalone (should produce no output — it's waiting for stdio messages)
+
+**"Brand detection found wrong colors"**
+- Use `set_brand_overrides` to fix them, or edit in the web UI
+- Add a `screencraft.config.js` to your project root for permanent overrides
+
+**"Screenshots fail to capture"**
+- Build and run your app in the Simulator (Xcode Cmd+R) before capturing
+- ScreenCraft detects the running simulator — it won't boot a blank one
+
+**GNotificationCenterDelegate warning in terminal**
+- Harmless. Caused by canvas and sharp both bundling libgio. Does not affect functionality.
+
+---
+
+## Links
+
+- [ScreenCraft Website](https://screencraft.dev)
+- [Get a License Key](https://screencraft.dev/activate)
+- [MCP Protocol Docs](https://modelcontextprotocol.io)
+- [MCP Registry](https://registry.modelcontextprotocol.io)

package/README.md

@@ -0,0 +1,148 @@
+# ScreenCraft CLI
+
+> App Store launch kit from one terminal command.
+
+```bash
+npx screencraft launch
+```
+
+Generates App Store screenshots, layered PSDs, and a preview video — automatically branded from your codebase.
+
+---
+
+## What it does
+
+1. **Detects** your framework (Expo, React Native, Flutter, Swift, Android)
+2. **Reads** brand colors + app name from your theme files — no config needed
+3. **Captures** screenshots from the iOS/Android simulator (or uses `./screenshots/` folder)
+4. **Suggests** App Store headline text via Claude AI — you approve each one
+5. **Composites** screenshots into device mockups with your headline text baked in
+6. **Renders** a 30s vertical preview video using your branded After Effects template
+7. **Outputs** a complete `/launch-kit/` folder in your project root
+
+---
+
+## Output
+
+```
+your-app/
+  launch-kit/
+    screenshots/
+      screen_01.png     ← App Store-ready PNG, 1290×2796px
+      screen_02.png
+      screen_03.png
+      screen_04.png
+      screen_05.png
+    video/
+      preview.mp4       ← 30s vertical preview (watermarked until activated)
+    source/
+      app-launch.aep    ← Editable After Effects project
+      screen_01.psd     ← Layered PSD (Pro tier)
+      ...
+    README.md           ← App Store submission checklist
+```
+
+---
+
+## Tiers
+
+| | Free | Launch ($49) | Pro ($99) |
+|---|---|---|---|
+| App Store PNGs | ✓ | ✓ | ✓ |
+| Preview video (clean) | watermarked | ✓ | ✓ |
+| After Effects file | — | ✓ | ✓ |
+| Layered PSDs | — | — | ✓ |
+| Social cut (1:1) | — | — | ✓ |
+| App Store copy | — | — | ✓ |
+
+---
+
+## Quick Start
+
+### Option A — Automated (with simulator)
+
+Add routes to `screencraft.config.js` in your project root:
+
+```js
+module.exports = {
+  app: {
+    name: "YourApp",
+    tagline: "Your tagline here.",
+    cta: "Download Free",
+  },
+  screenshots: [
+    { route: "/home",     label: "Everything at a glance" },
+    { route: "/features", label: "Built for how you work" },
+    { route: "/profile",  label: "Your space, your way" },
+    { route: "/onboard",  label: "Get started in seconds" },
+    { route: "/settings", label: "Simple and powerful" },
+  ],
+};
+```
+
+Then run:
+```bash
+npx screencraft launch
+```
+
+### Option B — Manual screenshots (fastest for testing)
+
+1. Take screenshots on your phone or simulator
+2. Place them in `./screenshots/` in your project root
+3. Run `npx screencraft launch`
+
+The CLI will pick them up automatically.
+
+---
+
+## Commands
+
+```bash
+npx screencraft launch                  # Full pipeline
+npx screencraft launch --screenshots-only  # Free tier (no video)
+npx screencraft activate MF-XXXX-XXXX  # Store license key
+npx screencraft status                  # Check credits
+npx screencraft init                    # Generate config file
+```
+
+---
+
+## Testing
+
+```bash
+# Test brand detection on your app project
+node test/test_brand.js /path/to/your/app
+
+# Test PSD compositor (add a screenshot first)
+cp /path/to/screenshot.png test/sample_screenshot.png
+node test/test_psd.js
+```
+
+---
+
+## Environment
+
+```bash
+ANTHROPIC_API_KEY=sk-ant-...     # For AI headline suggestions
+SCREENCRAFT_API=https://...      # Override API endpoint
+NODE_ENV=development             # Dev mode (accepts MF-* test keys)
+SCREENCRAFT_DEV=1                # Also enables dev mode
+```
+
+---
+
+## Template Files (for motion designer)
+
+Place these in `templates/`:
+
+| File | Description |
+|------|-------------|
+| `templates/device_frame.png` | Transparent phone mockup overlay, 1130×1900px |
+| `templates/screen_mask.png`  | White shape of screen area (for clipping) |
+| `templates/app-launch.aep`   | After Effects template with swap layer naming |
+
+See `TEMPLATE_SPEC.md` for the full AE build specification.
+
+---
+
+screencraft.dev

package/bin/screencraft.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+/**
+ * bin/screencraft.js
+ * CLI entry point. Routes commands.
+ *
+ * Usage:
+ *   npx screencraft launch          — full launch kit pipeline
+ *   npx screencraft launch --screenshots-only  — free tier, no video
+ *   npx screencraft activate <key>  — store license key
+ *   npx screencraft status          — show credits remaining
+ *   npx screencraft serve           — open web UI at localhost:3141
+ *   npx screencraft init            — generate screencraft.config.js
+ *   npx screencraft --mcp           — start MCP server (stdio)
+ */
+
+const path = require('path');
+
+const [,, command, ...args] = process.argv;
+
+// ── MCP mode — must run before banner (stdout is protocol) ───────
+if (command === '--mcp' || process.argv.includes('--mcp')) {
+  require('../src/mcp').startMCP();
+} else {
+  // Normal CLI mode
+  const chalk = require('chalk');
+
+  // ── Banner ──────────────────────────────────────────────────────
+  console.log('');
+  console.log(chalk.hex('#A78BFA')('◆ ScreenCraft') + chalk.dim(' v0.1.0'));
+  console.log(chalk.dim('─────────────────────────────────────'));
+  console.log('');
+
+  // ── Route ───────────────────────────────────────────────────────
+  switch (command) {
+    case 'launch':
+      require('../src/commands/launch')(args);
+      break;
+    case 'activate':
+      require('../src/auth/keystore').activate(args[0]);
+      break;
+    case 'status':
+      require('../src/auth/keystore').status();
+      break;
+    case 'serve':
+      require('../src/server').startServer();
+      break;
+    case 'init':
+      require('../src/commands/init')();
+      break;
+    default:
+      console.log(chalk.dim('Commands:'));
+      console.log('  ' + chalk.white('launch') + chalk.dim('              — generate launch kit'));
+      console.log('  ' + chalk.white('launch --screenshots-only') + chalk.dim(' — free tier'));
+      console.log('  ' + chalk.white('activate <key>') + chalk.dim('      — activate license'));
+      console.log('  ' + chalk.white('status') + chalk.dim('              — check credits'));
+      console.log('  ' + chalk.white('serve') + chalk.dim('               — open web UI'));
+      console.log('  ' + chalk.white('init') + chalk.dim('                — create config file'));
+      console.log('  ' + chalk.white('--mcp') + chalk.dim('               — start MCP server'));
+      console.log('');
+  }
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "screencraft",
+  "version": "0.1.0",
+  "description": "App launch kit generator — screenshots, PSDs, and preview video from one CLI command",
+  "main": "src/commands/launch.js",
+  "bin": {
+    "screencraft": "./bin/screencraft.js"
+  },
+  "scripts": {
+    "test:brand": "node test/test_brand.js",
+    "test:psd": "node test/test_psd.js",
+    "test:pipeline": "node test/test_pipeline.js",
+    "launch": "node bin/screencraft.js launch"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.27.1",
+    "ag-psd": "^30.1.0",
+    "archiver": "^6.0.1",
+    "canvas": "^3.2.1",
+    "chalk": "^4.1.2",
+    "dotenv": "^16.0.3",
+    "express": "^5.2.1",
+    "inquirer": "^8.2.6",
+    "node-fetch": "^2.6.9",
+    "ora": "^5.4.1",
+    "sharp": "^0.33.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/src/auth/keystore.js

@@ -0,0 +1,148 @@
+/**
+ * src/auth/keystore.js
+ * --------------------
+ * Manages license key storage in ~/.screencraft/config.json
+ * and validates keys against the ScreenCraft API (screencraft.dev).
+ */
+
+const fs      = require('fs');
+const path    = require('path');
+const os      = require('os');
+const chalk   = require('chalk');
+
+const CONFIG_DIR  = path.join(os.homedir(), '.screencraft');
+const CONFIG_FILE = path.join(CONFIG_DIR, 'config.json');
+const API_BASE    = process.env.SCREENCRAFT_API || 'https://screencraft.dev/api';
+
+// ── Read / Write ──────────────────────────────────────────────────
+
+function readConfig() {
+  try {
+    return JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
+  } catch {
+    return {};
+  }
+}
+
+function writeConfig(data) {
+  fs.mkdirSync(CONFIG_DIR, { recursive: true });
+  fs.writeFileSync(CONFIG_FILE, JSON.stringify(data, null, 2));
+}
+
+function getStoredKey() {
+  return readConfig().licenseKey || null;
+}
+
+// ── Activate ──────────────────────────────────────────────────────
+
+async function activate(key) {
+  if (!key) {
+    console.log(chalk.hex('#C9A84C')('  Usage: screencraft activate <license-key>'));
+    console.log(chalk.dim('  Get a key at screencraft.dev'));
+    return;
+  }
+
+  console.log(chalk.dim('  Validating key...'));
+  const result = await validateKey(key);
+
+  if (result) {
+    const config = readConfig();
+    config.licenseKey = key;
+    config.tier       = result.tier;
+    config.activatedAt = new Date().toISOString();
+    writeConfig(config);
+
+    console.log(chalk.hex('#6BC46A')(`  ✓ Activated — ${result.tier} tier`));
+    console.log(chalk.dim(`  ${result.generationsRemaining} generation${result.generationsRemaining !== 1 ? 's' : ''} remaining`));
+    console.log(chalk.dim('  Key saved to ~/.screencraft/config.json'));
+  } else {
+    console.log(chalk.hex('#C9A84C')('  ✗ Invalid or expired key'));
+    console.log(chalk.dim('  Visit screencraft.dev to get a valid key'));
+  }
+}
+
+// ── Status ────────────────────────────────────────────────────────
+
+async function status() {
+  const config = readConfig();
+
+  if (!config.licenseKey) {
+    console.log(chalk.dim('  No license key found.'));
+    console.log(chalk.dim('  Run: screencraft activate <key>'));
+    return;
+  }
+
+  console.log(chalk.dim('  Key:        ') + chalk.white(maskKey(config.licenseKey)));
+  console.log(chalk.dim('  Tier:       ') + chalk.white(config.tier || 'unknown'));
+  console.log(chalk.dim('  Activated:  ') + chalk.white(config.activatedAt?.split('T')[0] || 'unknown'));
+
+  // Check remaining generations
+  const result = await validateKey(config.licenseKey);
+  if (result) {
+    console.log(chalk.dim('  Remaining:  ') + chalk.white(`${result.generationsRemaining} generation${result.generationsRemaining !== 1 ? 's' : ''}`));
+  } else {
+    console.log(chalk.dim('  Status:     ') + chalk.hex('#C9A84C')('expired or all generations used'));
+  }
+}
+
+// ── Validate key against API ──────────────────────────────────────
+
+/**
+ * Returns { tier, generationsRemaining } or null if invalid.
+ */
+async function validateKey(key) {
+  if (!key) return null;
+
+  // Dev mode: accept SC- prefixed keys for testing
+  const isDev = process.env.NODE_ENV === 'development' || process.env.SCREENCRAFT_DEV;
+  if (isDev && key.startsWith('SC-')) {
+    const tier = key.includes('PRO') ? 'pro' : 'launch';
+    return { tier, generationsRemaining: tier === 'pro' ? 10 : 1 };
+  }
+
+  try {
+    const res = await fetch(`${API_BASE}/keys/validate`, {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ key }),
+      signal:  AbortSignal.timeout(5000),
+    });
+    if (!res.ok) return null;
+    const data = await res.json();
+    return data.valid ? { tier: data.tier, generationsRemaining: data.generationsRemaining } : null;
+  } catch {
+    if (isDev) {
+      console.log(chalk.dim('  (dev mode: API unreachable, key accepted)'));
+      return { tier: 'launch', generationsRemaining: 1 };
+    }
+    return null;
+  }
+}
+
+/**
+ * Consume one generation after a successful render.
+ */
+async function useGeneration(key) {
+  if (!key) return false;
+  try {
+    const res = await fetch(`${API_BASE}/keys/use`, {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ key }),
+      signal:  AbortSignal.timeout(5000),
+    });
+    const data = await res.json();
+    return data.ok;
+  } catch {
+    return false;
+  }
+}
+
+// ── Helpers ───────────────────────────────────────────────────────
+
+function maskKey(key) {
+  if (!key || key.length < 8) return '****';
+  return key.slice(0, 6) + '****' + key.slice(-4);
+}
+
+module.exports = { activate, status, getStoredKey, validateKey, useGeneration };