Step 1: Starting

Set up the project with your framework of choice.

Create the Project

mkdir ~/Desktop/Playground
cd ~/Desktop/Playground
claude

First Prompt

I want to build a component playground/documentation site.

What it does:
- Shows my UI components with live examples
- Each component has interactive controls to change props
- Shows the code for each component
- Clean, documentation-style layout

I prefer [React/Svelte] — help me choose if unsure.

Start with the basic project setup and a simple landing page.

Framework Setup

Claude will set up either:

• React with Vite or Next.js
• Svelte with SvelteKit or Vite

Either works well for this project.

Run the Dev Server

You should see a basic page in your browser.

Understand the Structure

Explain the project structure.
Where do components go?
Where does documentation content go?

Plan the Layout

Plan the documentation layout:
- Sidebar with component list
- Main area showing selected component
- Component preview at top
- Props controls below
- Code snippet at bottom

Checkpoint

• Project created
• Framework chosen and set up
• Dev server running
• Layout plan in mind

What You Learned

• Setting up modern frontend projects
• Framework options and trade-offs
• Documentation site structure

Tip: A component playground benefits from consistent design tokens. Consider adding the Design System skill file to your project — it teaches Claude to use a proper spacing scale, color tokens, and typography hierarchy across all components.

Exercises

1. Run the three setup commands (mkdir, cd, claude) and paste the First Prompt exactly — let Claude scaffold the project and pick your framework.
2. Start the dev server and confirm a basic page loads in your browser before continuing.
3. Send the "Explain the project structure" prompt and write down where components live and where documentation content goes — you'll need both in Step 2.