Your First Steps with AI Coding: Build a Real Next.js App with Cursor + Claude

A practical, copy-pasteable walkthrough for working developers new to Cursor + Claude. Builds and ships a real Next.js 16 + TypeScript + Tailwind + Supabase magic-link todo app from scratch. Teaches model switching (Opus 4.7 to plan, Sonnet 4.6 to build), Plan vs Agent modes, the three context layers (CLAUDE.md, .cursor/rules, skills from skills.sh), the disciplined Plan-Check-Refine-Build-Test-Commit loop, and a recovery playbook for when things go sideways. By the end the reader has a deployed app and the muscle memory of a real Cursor workflow.