npm - cc-starter - Versions diffs - 1.0.6 → 1.1.0 - Mend

cc-starter 1.0.6 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +11 -0
package/lib/constants.js +112 -2
package/lib/scaffold.js +105 -1
package/lib/wizard.js +57 -3
package/package.json +1 -1
package/cc-starter /342/200/224 LinkedIn Carousel Slides.pdf +0 -0
package/docs/index.html +0 -969
package/docs/linkedin-carousel.html +0 -1078

package/docs/linkedin-carousel.html DELETED Viewed

@@ -1,1078 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>cc-starter — LinkedIn Carousel Slides</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-  <style>
-    /* ═══════════════════════════════════════════════════════════
-       VARIABLES & BASE
-       ═══════════════════════════════════════════════════════════ */
-    :root {
-      --bg: #0a0a0f;
-      --bg-card: rgba(255,255,255,0.03);
-      --cyan: #00d4ff;
-      --cyan-dim: rgba(0,212,255,0.15);
-      --purple: #a855f7;
-      --purple-dim: rgba(168,85,247,0.15);
-      --text: #e0e0e8;
-      --text-dim: #8b8b9e;
-      --text-bright: #ffffff;
-      --red: #ff4444;
-      --red-dim: rgba(255,68,68,0.12);
-      --green: #22c55e;
-      --border: rgba(255,255,255,0.08);
-      --font-display: 'Outfit', sans-serif;
-      --font-mono: 'IBM Plex Mono', monospace;
-    }
-    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: var(--font-display);
-      background: #000;
-      color: var(--text);
-      line-height: 1.6;
-      -webkit-font-smoothing: antialiased;
-      padding: 40px;
-    }
-    /* ═══════════════════════════════════════════════════════════
-       PAGE HEADER (hidden in print)
-       ═══════════════════════════════════════════════════════════ */
-    .page-header {
-      max-width: 1080px;
-      margin: 0 auto 40px;
-      padding: 24px 32px;
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      font-size: 0.95rem;
-      color: var(--text-dim);
-      line-height: 1.7;
-    }
-    .page-header strong { color: var(--text-bright); }
-    .page-header code {
-      font-family: var(--font-mono);
-      background: rgba(0,212,255,0.08);
-      padding: 2px 8px;
-      border-radius: 4px;
-      color: var(--cyan);
-      font-size: 0.85rem;
-    }
-    .slides-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 32px;
-    }
-    /* ═══════════════════════════════════════════════════════════
-       SLIDE BASE
-       ═══════════════════════════════════════════════════════════ */
-    .slide {
-      width: 1080px;
-      height: 1080px;
-      background: var(--bg);
-      padding: 80px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      position: relative;
-      overflow: hidden;
-      border-radius: 4px;
-      flex-shrink: 0;
-      page-break-after: always;
-      break-after: page;
-    }
-    /* ═══════════════════════════════════════════════════════════
-       FLOATING ORBS
-       ═══════════════════════════════════════════════════════════ */
-    .orb {
-      position: absolute;
-      border-radius: 50%;
-      pointer-events: none;
-      filter: blur(80px);
-      opacity: 0.15;
-      z-index: 0;
-    }
-    .orb-cyan { background: var(--cyan); }
-    .orb-purple { background: var(--purple); }
-    /* ═══════════════════════════════════════════════════════════
-       BRANDING FOOTER
-       ═══════════════════════════════════════════════════════════ */
-    .slide-brand {
-      position: absolute;
-      bottom: 32px;
-      right: 40px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      font-family: var(--font-mono);
-      font-size: 14px;
-      color: var(--text-dim);
-      z-index: 10;
-    }
-    .slide-brand .brand-name {
-      font-weight: 600;
-      color: var(--text);
-      letter-spacing: -0.02em;
-    }
-    .slide-brand .brand-name span { color: var(--cyan); }
-    .slide-brand .slide-num {
-      padding: 3px 10px;
-      border-radius: 6px;
-      background: rgba(255,255,255,0.05);
-      border: 1px solid var(--border);
-      font-size: 12px;
-      color: var(--text-dim);
-    }
-    /* ═══════════════════════════════════════════════════════════
-       SHARED TYPOGRAPHY
-       ═══════════════════════════════════════════════════════════ */
-    .slide-content { position: relative; z-index: 1; }
-    .gradient-text {
-      background: linear-gradient(135deg, var(--cyan), var(--purple));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-    .slide-title {
-      font-size: 52px;
-      font-weight: 800;
-      line-height: 1.15;
-      color: var(--text-bright);
-      margin-bottom: 40px;
-      letter-spacing: -0.02em;
-    }
-    .section-label {
-      font-family: var(--font-mono);
-      font-size: 14px;
-      font-weight: 600;
-      letter-spacing: 0.15em;
-      text-transform: uppercase;
-      color: var(--cyan);
-      margin-bottom: 16px;
-    }
-    /* ═══════════════════════════════════════════════════════════
-       STATEMENT SLIDES
-       ═══════════════════════════════════════════════════════════ */
-    .slide.statement {
-      text-align: center;
-      align-items: center;
-    }
-    .slide.statement .slide-content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    .big-text {
-      font-family: var(--font-display);
-      font-weight: 800;
-      font-size: 72px;
-      line-height: 1.2;
-      color: var(--text-bright);
-      letter-spacing: -0.02em;
-    }
-    .sub-text {
-      font-size: 36px;
-      color: var(--text-dim);
-      margin-top: 20px;
-      line-height: 1.4;
-    }
-    .accent-text {
-      background: linear-gradient(135deg, var(--cyan), var(--purple));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-    .small-text {
-      font-size: 28px;
-      color: var(--text-dim);
-      margin-top: 12px;
-      line-height: 1.4;
-    }
-    .bottom-text {
-      font-size: 22px;
-      color: var(--cyan);
-      margin-top: 48px;
-      line-height: 1.5;
-      max-width: 800px;
-    }
-    /* ═══════════════════════════════════════════════════════════
-       GLOW BOXES — ALWAYS GLOWING (static, visible in screenshots)
-       ═══════════════════════════════════════════════════════════ */
-    .glow-box {
-      background: rgba(255,255,255,0.03);
-      border: 1px solid rgba(0,212,255,0.25);
-      border-radius: 20px;
-      padding: 32px;
-      box-shadow:
-        0 0 20px rgba(0,212,255,0.12),
-        0 0 40px rgba(168,85,247,0.08),
-        inset 0 1px 0 rgba(255,255,255,0.05);
-    }
-    .glow-box.glow-strong {
-      border-color: rgba(0,212,255,0.4);
-      box-shadow:
-        0 0 30px rgba(0,212,255,0.2),
-        0 0 60px rgba(168,85,247,0.15),
-        inset 0 1px 0 rgba(255,255,255,0.08);
-    }
-    .glow-box.glow-purple {
-      border-color: rgba(168,85,247,0.35);
-      box-shadow:
-        0 0 30px rgba(168,85,247,0.15),
-        0 0 60px rgba(0,212,255,0.1),
-        inset 0 1px 0 rgba(255,255,255,0.06);
-    }
-    /* ═══════════════════════════════════════════════════════════
-       CARDS (non-glow fallback)
-       ═══════════════════════════════════════════════════════════ */
-    .card-title {
-      font-size: 28px;
-      font-weight: 700;
-      color: var(--text-bright);
-      margin-bottom: 16px;
-    }
-    .card-desc {
-      font-size: 18px;
-      color: var(--text-dim);
-      line-height: 1.7;
-    }
-    /* ═══════════════════════════════════════════════════════════
-       CODE BOXES
-       ═══════════════════════════════════════════════════════════ */
-    .cmd-box {
-      display: inline-flex;
-      align-items: center;
-      gap: 14px;
-      padding: 20px 32px;
-      border-radius: 14px;
-      font-family: var(--font-mono);
-      font-size: 28px;
-      font-weight: 600;
-      background: rgba(0,212,255,0.06);
-      border: 1px solid rgba(0,212,255,0.2);
-      color: var(--cyan);
-    }
-    .cmd-box .prompt { color: var(--purple); }
-    .mini-term {
-      font-family: var(--font-mono);
-      font-size: 18px;
-      padding: 20px 24px;
-      background: rgba(0,0,0,0.5);
-      border-radius: 12px;
-      border: 1px solid var(--border);
-      color: var(--cyan);
-      white-space: pre-wrap;
-      line-height: 1.7;
-      margin-top: 16px;
-    }
-    .terminal {
-      background: rgba(0,0,0,0.5);
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      padding: 24px 28px;
-      font-family: var(--font-mono);
-      font-size: 16px;
-      line-height: 1.8;
-      color: var(--text);
-    }
-    .terminal .line-dim { color: var(--text-dim); }
-    .terminal .line-cyan { color: var(--cyan); }
-    .terminal .line-green { color: var(--green); }
-    .terminal .line-purple { color: var(--purple); }
-    /* ═══════════════════════════════════════════════════════════
-       LIST ITEMS
-       ═══════════════════════════════════════════════════════════ */
-    .point-list {
-      list-style: none;
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-    .point-list li {
-      display: flex;
-      align-items: flex-start;
-      gap: 20px;
-      font-size: 24px;
-      line-height: 1.5;
-      color: var(--text);
-    }
-    .point-icon {
-      flex-shrink: 0;
-      width: 40px;
-      height: 40px;
-      border-radius: 10px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 20px;
-      font-weight: 700;
-      margin-top: 2px;
-    }
-    .point-icon.red {
-      background: var(--red-dim);
-      color: rgba(255,68,68,0.6);
-    }
-    .point-icon.cyan {
-      background: var(--cyan-dim);
-      color: var(--cyan);
-    }
-    /* ═══════════════════════════════════════════════════════════
-       STEP CIRCLES
-       ═══════════════════════════════════════════════════════════ */
-    .step {
-      display: flex;
-      align-items: center;
-      gap: 24px;
-    }
-    .step-number {
-      flex-shrink: 0;
-      width: 56px;
-      height: 56px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 24px;
-      font-weight: 800;
-      background: linear-gradient(135deg, var(--cyan), var(--purple));
-      color: #0a0a0f;
-    }
-    .step-text {
-      font-size: 24px;
-      color: var(--text);
-    }
-    /* ═══════════════════════════════════════════════════════════
-       TIER BOXES
-       ═══════════════════════════════════════════════════════════ */
-    .tier {
-      border-radius: 16px;
-      padding: 28px 32px;
-    }
-    .tier-name {
-      font-size: 22px;
-      font-weight: 700;
-      color: var(--text-bright);
-      margin-bottom: 6px;
-    }
-    .tier-plugins {
-      font-family: var(--font-mono);
-      font-size: 14px;
-      color: var(--cyan);
-      margin-bottom: 8px;
-    }
-    .tier-desc {
-      font-size: 16px;
-      color: var(--text-dim);
-    }
-    /* Tier glow levels */
-    .tier.glow-1 {
-      background: rgba(255,255,255,0.03);
-      border: 1px solid rgba(0,212,255,0.15);
-      box-shadow: 0 0 20px rgba(0,212,255,0.06);
-    }
-    .tier.glow-2 {
-      background: rgba(255,255,255,0.03);
-      border: 1px solid rgba(0,212,255,0.25);
-      box-shadow: 0 0 30px rgba(0,212,255,0.1), 0 0 15px rgba(168,85,247,0.05);
-    }
-    .tier.glow-3 {
-      background: rgba(255,255,255,0.03);
-      border: 1px solid rgba(168,85,247,0.35);
-      box-shadow: 0 0 40px rgba(168,85,247,0.12), 0 0 25px rgba(0,212,255,0.08);
-    }
-    /* ═══════════════════════════════════════════════════════════
-       PLUGIN MINI GLOW BOXES
-       ═══════════════════════════════════════════════════════════ */
-    .plugin-mini {
-      background: rgba(255,255,255,0.02);
-      border: 1px solid rgba(0,212,255,0.15);
-      border-radius: 14px;
-      padding: 18px 24px;
-      box-shadow: 0 0 15px rgba(0,212,255,0.06), 0 0 30px rgba(168,85,247,0.04);
-    }
-    .plugin-name {
-      font-family: var(--font-mono);
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--cyan);
-      margin-bottom: 4px;
-    }
-    .plugin-desc {
-      font-size: 16px;
-      color: var(--text-dim);
-      line-height: 1.5;
-    }
-    /* ═══════════════════════════════════════════════════════════
-       HIGHLIGHT BOX
-       ═══════════════════════════════════════════════════════════ */
-    .highlight-box {
-      padding: 20px 28px;
-      border-radius: 12px;
-      background: linear-gradient(135deg, rgba(0,212,255,0.08), rgba(168,85,247,0.08));
-      border: 1px solid rgba(0,212,255,0.15);
-      text-align: center;
-      font-size: 26px;
-      font-weight: 700;
-      color: var(--text-bright);
-    }
-    /* ═══════════════════════════════════════════════════════════
-       CTA LINKS
-       ═══════════════════════════════════════════════════════════ */
-    .cta-links {
-      display: flex;
-      flex-direction: column;
-      gap: 14px;
-    }
-    .cta-link {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      font-size: 20px;
-      color: var(--text-dim);
-    }
-    .cta-link .label {
-      font-weight: 600;
-      color: var(--text);
-      min-width: 80px;
-    }
-    .cta-link .url {
-      font-family: var(--font-mono);
-      font-size: 17px;
-      color: var(--cyan);
-    }
-    /* ═══════════════════════════════════════════════════════════
-       PRINT STYLES
-       ═══════════════════════════════════════════════════════════ */
-    @media print {
-      body {
-        margin: 0;
-        padding: 0;
-        background: #000;
-      }
-      .page-header { display: none; }
-      .slides-container { gap: 0; }
-      .slide {
-        page-break-after: always;
-        break-after: page;
-        margin: 0;
-        box-shadow: none;
-        border-radius: 0;
-      }
-      .slide:last-child {
-        page-break-after: avoid;
-        break-after: avoid;
-      }
-    }
-    @page {
-      size: 1080px 1080px;
-      margin: 0;
-    }
-  </style>
-</head>
-<body>
-  <!-- Page Header (hidden in print) -->
-  <div class="page-header">
-    <strong>LinkedIn Carousel Slides</strong> — 15 Slides, je 1080x1080px.<br>
-    <code>Ctrl+P</code> &rarr; Als PDF speichern (Papierformat auf 1080x1080px setzen) oder jeden Slide einzeln screenshotten.
-  </div>
-  <div class="slides-container">
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 1: COVER
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide" data-slide-number="1">
-      <div class="orb orb-cyan" style="width:500px;height:500px;top:-180px;left:-180px;"></div>
-      <div class="orb orb-purple" style="width:450px;height:450px;bottom:-150px;right:-150px;"></div>
-      <div class="orb orb-cyan" style="width:300px;height:300px;top:55%;left:65%;opacity:0.07;"></div>
-      <div class="slide-content" style="text-align:center;display:flex;flex-direction:column;align-items:center;">
-        <svg width="120" height="120" viewBox="0 0 16 16" style="margin-bottom:40px;" aria-label="Claude Logo">
-          <defs><linearGradient id="claude-gradient" x1="0" y1="0" x2="16" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#00d4ff"/><stop offset="1" stop-color="#a855f7"/></linearGradient></defs>
-          <path fill="url(#claude-gradient)" d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/>
-        </svg>
-        <div style="font-size:88px;font-weight:900;line-height:1.05;letter-spacing:-0.03em;margin-bottom:8px;">
-          <span class="gradient-text">Claude Code.</span>
-        </div>
-        <div style="font-size:72px;font-weight:800;color:var(--text-bright);margin-bottom:48px;letter-spacing:-0.02em;">
-          Supercharged.
-        </div>
-        <div class="cmd-box" style="margin-bottom:48px;font-size:30px;">
-          <span class="prompt">$</span> npx cc-starter
-        </div>
-        <p style="font-size:16px;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:0.05em;">
-          Open Source &middot; MIT &middot; Kostenlos
-        </p>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">01/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 2: STATEMENT — Power vs Setup
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide statement" data-slide-number="2">
-      <div class="orb orb-cyan" style="width:500px;height:500px;top:-200px;left:-150px;"></div>
-      <div class="orb orb-purple" style="width:400px;height:400px;bottom:-150px;right:-120px;"></div>
-      <div class="slide-content">
-        <div class="big-text" style="margin-bottom:24px;">Claude Code ist <span class="accent-text">m&auml;chtig.</span></div>
-        <div class="big-text" style="font-size:56px;color:var(--text-dim);">Das Setup sollte es nicht sein.</div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">02/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 3: STATEMENT — The Problem
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide statement" data-slide-number="3">
-      <div class="orb orb-purple" style="width:400px;height:400px;top:-120px;right:-100px;"></div>
-      <div class="orb orb-cyan" style="width:300px;height:300px;bottom:-100px;left:-80px;opacity:0.08;"></div>
-      <div class="slide-content">
-        <div class="big-text" style="margin-bottom:16px;">Jede neue Session.</div>
-        <div class="big-text" style="margin-bottom:16px;">Dasselbe Setup.</div>
-        <div class="big-text accent-text">Immer wieder.</div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">03/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 3: PROBLEM DETAILS
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide" data-slide-number="3">
-      <div class="orb orb-purple" style="width:400px;height:400px;top:-120px;right:-100px;"></div>
-      <div class="orb orb-cyan" style="width:350px;height:350px;bottom:-100px;left:-80px;opacity:0.08;"></div>
-      <div class="slide-content">
-        <div class="section-label">Das Problem</div>
-        <div class="slide-title">Kennt ihr das auch?</div>
-        <ul class="point-list">
-          <li>
-            <div class="point-icon red">&#10007;</div>
-            <span>Jede Session startet von Null</span>
-          </li>
-          <li>
-            <div class="point-icon red">&#10007;</div>
-            <span>Claude liest ganze 500-Zeilen-Dateien</span>
-          </li>
-          <li>
-            <div class="point-icon red">&#10007;</div>
-            <span>Kein Ged&auml;chtnis zwischen Sessions</span>
-          </li>
-          <li>
-            <div class="point-icon red">&#10007;</div>
-            <span>Manuelles Plugin-Setup</span>
-          </li>
-          <li>
-            <div class="point-icon red">&#10007;</div>
-            <span>Keine Ahnung was dein Projekt kostet</span>
-          </li>
-        </ul>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">04/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 4: SOLUTION DETAILS
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide" data-slide-number="4">
-      <div class="orb orb-cyan" style="width:450px;height:450px;top:-150px;left:-120px;"></div>
-      <div class="orb orb-purple" style="width:350px;height:350px;bottom:-120px;right:-80px;opacity:0.09;"></div>
-      <div class="slide-content">
-        <div class="section-label">Die L&ouml;sung</div>
-        <div class="slide-title">Damit ist jetzt Schluss.</div>
-        <ul class="point-list">
-          <li>
-            <div class="point-icon cyan">&#10003;</div>
-            <span>Regeln, Ged&auml;chtnis und Kontext — sofort bereit</span>
-          </li>
-          <li>
-            <div class="point-icon cyan">&#10003;</div>
-            <span>Nur Types und Signaturen — 90% weniger Tokens</span>
-          </li>
-          <li>
-            <div class="point-icon cyan">&#10003;</div>
-            <span>Persistentes Ged&auml;chtnis &uuml;ber alle Sessions</span>
-          </li>
-          <li>
-            <div class="point-icon cyan">&#10003;</div>
-            <span>Plugin-Presets mit einem Klick</span>
-          </li>
-          <li>
-            <div class="point-icon cyan">&#10003;</div>
-            <span>COCOMO-Sch&auml;tzung sagt es dir sofort</span>
-          </li>
-        </ul>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">05/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 5: STATEMENT — The Solution
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide statement" data-slide-number="5">
-      <div class="orb orb-cyan" style="width:450px;height:450px;top:-150px;left:-120px;"></div>
-      <div class="orb orb-purple" style="width:350px;height:350px;bottom:-120px;right:-80px;opacity:0.09;"></div>
-      <div class="slide-content">
-        <div class="big-text accent-text" style="margin-bottom:16px;">Ein Befehl.</div>
-        <div class="big-text" style="margin-bottom:16px;">Alles eingerichtet.</div>
-        <div class="big-text">In 30 Sekunden.</div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">06/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 6: STATEMENT — Features Intro
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide statement" data-slide-number="6">
-      <div class="orb orb-cyan" style="width:400px;height:400px;top:-130px;left:-100px;"></div>
-      <div class="orb orb-purple" style="width:380px;height:380px;bottom:-130px;right:-100px;"></div>
-      <div class="slide-content">
-        <div class="big-text" style="margin-bottom:16px;">Was du bekommst.</div>
-        <div class="small-text">Alles was du brauchst.</div>
-        <div class="small-text">Nichts, was du nicht brauchst.</div>
-        <div class="bottom-text">Sechs Tools, die jede Claude Code Session schneller, g&uuml;nstiger und smarter machen.</div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">07/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 7: TOKEN-SAVING SCRIPTS
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide" data-slide-number="7">
-      <div class="orb orb-cyan" style="width:400px;height:400px;top:-100px;right:-100px;opacity:0.1;"></div>
-      <div class="orb orb-purple" style="width:300px;height:300px;bottom:-80px;left:-60px;opacity:0.08;"></div>
-      <div class="slide-content" style="display:flex;flex-direction:column;gap:28px;">
-        <div class="glow-box">
-          <div style="font-size:44px;margin-bottom:12px;">&#9889;</div>
-          <div class="card-title" style="font-size:34px;">Token-sparende Scripts</div>
-          <p class="card-desc" style="margin-bottom:24px;">
-            Statt ganze Dateien zu lesen, extrahiert <code style="font-family:var(--font-mono);color:var(--cyan);background:rgba(0,212,255,0.08);padding:2px 8px;border-radius:4px;">vibe-code.js</code> nur Types, Funktions-Signaturen und Imports. Claude bekommt genau den Kontext den es braucht &mdash; ohne tausende Zeilen Code durchzulesen.
-          </p>
-          <div class="mini-term" style="margin-bottom:24px;font-size:17px;">
-<span style="color:var(--text-dim);">$</span> <span style="color:var(--cyan);">vibe-code.js types api.ts</span>
-<span style="color:var(--green);">&#10003; 200 tokens</span> <span style="color:var(--text-dim);">(saved 1,800)</span>
-<span style="color:var(--text-dim);">$</span> <span style="color:var(--cyan);">vibe-code.js functions utils.ts</span>
-<span style="color:var(--green);">&#10003; 55 tokens</span> <span style="color:var(--text-dim);">(saved 930)</span></div>
-          <div class="highlight-box">
-            <span class="gradient-text">~90% weniger Token-Verbrauch</span>
-          </div>
-        </div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">08/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 8: COCOMO + REPORT
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide" data-slide-number="8">
-      <div class="orb orb-purple" style="width:420px;height:420px;top:-140px;left:-100px;"></div>
-      <div class="orb orb-cyan" style="width:300px;height:300px;bottom:-80px;right:-60px;opacity:0.08;"></div>
-      <div class="slide-content" style="display:flex;flex-direction:column;gap:28px;">
-        <!-- COCOMO Card -->
-        <div class="glow-box">
-          <div class="card-title">&#128176; COCOMO-Sch&auml;tzung</div>
-          <p class="card-desc" style="margin-bottom:16px;">
-            COCOMO-II ist ein anerkanntes Modell zur Software-Kostensch&auml;tzung. Es z&auml;hlt deine Lines of Code und berechnet daraus Aufwand, Zeitplan und Kosten &mdash; direkt im Terminal.
-          </p>
-          <div class="mini-term" style="font-size:18px;">
-<span style="color:var(--text-dim);">Lines of Code:</span>  <span style="color:var(--text-bright);font-weight:600;">36,660</span>
-<span style="color:var(--text-dim);">Aufwand:</span>         <span style="color:var(--text-bright);font-weight:600;">9.8 Personenmonate</span>
-<span style="color:var(--text-dim);">Kosten:</span>          <span style="color:var(--cyan);font-weight:600;">&euro;47,040</span> <span style="color:var(--text-dim);">(bei &euro;80/h)</span></div>
-        </div>
-        <!-- HTML Report Card -->
-        <div class="glow-box">
-          <div class="card-title">&#128202; HTML Projekt-Report</div>
-          <p class="card-desc" style="margin-bottom:8px;">
-            LOC nach Sprache, Ordnergr&ouml;&szlig;en, Git-Stats
-          </p>
-          <p class="card-desc">
-            Minimal <span style="color:var(--text);font-weight:500;">(zero deps)</span> oder Fancy <span style="color:var(--text);font-weight:500;">(mit Chart.js)</span>
-          </p>
-        </div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">09/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 9: STATEMENT — Plugins Intro
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide statement" data-slide-number="9">
-      <div class="orb orb-purple" style="width:400px;height:400px;top:-100px;right:-80px;"></div>
-      <div class="orb orb-cyan" style="width:350px;height:350px;bottom:-100px;left:-80px;opacity:0.1;"></div>
-      <div class="slide-content">
-        <div class="big-text" style="margin-bottom:16px;">Die besten Plugins.</div>
-        <div class="big-text" style="margin-bottom:32px;">Ein Klick.</div>
-        <div class="small-text">Meine Lieblings-Plugins f&uuml;r jedes Projekt.</div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">10/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 10: PLUGIN PRESETS
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide" data-slide-number="10">
-      <div class="orb orb-cyan" style="width:380px;height:380px;top:-100px;right:-80px;opacity:0.09;"></div>
-      <div class="orb orb-purple" style="width:350px;height:350px;bottom:-100px;left:-80px;"></div>
-      <div class="slide-content" style="display:flex;flex-direction:column;gap:24px;">
-        <div class="section-label">Plugins</div>
-        <div class="slide-title" style="margin-bottom:16px;">Plugin-Auswahl</div>
-        <div class="tier glow-1">
-          <div class="tier-name">Minimal</div>
-          <div class="tier-plugins">superpowers</div>
-          <div class="tier-desc">TDD, Debugging, Plans, Brainstorming</div>
-        </div>
-        <div class="tier glow-2">
-          <div class="tier-name">Standard</div>
-          <div class="tier-plugins">+ feature-dev, pr-review-toolkit</div>
-          <div class="tier-desc">Code Explorer, PR Reviews</div>
-        </div>
-        <div class="tier glow-3">
-          <div class="tier-name">Full</div>
-          <div class="tier-plugins">+ frontend-design, ui-ux-pro-max, claude-seo</div>
-          <div class="tier-desc">UI/UX Design + SEO Intelligence</div>
-        </div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">11/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 11: PLUGIN DETAILS
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide" data-slide-number="11">
-      <div class="orb orb-purple" style="width:400px;height:400px;top:-120px;left:-100px;opacity:0.08;"></div>
-      <div class="orb orb-cyan" style="width:300px;height:300px;bottom:-80px;right:-60px;opacity:0.07;"></div>
-      <div class="slide-content" style="display:flex;flex-direction:column;gap:16px;">
-        <div class="section-label">Plugin-Details</div>
-        <div class="slide-title" style="margin-bottom:12px;font-size:44px;">Was die Plugins k&ouml;nnen</div>
-        <div class="plugin-mini">
-          <div class="plugin-name">superpowers</div>
-          <div class="plugin-desc">TDD, Debugging, Brainstorming, Plans, Code Review</div>
-        </div>
-        <div class="plugin-mini">
-          <div class="plugin-name">feature-dev</div>
-          <div class="plugin-desc">Code Explorer, Architektur-Designer, Quality Reviewer</div>
-        </div>
-        <div class="plugin-mini">
-          <div class="plugin-name">pr-review-toolkit</div>
-          <div class="plugin-desc">Test-Analyzer, Silent-Failure-Hunter</div>
-        </div>
-        <div class="plugin-mini">
-          <div class="plugin-name">frontend-design</div>
-          <div class="plugin-desc">Production-grade UI/UX</div>
-        </div>
-        <div class="plugin-mini">
-          <div class="plugin-name">ui-ux-pro-max</div>
-          <div class="plugin-desc">67 UI-Styles, 161 Farbpaletten, 57 Font-Pairings</div>
-        </div>
-        <div class="plugin-mini">
-          <div class="plugin-name">claude-seo</div>
-          <div class="plugin-desc">SEO-Audits, E-E-A-T, Schema-Markup, Core Web Vitals, KI-Suchoptimierung</div>
-        </div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">12/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 12: MEMORY + RULES
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide" data-slide-number="12">
-      <div class="orb orb-cyan" style="width:400px;height:400px;top:-120px;right:-100px;"></div>
-      <div class="orb orb-purple" style="width:300px;height:300px;bottom:-80px;left:-60px;opacity:0.08;"></div>
-      <div class="slide-content" style="display:flex;flex-direction:column;gap:28px;">
-        <div class="section-label">Kontext &amp; Regeln</div>
-        <!-- Memory Card -->
-        <div class="glow-box">
-          <div class="card-title">&#129504; Ged&auml;chtnis-System</div>
-          <p class="card-desc" style="margin-bottom:12px;">
-            Claude merkt sich alles
-          </p>
-          <p class="card-desc" style="margin-bottom:16px;">
-            Entscheidungen, Feedback, Projektkontext
-          </p>
-          <div class="mini-term" style="font-size:15px;margin-top:12px;">
-<span style="color:var(--text-dim);">.claude/memory/</span><span style="color:var(--cyan);">MEMORY.md</span></div>
-        </div>
-        <!-- Rules Card -->
-        <div class="glow-box">
-          <div class="card-title">&#128203; Bew&auml;hrte Regeln</div>
-          <p class="card-desc" style="margin-bottom:16px;">
-            Vier Regelwerke aus einem echten Produktionsprojekt &mdash; damit Claude strukturiert arbeitet statt wild drauflos zu coden. Task-Tracking bei komplexen Aufgaben, automatisches Stoppen und Neu-Planen wenn ein Ansatz nicht funktioniert, und Pflicht-Check gegen den Main-Branch bevor etwas als &bdquo;fertig&ldquo; gilt.
-          </p>
-          <p style="font-size:15px;color:var(--text-dim);font-family:var(--font-mono);">
-            Verf&uuml;gbar in Deutsch und Englisch
-          </p>
-        </div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">13/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 13: STATEMENT — CTA Intro
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide statement" data-slide-number="13">
-      <div class="orb orb-cyan" style="width:450px;height:450px;top:-150px;left:-120px;"></div>
-      <div class="orb orb-purple" style="width:400px;height:400px;bottom:-130px;right:-100px;"></div>
-      <div class="slide-content">
-        <div class="big-text" style="margin-bottom:32px;">Bereit?</div>
-        <div class="sub-text">30 Sekunden bis zum perfekten Setup.</div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">14/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 14: HOW IT WORKS
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide" data-slide-number="14">
-      <div class="orb orb-purple" style="width:400px;height:400px;top:-130px;left:-100px;"></div>
-      <div class="orb orb-cyan" style="width:350px;height:350px;bottom:-120px;right:-80px;opacity:0.09;"></div>
-      <div class="slide-content" style="display:flex;flex-direction:column;align-items:center;text-align:center;">
-        <div class="section-label" style="margin-bottom:16px;">Setup</div>
-        <div class="slide-title" style="margin-bottom:48px;">So einfach geht's</div>
-        <div style="display:flex;flex-direction:column;gap:32px;width:100%;max-width:700px;text-align:left;margin-bottom:56px;">
-          <div class="step">
-            <div class="step-number">1</div>
-            <div class="step-text">Terminal &ouml;ffnen</div>
-          </div>
-          <div class="step">
-            <div class="step-number">2</div>
-            <div class="step-text">Ins Projektverzeichnis wechseln</div>
-          </div>
-          <div class="step">
-            <div class="step-number">3</div>
-            <div class="step-text">Befehl ausf&uuml;hren</div>
-          </div>
-        </div>
-        <div class="cmd-box" style="font-size:32px;margin-bottom:32px;">
-          <span class="prompt">$</span> npx cc-starter
-        </div>
-        <p style="font-size:16px;color:var(--text-dim);font-family:var(--font-mono);">
-          Node.js 18+ &middot; Claude Code CLI optional
-        </p>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">15/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 15: TERMINAL DEMO
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide" data-slide-number="15">
-      <div class="orb orb-purple" style="width:500px;height:500px;top:-180px;right:-180px;"></div>
-      <div class="orb orb-cyan" style="width:350px;height:350px;bottom:-100px;left:-100px;opacity:0.08;"></div>
-      <div class="slide-content">
-        <div style="background:rgba(20,20,30,0.9);border-radius:16px;border:1px solid rgba(255,255,255,0.12);overflow:hidden;box-shadow:0 0 40px rgba(0,212,255,0.1),0 0 80px rgba(168,85,247,0.06);">
-          <!-- Terminal Title Bar -->
-          <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;background:rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.06);">
-            <span style="width:12px;height:12px;border-radius:50%;background:#ff5f57;"></span>
-            <span style="width:12px;height:12px;border-radius:50%;background:#febc2e;"></span>
-            <span style="width:12px;height:12px;border-radius:50%;background:#28c840;"></span>
-            <span style="font-family:var(--font-mono);font-size:13px;color:var(--text-dim);margin-left:8px;">Terminal</span>
-          </div>
-          <!-- Terminal Content -->
-          <div style="padding:28px 32px;font-family:var(--font-mono);font-size:15px;line-height:1.8;white-space:pre-wrap;">
-<span style="color:var(--text-dim);">$</span> <span style="color:var(--cyan);">npx cc-starter</span>
-  <span style="color:var(--purple);">╔═══════════════════════════════════════╗</span>
-  <span style="color:var(--purple);">║</span>        <span style="color:var(--text-bright);">cc-starter v1.0.5</span>              <span style="color:var(--purple);">║</span>
-  <span style="color:var(--purple);">║</span>   <span style="color:var(--text-dim);">Claude Code Project Kickstart</span>       <span style="color:var(--purple);">║</span>
-  <span style="color:var(--purple);">╚═══════════════════════════════════════╝</span>
-  <span style="color:var(--purple);">?</span> <span style="color:var(--text-bright);">Sprache / Language:</span> <span style="color:var(--cyan);">English</span>
-  <span style="color:var(--purple);">?</span> <span style="color:var(--text-bright);">Project name:</span> <span style="color:var(--cyan);">my-saas-app</span>
-  <span style="color:var(--purple);">?</span> <span style="color:var(--text-bright);">Short description:</span> <span style="color:var(--cyan);">SaaS dashboard with analytics</span>
-  <span style="color:var(--text-dim);">Detected: TypeScript, Next.js, Tailwind CSS</span>
-  <span style="color:var(--purple);">?</span> <span style="color:var(--text-bright);">Plugin preset:</span> <span style="color:var(--cyan);">Standard</span>
-  <span style="color:#28c840;">✓</span> <span style="color:var(--text-bright);">.claude/rules/</span>           <span style="color:var(--text-dim);">4 files</span>
-  <span style="color:#28c840;">✓</span> <span style="color:var(--text-bright);">.claude/memory/</span>          <span style="color:var(--text-dim);">MEMORY.md</span>
-  <span style="color:#28c840;">✓</span> <span style="color:var(--text-bright);">CLAUDE.md</span>                <span style="color:var(--text-dim);">created</span>
-  <span style="color:#28c840;">✓</span> <span style="color:var(--text-bright);">scripts/stats/</span>           <span style="color:var(--text-dim);">4 tools</span>
-  <span style="color:#28c840;">✓</span> <span style="color:var(--text-bright);">Plugins installed</span>        <span style="color:var(--text-dim);">3 plugins</span>
-  <span style="color:#28c840;font-weight:600;">Done! Run 'claude' to start coding.</span>
-<span style="color:var(--cyan);">█</span></div>
-        </div>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">16/17</div>
-      </div>
-    </div>
-    <!-- ══════════════════════════════════════════════════════════
-         SLIDE 16: CLOSER / CTA
-         ══════════════════════════════════════════════════════════ -->
-    <div class="slide" data-slide-number="16">
-      <div class="orb orb-cyan" style="width:500px;height:500px;top:-180px;left:-160px;"></div>
-      <div class="orb orb-purple" style="width:450px;height:450px;bottom:-150px;right:-120px;"></div>
-      <div class="orb orb-cyan" style="width:250px;height:250px;top:40%;left:70%;opacity:0.06;"></div>
-      <div class="slide-content" style="display:flex;flex-direction:column;align-items:center;text-align:center;">
-        <div style="font-size:64px;font-weight:900;color:var(--text-bright);margin-bottom:40px;letter-spacing:-0.03em;">
-          Probier es aus.
-        </div>
-        <div class="cmd-box" style="font-size:30px;margin-bottom:48px;">
-          <span class="prompt">$</span> npx cc-starter
-        </div>
-        <div class="cta-links" style="margin-bottom:40px;text-align:left;">
-          <div class="cta-link">
-            <span class="label">GitHub</span>
-            <span class="url">github.com/WAGMIStudios/cc-starter</span>
-          </div>
-          <div class="cta-link">
-            <span class="label">npm</span>
-            <span class="url">npmjs.com/package/cc-starter</span>
-          </div>
-          <div class="cta-link">
-            <span class="label">Web</span>
-            <span class="url">wagmistudios.github.io/cc-starter</span>
-          </div>
-        </div>
-        <p style="font-size:16px;color:var(--text-dim);font-family:var(--font-mono);margin-bottom:20px;letter-spacing:0.05em;">
-          Open Source &middot; MIT Lizenz &middot; Kostenlos
-        </p>
-        <p style="font-size:16px;color:var(--text-dim);margin-bottom:24px;">
-          Built by Lars Fanter
-        </p>
-        <p style="font-size:14px;color:var(--text-dim);font-family:var(--font-mono);">
-          #ClaudeCode #AI #DeveloperTools #OpenSource
-        </p>
-      </div>
-      <div class="slide-brand">
-        <div class="brand-name">cc<span>-starter</span></div>
-        <div class="slide-num">17/17</div>
-      </div>
-    </div>
-  </div>
-</body>
-</html>