Vercel × Cursor Intermediate Lab

8 min

Discovery Sprint

Inspect existing components, read the quality standard, and design the FieldNote API before touching JSX.

Pro tips

Log goal, deliverables, constraints inside your work order.
Use `rg`/Cursor search to find similar components and copy the patterns.
"What good looks like" = typed props, Tier-2 styling, motion.

Checkpoint

Work order filled (goal, deliverables, constraints).
Notes added from `COMPONENT_QUALITY_STANDARD.md`.
API sketch for `FieldNote` saved.
Time estimates logged.

12 min

Implementation Loop

Share the Context/Observations/Intention spine with Cursor, then build the component + data file with deliberate iterations.

Pro tips

Paste real mock data so Cursor can infer structure.
Remember the challenge mode (pinned notes).
Use TypeScript unions for statuses.

Checkpoint

Plan reviewed with Cursor before code.
Component + data file created.
Motion + Tailwind tokens match spec.
Challenge mode completed (optional).

6 min

Test-First With AI

Write the spec, ask Cursor for Vitest skeletons, run tests, and log results (pass or fail) with the survival checklist.

Pro tips

Read failing errors aloud to slow panic.
Check mock-data paths match actual casing.
Ask Cursor why a test failed—paste the log.

Checkpoint

Spec documented (render, filter, empty state).
Test file created from AI output.
`npm run test` executed (pass/fail logged).
Survival checklist followed if red.

8 min

Preview Deploy Discipline

Push to a feature branch, review Vercel Preview, run Lighthouse, and drop the standardized QA comment.

Pro tips

Use the QA prompt block to ask Cursor for the summary.
Deploy detective mini-cases sharpen debugging instincts.
Don’t merge until mobile, desktop, lint, type-check, tests are all logged.

Checkpoint

Preview URL reviewed (desktop + mobile).
`npm run lint` / `type-check` / `test` results pasted.
Lighthouse scores recorded.
Deploy detective challenge solved.

4 min

Documentation + Error Diary

Update `ROUTE_MAP.md`, `DEVLOG.md`, `ERROR_PLAYBOOK.md`, and your deployment journal. Simulate a peer review comment.

Pro tips

Treat documentation as closing the loop for future-you.
Peer review simulator catches unused imports or missing comments.
Journal entries help you spot patterns later.

Checkpoint

`ROUTE_MAP.md` entry updated.
`DEVLOG.md` entry with preview link + scores.
`ERROR_PLAYBOOK.md` updated if issues occurred.
Personal journal entry captured.

Challenge mode: Add the pinned?: boolean prop, update mock data, re-run tests, redeploy, and log the change in your dev log. This is the fastest way to prove the workflow sticks.

2. Implementation Loop

Challenge mode: Add pinned notes + redeploy (optional but epic).

What good looks like

type FieldNotesSectionProps = {
  notes: FieldNote[];
};

export function FieldNotesSection({ notes }: FieldNotesSectionProps) {
  return (
    <section className="space-y-6">
      {/* Framer Motion cards */}
    </section>
  );
}

✓ Typed props · ✓ Tailwind tokens · ✓ Motion · ✓ Accessible buttons

> vitest run ✓ renders FieldNote summary (4ms) ✓ filters notes by focus (3ms) ✓ handles empty state gracefully (1ms) Test Files 1 passed (1) Tests 3 passed (3) Start at 14:42:18 Duration 1.35s

4. Preview Deploy Discipline

QA prompt (copy into Cursor)

Run these quality gates and report results:
1. npm run lint — paste warnings
2. npm run type-check — confirm zero errors
3. npm test -- --coverage — include %
4. Lighthouse mobile score — screenshot or number
5. Mobile + Desktop manual QA notes

npm run lintnpm run type-checknpm run test

Lighthouse mobile

Lighthouse desktop

Deploy Detective

Case: Select a case to investigate.

Theory · Ship Features With Quality Gates

Discovery Sprint

Implementation Loop

Test-First With AI

Preview Deploy Discipline

Documentation + Error Diary

1. Discovery Board

2. Implementation Loop

3. Test-First With AI

4. Preview Deploy Discipline

5. Documentation + Error Diary

Final Summary