Capstone: Mock Loop & Self-Exam

Cursor bans AI in the coding screens and allows only basic autocomplete - they use the unassisted hour as a time-boxed read on raw skill. So you have to be sharp without the very tool the company sells.

The fix is reps, not theory. You rebuild the same handful of interactive components from a blank file until your hands know the shape of an accessible combobox before your brain finishes reading the spec. This section is the drill protocol you run, on a timer, three or four times this week.

Set the room to match the real screenDrill setup

1. 1Kill the model. Turn off Copilot and Cursor's AI completions, leaving only the editor's word-level autocomplete. The point is to feel the gap the real screen creates, not to simulate comfort.
2. 2Set a 60-minute clock. One medium-hard component from a cold start. A 45-minute version is the warm-up; the full hour is the test, because the last 15 minutes are where polish and edge cases either appear or don't.
3. 3Open a bare sandbox. A single tsx file, no scaffolding, no snippet library you pre-wrote. If you'd reach for a saved keyboard-handler block on the real screen, you can't, so don't here either.
4. 4Record yourself narrating. Talk through trade-offs out loud the whole way, as if an interviewer is on the call. The recording is the feedback loop - you'll hear every place you went quiet and started flailing.

The problem bankPick one per session

Each of these is a real interaction a Design Engineer ships and each hides a specific trap that separates a working answer from a polished one.

// Combobox: filter a list, keyboard-navigable, commits a value.
// Props
type ComboboxProps = {
  options: { id: string; label: string }[];
  value: string | null;
  onChange: (id: string) => void;
};
// Invariants to say aloud:
//  - activeIndex is the visually-highlighted row, NOT DOM focus
//  - input keeps focus the whole time; aria-activedescendant points at the row id
//  - Escape closes and restores the committed value; Enter commits activeIndex
//  - empty filtered list still renders a 'No results' row, not a void

Score yourself like the interviewer willRubric

The front-end build round judges two things at once: correctness and polish. Clean React or SolidJS plus CSS that's also genuinely nice to look at, with a component API a teammate would actually want to use.

Treat the rubric as a gap finder, not a score to admire. Mark the weakest proof, turn it into one practice rep and keep the artifact you would show an interviewer.

This is a longer drill than the coding screen because the deliverable is bigger. Give yourself 90 minutes and a single non-trivial component. The order you build in is the whole game.

The 90-minute order of operationsSprint protocol

1. 10–15 · API first. Write the props and the call site before the body. A <Toast /> or <SlideOver /> lives or dies on its surface area - is open controlled, what does onClose mean, how does a consumer pass content. Get the shape right and the body falls out.
2. 215–45 · Make it work. The happy path only. One toast appears, one panel slides in. No states, no a11y yet - a working skeleton you can demo, so if the clock beats you, you still have something.
3. 345–65 · States and accessibility. Empty, loading, error and the focus contract: a slide-over traps focus, restores it on close and closes on Escape. This is the band most candidates skip and the band that separates a Design Engineer from a generalist.
4. 465–90 · Motion and the last mile. Enter/exit transitions on compositor-only properties, easing that feels intentional, a hover state that isn't an afterthought. Then a pass for the details: optical spacing, the focus ring, dark mode if the spec implies it.

Pick a spec with real surface areaSprint options

Self-review against the DE rubricGrade your own output

/* Good: transform + opacity stay on the compositor */
.panel {
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.panel[data-open='true'] { transform: translateX(0); }

/* Bad: animating 'right' or 'width' forces layout every frame */
.panel--janky { right: -400px; transition: right 280ms ease; }

Cursor's actual decision round is a paid 2-day in-person trial: you ship a real project alongside the team, share meals and present it. It exists to reveal genuine passion and whether you can ship from week one.

You can't fully simulate the in-person part, but you can rehearse the part that's graded hardest - scoping ruthlessly, building something polished, taking feedback mid-stream and presenting it cleanly. Run this as a single focused day on a small AI-dev-tool feature.

Pick a feature with editor-paradigm textureScope target

Choose something that touches the novel-UI surfaces Cursor is still inventing, so your taste for AI-native interaction shows. Two strong options:

The one-day shipping loopSimulation protocol

1. 1Scope down hard, first hour. Write one sentence describing the demoable slice and a short cut-list of everything you're deliberately not building. The trial rewards a finished small thing over an unfinished ambitious one.
2. 2Build it polished, not just working. Same discipline as the build round - happy path early, then states, accessibility and motion. Polish is the differentiator the whole trial is built to reveal.
3. 3Get peer feedback mid-build. Around the midpoint, show a real person and ask one pointed question: “Is the accept affordance obvious?” Then actually incorporate what they say. Collaboration under a clock is part of the grade.
4. 4Prepare a 5-minute presentation. Problem, the decisions you made and why, a live demo and honest next steps. Practice it once out loud against a timer so the demo doesn't eat your five minutes.

Structure the 5-minute presentDemo skeleton

The portfolio review and the values round test the same muscle from two angles: can you articulate the why behind your craft and do you treat this as a craft rather than a job.

Treat the rubric as a gap finder, not a score to admire. Mark the weakest proof, turn it into one practice rep and keep the artifact you would show an interviewer.

Both fail the same way - vague answers that draw follow-up after follow-up. This drill is about delivery: run it live and timed, then tighten anything that wobbled.

The dry-run protocolRecord and review

1. 1Walk your three pieces, timed, to a camera or a friend. Three to four minutes each. Lead with the interaction or visual decision, not the project's backstory - the reviewer cares why you chose that easing, not the company's roadmap.
2. 2Take five pushback questions per piece, without flinching. Have someone ask “why this and not the simpler version,” “what did you cut,” “show me the worst part.” The goal is calm, specific answers, not a defense.
3. 3Deliver your why-Cursor and three STAR stories back to back. No pause to reset between them. If your why-Cursor sounds like it could be said about any AI startup, it's not done.
4. 4Tighten every spot that drew a follow-up. A follow-up question is a flag that the first answer was vague. Rewrite that one until it lands clean the first time.

What each pushback question is really probingRead the subtext

Pin your why-Cursor to something only you'd sayAuthenticity test

• Name a specific Cursor interaction you admire or would change and why - inline diffs, tab prediction, the agent UI. Generic praise of the mission is the tell of a candidate who skimmed the site.
• Tie it to what you'd build: “the interaction paradigms here aren't settled and I want to be one of the people inventing them” is a Design Engineer's why, not a generalist's.
• Bring proof of daily use. A real thing you built in Cursor this week beats any statement of enthusiasm.

This is the gate. You rate yourself 1–5 across every dimension the loop tests and anything under 4 becomes a targeted drill before you book the real thing.

Treat the rubric as a gap finder, not a score to admire. Mark the weakest proof, turn it into one practice rep and keep the artifact you would show an interviewer.

Be honest to the point of discomfort. The loop is graded on your floor, not your ceiling, so an inflated self-score just hides the stage that will actually sink you.

Craft and coding readinessRate 1–5

Narrative and values readinessRate 1–5

Confirm the logistics that aren't about skillDon't let these sink you