Use when someone has an upcoming job interview and wants to prepare. Triggers on: "I have an interview at [company]", "help me prepare for my interview", "I got the call — interviewing at [company] on [date]", "help me ace my interview", "I need to practice for [role] interview", "prep me for my interview next week", "create interview prep", "build an interview app", "make me a prep guide for [company]". Also triggers when user shares interview details (company, role, date) in a message asking for help or practice material.

Interview Prep Builder

Builds a personalized, standalone HTML interview prep app — one file, no dependencies, opens in any browser.

Phase 1 — Intake

Ask these questions all at once in a numbered list. Mark required fields clearly.

To build your interview prep app, I need:

REQUIRED:
1. Your full name
2. Company name + what they do (1 sentence)
3. The role / job title
4. Interview date + time + timezone

HELPFUL (skip any you don't have):
5. Your background — current role, relevant past experience, what makes you different
6. Interviewer names + titles (if known)
7. Second language? (for bilingual toggle — skip if none)
8. Paste the job description OR list 6–10 domain terms the interviewer likely uses
9. 3–5 "tell me about yourself" talking points you want to nail
10. Company's main product or value proposition

If the user pastes a full job description for item 8: extract the key domain terms yourself — do not ask them to extract and re-list them.

Generate with whatever you have. Don't block on optional items.

Phase 2 — Research (run silently while user is responding)

If WebSearch is available, run these 3 queries in parallel before generating:

"[company]" recent news funding OR product 2025 2026
"[company]" glassdoor interview questions
[role] [industry] interview questions expected

Use findings to enrich flashcards and simulation questions. Skip gracefully if unavailable.

Pre-Generation Checklist

Run this before writing the HTML:

All required inputs confirmed (name, company, role, date)
Every [PLACEHOLDER] has a real value ready
TMAY answer is drafted specifically for this person — no generic advice
At least 15 vocabulary terms identified (from JD, user input, or research)
Flashcard examples all say "In context of [company], this means..."
Questions reference the actual role, not a generic version of it
Countdown uses correct ISO date with timezone offset
Weakness section answers reference this candidate's specific background
Adaptation rule applied (see table below)

Phase 3 — Generate the HTML

Output a complete, single-file HTML document with no external dependencies.

File requirements:

<!DOCTYPE html> — all CSS in <style>, all JS in <script> at bottom of <body>
Opens from file:// in Chrome/Edge with no errors
Dark theme, mobile-responsive, fixed top nav
No var — only const / let
All localStorage/sessionStorage keys prefixed ip-*
Target: 2200–3000 lines

JS patterns: All required patterns are in references/js-patterns.md. Use them exactly — each solves a real browser bug. Key ones: TTS Chrome async voice bug, flashcard localStorage restore, tab sessionStorage, file:// STT guard, bilingual display:block fix.

CSS Variables

:root {
  --navy: [company primary color or #002B49];
  --accent: [company accent color or #00C8CB];
  --bg: #0A0E1A;
  --card: #111827;
  --border: #1E2A3A;
  --text: #E2E8F0;
  --text-muted: #64748B;
  --green: #22C55E; --yellow: #EAB308; --orange: #F97316; --red: #EF4444;
  --font: 'DM Sans', 'Inter', system-ui, sans-serif;
}

Look up the company's brand colors. Default to navy/teal if unknown.

8 Navigation Tabs

tmay · demo · questions · vocab · heatmap · sim · checklist · weakness

Nav brand: [COMPANY] Prep — [CANDIDATE NAME] · Countdown in top-right.

Section Content

TMAY — Tell Me About Yourself

5-part framework, populated from candidate inputs:

Hook — One provocative sentence capturing their unique angle
Background — 2–3 sentences of relevant history + bridge to this role
Proof — Specific achievements with numbers, not responsibilities
How I work — Tools, approach, what makes them effective
Why [Company] — Specific, honest, forward-looking (never "I love your culture")

Include: bilingual toggle if user specified a second language · "elements to hit" checklist · Copy button · TTS "Read aloud" button

Demo Flow

Sales/GTM role: step-by-step demo script. Each step = action + what to say + trap to avoid + time estimate.

Engineering/Product/other: replace with "My Story Arc" — key narrative beats for behavioral questions.

Questions — Q&A Bank

Generate 12–16 personalized questions across 4 categories:

Category	Count	Focus
Opening	2–3	TMAY variations, background probes
Role-specific	4–5	Technical/functional depth for this exact job
Behavioral	3–4	STAR-format, tied to candidate's actual history
Curveball	2–3	Reveal judgment, not just prep

Each question: accordion card with framework suggestion (STAR, FAB, etc.) + 2–3 key points to hit.

Also include 4–6 questions the candidate should ask — reference the interviewer by name if known.

Vocab — Flashcards

15–25 cards. Each card:

Front: term + priority badge (🔴 MUST KNOW / 🟠 IMPORTANT / 🔵 NICE TO KNOW)
Back: plain-language definition + company-specific example + 1/3/5 confidence buttons

Priority logic: MUST KNOW = interviewer will definitely use it · IMPORTANT = shows domain depth · NICE TO KNOW = impress-if-relevant

See references/js-patterns.md → "Flashcard Confidence" for localStorage + button restore pattern.

Heatmap — Readiness

6–8 colored tiles showing prep level (0–100):

Domain Knowledge · Product Understanding · Role Fit / TMAY · Behavioral Stories · Company Research · Industry Trends · (+ 1–2 role-specific)

Colors: green ≥80 · yellow 60–79 · orange 40–59 · red 0–39. Domain Knowledge tile updates live from flashcard confidence average. Include weighted "Overall Readiness" score.

Simulate

Random question picker from the full question bank. UI: Draw Question button · 2-min countdown timer (Start/Reset) · Answer textarea · Voice Answer (STT) · Read Question (TTS) · Prev/Next nav.

See references/js-patterns.md → "TTS" and "STT" for exact implementations.

Checklist

15–20 items across 4 categories: Technical · Environment · Mental · Final. Progress bar. Uses localStorage — see references/js-patterns.md → "Checklist".

Weakness

3–4 accordion cards for trap questions:

The dangerous question · Why it's a trap · The reframe strategy · Sample answer specific to this candidate

Standard traps: biggest weakness · why leaving current job · 5-year plan · why hire you.

Phase 4 — Delivery

Output the full HTML in one fenced code block, then say:

Save as `[company-name]-interview-prep.html` (lowercase, hyphens for spaces) and open in Chrome or Edge.

What's inside: 8 tabs · countdown · voice TTS + STT · flashcard ratings saved across reloads · last tab remembered on refresh.

Voice answer tip: serve with `npx serve .` then open the localhost URL — microphone requires HTTPS/localhost, not file://.

Handling Updates

If the user asks to change something after delivery ("update the date", "add 3 more flashcards"):

For small changes (date, name, 1–2 questions): regenerate only the affected snippet and give clear paste instructions
For large changes (new role, new company): regenerate the full file

Adaptation Rules

Candidate Type	Adaptation
Sales / GTM	Demo Flow = product demo script; quota/pipeline language in Q&A
Engineering	Demo Flow → "System Design Story"; complexity/tradeoffs in Q&A
Product	Demo Flow = product thinking walkthrough; prioritization frameworks
Leadership	Emphasize behavioral + change management; reduce tactical detail
Early-career	More "why I'm ready" content; reduce jargon; add "what I've shipped" proof
Non-English speaker	Auto-enable bilingual toggle; translate key flashcard phrases

Never use generic interview advice. Every sentence must be specific to this company, this role, and this candidate.

interview-prep-builder