Skip to main content
JG is here with you ✨

Learning Path

📍 Part 1 · Calm Rituals Before Code
↓
Part 2 · Ship Field Notes with Tests
↓
Part 3 · Systems, Automation, Ops

1 of 3 complete

Beginner · 20 minNo dev job requiredInteractive ✓
Next: Intermediate
5 min

Folder Map + Documentation Seed

Create the docs/ folder, map your tree, and seed the four tiny files that keep Cursor grounded.

  • Create docs/FOLDER_MAP.md describing directories.
  • Add AI_PRACTICES.md with “AI = junior pair” rules.
  • Start PROMPT_PLAYBOOK.md with before/after prompts.
  • Copy WORK_ORDER_TEMPLATE.md so every task has a plan.

What this prevents

Stops drafts from leaking into production and prevents Cursor from referencing deleted folders.

Common oops

Dropping screenshots or scratch files inside src/ and wondering why they end up in the bundle.

3 min

Tooling Shakedown

Run the five commands (install → dev → lint → type-check → test) and log outputs.

  • npm install
  • npm run dev
  • npm run lint
  • npm run type-check
  • npm test

What this prevents

Catches Tailwind, pointer-event, or TypeScript issues before they surprise you in production.

Common oops

Skipping npm run type-check because “Next.js will warn me.” It won’t.

4 min

Prompt Spine Builder

Fill out Context, Observations, Intention, Quality Bars, Format, Ask. Cursor finally knows the plan.

  • Context (what changed, files, links)
  • Observations (3 bullet constraints)
  • Intention (plain-language goal)
  • Quality Bars (tier, palette, accessibility, tests)
  • Format + Ask (code, doc, diff expectations)

What this prevents

Stops vague prompts that lead to hallucinated colors, file paths, or component structures.

Common oops

Forgetting to mention Tailwind palette or component tier, so styles come back generic.

6 min

Vercel Environment Ritual

Document env vars, sync `.env.example` with Vercel dashboard, verify preview build, log Lighthouse.

  • Update `.env.example` with every variable.
  • Set Preview + Production values in Vercel dashboard.
  • Run `vercel env pull .env.local` when needed.
  • Log preview URL + Lighthouse score in DEVLOG.md.

What this prevents

Avoids the classic “env var undefined” deploy failure and keeps secrets out of git history.

Common oops

Forgetting to add `.env.local` to `.gitignore` before committing.

0%

Lab Progress

0 of 14 tasks complete

1Folder Map & Docs Checklist

0/4 complete

Keep drafts out of production and give Cursor a predictable structure. Copy the command to scaffold the base tree, then check off each documentation seed.

npx degit frame-architech/vercel-cursor-ritual-starter my-project
cd my-project && npm install

0/4 docs complete

2Tooling Command Runner

0/5 commands logged

Install dependencies

Confirms package-lock.json is synced.

Run dev server

Ensure http://localhost:3000 loads with no warnings.

Lint codebase

Catches pointer-events/z-index regressions early.

Type-check

Prevents surprise build failures on Vercel.

Run tests

Even empty suites confirm Vitest is configured.

Select a command

Click “Run” next to a command to view the simulated output.

This terminal is a simulator—run the real commands in your local shell too.

3Prompt Spine Builder

Prompt preview

Fill out the fields to generate your prompt spine preview.

4Vercel Env Ritual

Track each env step so production deploys never fail because of missing secrets.

0/5 steps checked

Common oops

Forgetting to add .env.local to .gitignore. If secrets leak, rotate them immediately and update the dashboard.

Also double-check that Preview + Production both have the variables—you’d be surprised how often one environment gets skipped.

Wrap-up Summary

Docs seeded

0/4

Commands logged

0/5

Env steps

0/5

When every counter reads “complete,” you’re ready for the Intermediate lab.
Back to LabsContinue to Intermediate
Open to AI-Focused Roles

AI Sales • AI Strategy • AI Success • Creative Tech • Toronto / Remote

Let's connect →
Terms of ServiceLicense AgreementPrivacy Policy
Copyright © 2026 JMFG. All rights reserved.