prototype

/supergraph:prototype

Throwaway code to validate approach. Explore fast, decide, then delete or integrate.

Announce: "🧪 /supergraph:prototype — building throwaway prototype..."

When to Use

• Between /supergraph:analyze and /supergraph:plan when approach is uncertain
• Multiple valid UI designs need visual comparison
• Core logic (state machine, algorithm, data model) needs validation before full TDD
• User says "I'm not sure which approach" or "can we try both?"

Choose Branch

Ask user (or infer from task):

Logic branch — validate state, algorithm, or data model
UI branch — validate layout, interaction, or multiple designs

---

Logic Branch

Goal: validate core logic in a minimal terminal program.

Rules:

• Single file (prototype-<slug>.ts / .py / etc.)
• No database, no HTTP, no external services — in-memory only
• No tests — feedback is the running output
• Single command to run: npx ts-node prototype-<slug>.ts or equivalent
• Hard-code sample data

Structure (TypeScript example):

// prototype-<slug>.ts — THROWAWAY, do not review
type State = "idle" | "processing" | "done" | "error"
type Event = { type: "start" } | { type: "finish" } | { type: "fail" }

function transition(state: State, event: Event): State {
  // ...
}

// Run through sample cases
const cases = [ ... ]
cases.forEach(({ from, event, expected }) => {
  const result = transition(from, event)
  console.log(result === expected ? "✅" : "❌", { from, event, result, expected })
})

Run and observe:

npx ts-node prototype-<slug>.ts

---

UI Branch

Goal: compare multiple visual/interaction designs without committing.

Rules:

• All designs live on ONE route: /prototype/<slug>
• URL param ?design=A|B|C switches between designs
• Floating control bar (fixed position) lets user switch designs visually
• No persistence layer — mock data only
• No auth, no real API calls
• Single command to start: npm run dev (or project equivalent)

Structure:

app/prototype/<slug>/page.tsx   (router + floating switcher)
app/prototype/<slug>/DesignA.tsx
app/prototype/<slug>/DesignB.tsx
app/prototype/<slug>/DesignC.tsx