Cue · Interview Preparation

Your stories, cued up for the room.

AI structures your career stories from a résumé or notes. Two purpose-built modes help you practice them and use them when it counts.

SSituation
TTask
AAction
RResult
The problem

You have the stories. You just can't access them when someone is looking at you.

Most professionals have years of strong work experience but no structured way to make it queryable under pressure. The gap isn't the experience — it's not being able to reach it clearly when a question lands across the table.

Existing prep tools are either generic (practice questions with no connection to your actual history) or passive (a Word doc you scroll through the night before). Neither solves the access problem. Cue does.

The insight

Two modes. One for rehearsal. One for the real thing.

What you need when you're studying is completely different from what you need when you're in the room. Cue was designed around that split.

Practice Mode

Flashcard-style rehearsal

The front of each card shows the interview cue and a headline metric from your results. Flip to see the compact STAR breakdown — a way to test your own recall in the format your memory will need under pressure. Open the full story for every detail.

  • Interview cue on the front
  • Headline metric for scannability
  • Flip to check your STAR recall
  • Open full story for complete detail
Interview Mode

Minimal. Zero scrolling.

Everything visible above the fold. No scrolling, no detail overload — just the memory joggers you need when someone is looking at you. Runs quietly on a second screen or phone during a real conversation without breaking your focus.

  • Full story list with keyboard navigation
  • Search by question type or competency
  • Color-coded by story theme
  • Everything above the fold — always
How it works

From résumé to ready. Four steps.

01

Import your experience

Upload a résumé, LinkedIn export, or any notes as PDF, DOCX, or plain text. Claude reads the document and extracts the raw material for your story library.

02

AI structures your stories

Each story is formatted into a STAR structure — Situation, Task, Action, Result — with theme color-coding, competency tags, and interview trigger questions added automatically.

03

Practice in flashcard mode

Work through your story deck like flashcards. See the cue, recall the story, flip to check yourself. Drag to reorder so your strongest stories are always on top.

04

Go live in Interview Mode

Open Interview Mode before your call. Search by question type, navigate with keyboard shortcuts, and keep your stories visible without ever needing to scroll.

Under the hood

How I built it.

Claude API

Anthropic

Two jobs: résumé extraction (structured JSON at temperature 0 — precision matters when you're parsing career data) and AI import dialogue. The extract-then-structure approach means the output is always machine-readable and editable.

React + TypeScript

Vite

Single-page app with no build complexity overhead. TypeScript throughout — the StarStory interface is the contract that flows from Supabase through the UI to the print view. Type safety caught several edge cases at compile time.

Supabase

Auth + Postgres

Auth, per-user story storage, and row-level security so stories are always private. The sort_order column enables drag-to-reorder without a junction table. Realtime not needed — this is a single-user tool.

shadcn/ui + Tailwind

Design System

Category color tokens (--cat-prod, --cat-lead, etc.) defined in CSS and mapped to Tailwind utilities — JIT-safe literal class strings per category. The flip card 3D transform is pure CSS perspective + rotateY.

AI import

PDF, DOCX, and TXT résumés extracted and structured via Claude Edge Functions

Export to PDF

window.print() + @media print stylesheet — no extra dependencies

Drag to reorder

HTML5 drag API with optimistic UI + Supabase sort_order batch update

Why I built this

A PM who builds the tools they need.

I built Cue for myself — and then rebuilt it to show what happens when you apply real product thinking to a personal problem. The first version was a static HTML file and a Claude prompt. The version you're looking at is what emerged when I treated it like a product: defined the two distinct use cases (practice vs. live reference), designed an information architecture around them, and built the AI layer to serve the workflow rather than demonstrate the technology.

The two-mode split is the core product decision. Practice Mode and Interview Mode look similar on the surface — they both show your stories — but they serve fundamentally different user states. In practice you want depth and repetition. In a live interview you want a single screen with no scrolling and no cognitive load. Those goals are in direct tension, and the mode architecture is how I resolved it without compromising either.

The AI import is what makes the tool worthwhile. Manually entering STAR stories is tedious enough that most people won't do it. Uploading a résumé and getting back a structured, editable story library in seconds changes the activation energy completely. That's a product insight, not a technical one — and it's the kind of thinking I bring to everything I build.

Personal tool → portfolio pieceReact + Supabase + ClaudeTwo-mode UX architectureAI-powered import2026