Step 7: Build the Frontend Pages

Scaffold each page with proper server / client component boundaries.

What you're doing in this step

Get the server / client split right at scaffold time — retrofitting later means hunting down 'use client' directives that broke performance.

Recommended prompts

Use one of these to do the work in your IDE

Open the template to read it in full. Click Copy prompt to grab it (with your stack values pre-filled where they apply) — then paste into Claude Code, Cursor, or wherever you build.

Primary recommendation 20 min

Next.js Page + Component Scaffolder

Scaffold a Next.js 15 App Router page with server component, client interactivity, loading state, and tests.

nextjsreacttypescripttailwindshadcn-ui

View template

Template· Template 10 min

shadcn/ui Component Builder

Generate a custom React component composed of shadcn/ui primitives with proper accessibility and types.

Use this when: You're building a single component, not a whole page

reacttypescripttailwindshadcn-ui

View template

When you're done

Verify these in your own work before moving on

This is a checklist for you to mentally tick off in your repo and IDE — the site doesn't track it, you do.

Each PRD user journey has at least one page
Loading and error states present on every dynamic page
Client components are leaf-level only (no client-around-server)
Auth checks run server-side

Common pitfalls

What goes wrong at this step

'use client' at the page level — kills RSC benefits for the entire subtree
Skipping loading.tsx — your TTFB looks worse than it is

← Previous step

Use one of these to do the work in your IDE

Next.js Page + Component Scaffolder

shadcn/ui Component Builder

Verify these in your own work before moving on

What goes wrong at this step

Command Palette