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.
Builds a personalized, standalone HTML interview prep app — one file, no dependencies, opens in any browser.
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.
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 expectedUse findings to enrich flashcards and simulation questions. Skip gracefully if unavailable.
Run this before writing 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>file:// in Chrome/Edge with no errorsvar — only const / letip-*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.
: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.
tmay · demo · questions · vocab · heatmap · sim · checklist · weakness
Nav brand: [COMPANY] Prep — [CANDIDATE NAME] · Countdown in top-right.
5-part framework, populated from candidate inputs:
Include: bilingual toggle if user specified a second language · "elements to hit" checklist · Copy button · TTS "Read aloud" button
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.
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.
15–25 cards. Each card:
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.
6–8 colored tiles showing prep level (0–100):
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.
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.
15–20 items across 4 categories: Technical · Environment · Mental · Final.
Progress bar. Uses localStorage — see references/js-patterns.md → "Checklist".
3–4 accordion cards for trap questions:
Standard traps: biggest weakness · why leaving current job · 5-year plan · why hire you.
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://.
If the user asks to change something after delivery ("update the date", "add 3 more flashcards"):
| 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.