SPAs and Claude

Plan an app on paper, then build it as a single page app with Claude Code. Everything opens in a new tab, so keep this page open as your home base.

1

UI Fundamentals

Draw the blueprint before Claude builds.

Open the slidesArrow keys to move, F for fullscreen
  1. Activity: UI Crime Scene16 broken mini-apps. Take a number, find what's wrong, post the fix.
2

Building Your SPA

From blueprint to a running React app.

Open the slidesArrow keys to move, F for fullscreen
  1. Activity: SPA DetectiveSame radio station built two ways, then a lineup of real sites. SPA or full reload?
  2. Activity: Who's Responsible?Something broke. Which tool owns it: Node, Vite, Router, an MCP, a skill?
  3. Finished example: LiftlogThe workout tracker from the demo, built with React + React Router.

Set up Claude Code for the homework

Install the four design skills

  1. Open a terminal. Mac: the Terminal app. Linux: your terminal. Windows: the Ubuntu app (WSL). Don't use PowerShell, Command Prompt, or Git Bash.
  2. Go to your project folder, the one you'll start Claude Code in: cd ~/my-project. The skills install into .claude/skills/ inside whatever folder you're in.
  3. Paste this and press Enter: 
    curl -fsSL https://kabeier.github.io/SPAs-and-Claude/lecture-2-building-spas/demo-kit/setup-skills.sh | bash
    It should finish with four ✓ lines, one per skill.
  4. Check it: start claude in the same folder and type /skills. You should see all four. (Taste appears as design-taste-frontend, which is correct.)

Skills install gave an error, or no ✓ lines? Open the step-by-step manual install guide. It starts with a fix-it table for common errors.

Add the three MCP servers

  1. In the same terminal (not inside Claude Code), paste these three lines: 
    claude mcp add --scope user playwright -- npx -y @playwright/mcp@latest
claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp
claude mcp add --scope user chrome-devtools -- npx -y chrome-devtools-mcp@latest
    --scope user means every project on your computer gets them. If one says it already exists (you added Playwright in an earlier lecture), that's fine.
  2. Check them: claude mcp list should show all three as Connected. Inside Claude Code, /mcp shows the same.
  1. setup-skills.shInstalls all four design skills, complete.
  2. front-end-agent.mdThe reusable front-end sub-agent.
  3. The build promptWhat we pasted into Claude Code.
  4. Example app_outline/Journey, style guide, user stories and wireframes for Liftlog.

Diagrams