Sowrasree Banerjee
Get in touch
← Back to portfolio
Claude Code Skill

therapist-site-scaffold

A Claude Code skill that scaffolds complete therapist/wellness practice websites with Next.js, TypeScript, and static content—no CMS required.

Next.jsTypeScriptTailwind CSSAutomation
View Example →Live Demo →

Overview

This skill generates the repeatable skeleton for therapist and wellness-practice websites: page structure, routing, shared layout components, and a single theme file for per-client customization. Content is seeded as clearly-marked placeholder copy so the site renders fully on first run.

The skill drops CMS complexity entirely—everything is static TypeScript/TSX with placeholder content. The user rewrites copy and swaps the theme values afterward as "the delta."

Tech Stack (Fixed)

  • →Next.js (App Router) with TypeScript
  • →Tailwind CSS for styling
  • →next/font for font loading (one-line typography swaps)
  • →Vercel deployment-ready

Standard Page Set

/

Home — hero, value prop, brief intro, CTA to book

/about

Therapist bio, credentials, approach/philosophy

/services

Modalities/session types offered, format (in-person/online)

/faqs

Accordion of common questions

/book-a-session

Booking CTA — embed or link out

/contact

Contact form or details, location/hours

/privacy-policy

Standard privacy policy scaffold

/terms-of-service

Standard terms scaffold

/cancellation-policy

Session cancellation/rescheduling policy

How It Works

1

Ask for Delta Inputs

Collects practice name, primary brand color + accents, typography direction, page additions/removals, and booking integration preference.

2

Scaffold Page Structure

Generates all routes under app/ with shared layout (Nav, Footer) and reusable section components.

3

Create Theme Architecture

Sets up lib/theme.ts for brand colors/fonts and lib/site-config.ts for practice details—the two primary delta files.

4

Seed Placeholder Content

Fills every page with realistic content marked TODO(content) wherever real copy is needed.

5

Confirm & Summarize

Reports what was scaffolded, where to customize (theme + config files), and provides a TODO(content) checklist.

Shared Architecture

  • →app/layout.tsx — Root layout wiring theme, Nav, Footer
  • →components/layout/ — Nav.tsx, Footer.tsx shared across pages
  • →components/sections/ — Reusable blocks (Hero, CTA, etc.)
  • →lib/theme.ts — Brand colors & fonts (primary delta file)
  • →lib/site-config.ts — Practice name, contact info (secondary delta file)

Placeholder Content Convention

Every page renders with realistic-but-fake copy on first generation—never lorem ipsum, never blank sections. Every block needing real content is marked:

{/* TODO(content): replace with actual practice tagline */}
<h1>Compassionate therapy for anxiety, grief, and life transitions</h1>

At the end of scaffolding, grep for TODO(content) to get a flat checklist of what needs real copy, grouped by page.

Reference Implementation

Mind Craft Wellness is the reference implementation. View the source on GitHub or see it live to understand the complete structure.

GitHub Repository →View Live Demo →