Week 1: UIGen Feature Sprint - Claude Code Study

SITUATION

You've joined a startup on day one and inherited the UIGen project - an AI-powered React component generator. Your PM has requested three features to be added. Implement them in order of priority.

🧠

Core Principle: Memory-Driven Development

When you encounter errors, use # command to add learnings to CLAUDE.md. This helps Claude avoid repeating the same mistakes. This process is part of your evaluation!

PROJECT SETUP

Download UIGen Project

Click to download uigen.zip directly

Terminal

# 1. Extract the downloaded zip
unzip uigen.zip -d my-uigen

# 2. Install dependencies
cd my-uigen
npm install

# 3. Run setup (creates .env file)
npm run setup

# 4. Start development server
npm run dev

💡

First Step

Run /init to analyze the project and generate CLAUDE.md before starting.

🔒

Challenge Details Locked

Start your timer to reveal the challenge requirements, scoring rubric, and submission form.

Your time will be recorded for the leaderboard ranking.

FEATURE STAGES

1

Clear All Files

Required ~20 min

Add a "Clear All" button with confirmation dialog to reset all generated files.

Implementation Guide

File to modify: src/components/HeaderActions.tsx

Imports needed:

import { Trash2 } from "lucide-react"
import { useFileSystem } from "@/lib/contexts/file-system-context"
import { Dialog, DialogContent, DialogHeader, DialogTitle,
         DialogDescription, DialogFooter } from "@/components/ui/dialog"

Key code:

const { reset } = useFileSystem()
const [showClearDialog, setShowClearDialog] = useState(false)

// Button: <Button onClick={() => setShowClearDialog(true)}>
//           <Trash2 /> Clear All
//         </Button>

// In handleClear: reset() then setShowClearDialog(false)

Checklist

☐ Trash2 icon button in header
☐ Dialog with warning message
☐ "Delete All" calls reset()
☐ "Cancel" closes without action

Reference

Check these existing files for patterns:

AuthDialog.tsx - Dialog usage
file-system-context.tsx - reset() function

2

Download as ZIP

Required ~25 min

Export all generated files as a downloadable ZIP archive.

Implementation Guide

File to modify: src/components/HeaderActions.tsx

Install package: npm install jszip

Imports needed:

import JSZip from "jszip"
import { Download } from "lucide-react"
import { useFileSystem } from "@/lib/contexts/file-system-context"

Key code:

const { getAllFiles } = useFileSystem()

async function handleDownload() {
  const files = getAllFiles()  // Map<string, string>
  const zip = new JSZip()

  files.forEach((content, path) => {
    zip.file(path.slice(1), content)  // Remove leading "/"
  })

  const blob = await zip.generateAsync({ type: "blob" })
  const url = URL.createObjectURL(blob)
  const a = document.createElement("a")
  a.href = url
  a.download = "uigen-export.zip"
  a.click()
}

Checklist

☐ JSZip installed
☐ Download icon button in header
☐ getAllFiles() retrieves files
☐ ZIP downloads automatically

Note

getAllFiles() returns Map<string, string>

Keys are paths like "/src/App.tsx"

Use path.slice(1) to remove leading slash

3

Keyboard Shortcuts

Bonus ~25 min

Add Cmd/Ctrl+K command palette for quick actions.

Implementation Guide

Create new file: src/components/CommandPalette.tsx

Or modify: src/app/page.tsx

Imports needed:

import { useEffect, useState } from "react"
import { CommandDialog, CommandInput, CommandList,
         CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"

Key code:

const [open, setOpen] = useState(false)

useEffect(() => {
  const handler = (e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
      e.preventDefault()
      setOpen(true)
    }
  }
  window.addEventListener("keydown", handler)
  return () => window.removeEventListener("keydown", handler)
}, [])

// CommandDialog with CommandGroup containing:
// - CommandItem onSelect={() => handleClear()}>Clear All
// - CommandItem onSelect={() => handleDownload()}>Download ZIP

Checklist

☐ Cmd/Ctrl+K opens palette
☐ "Clear All" command works
☐ "Download ZIP" command works
☐ ESC closes palette

Reference

Existing command component:

src/components/ui/command.tsx

Based on cmdk library

CLAUDE.MD EXPECTATIONS

Your CLAUDE.md should document learnings from errors and discoveries. Good examples:

Example CLAUDE.md Entries

## UIGen Project Learnings

### Context Patterns
- FileSystemProvider must wrap components using useFileSystem()
- reset() clears files + selectedFile + triggers refresh

### Dialog Component
- Uses Radix UI, import from @/components/ui/dialog
- DialogContent contains all modal content

### File System API
- getAllFiles() returns Map<string, string>
- Paths have leading slash, remove with path.slice(1)

### Keyboard Events in React
- Always cleanup listeners in useEffect return
- Check e.metaKey (Mac) OR e.ctrlKey (Windows)

SCORING RUBRIC

Category	Points
Stage 1: Clear All Files Button (10) + Dialog (10) + Memory Record (5)	25
Stage 2: Download ZIP ZIP Creation (15) + Download (10) + Memory Record (5)	30
Stage 3: Keyboard Shortcuts (Bonus) Shortcut (10) + Palette UI (10) + 2+ Commands (5)	25
CLAUDE.md Quality Useful learnings, patterns documented, helpful tips	10
Code Quality TypeScript, existing patterns, error handling	10
Time Rank Bonus 1st: +20, 2nd: +17, 3rd: +14, 4th: +11, 5th: +8, 6th+: +5	+20
Total	100 +20

Passing Criteria

Minimum Pass

Stage 1 + Stage 2 completed (55 points)

Excellence

All 3 Stages + Quality CLAUDE.md (80+ points)

WHAT YOU'LL PRACTICE

📚

/init & CLAUDE.md

Initialize project context and build persistent memory.

/init

⚡

Plan Mode

Plan your approach before making changes.

Shift+Tab x 2

🧠

# Memory Mode

Record learnings when errors occur.

# Context requires Provider wrapper

🛠

Iterative Development

Error -> Learn -> Record -> Retry cycle.

Memory-Driven Development

UIGen Feature Sprint

SITUATION

PROJECT SETUP

Challenge Details Locked

FEATURE STAGES

Clear All Files

Implementation Guide

Checklist

Reference

Download as ZIP

Implementation Guide

Checklist

Note

Keyboard Shortcuts

Implementation Guide

Checklist

Reference

CLAUDE.MD EXPECTATIONS

SCORING RUBRIC

Passing Criteria

WHAT YOU'LL PRACTICE

/init & CLAUDE.md

Plan Mode

# Memory Mode

Iterative Development

Challenge Not Yet Started

SUBMIT YOUR WORK

📋 How to Submit

📋 Submission History