Quest Master — Design skill for Claude Code

Quest Master - React/Next.js Game App

A fully-featured game progression system built with Next.js, TypeScript, Tailwind CSS, and Framer Motion. This app demonstrates modern state management with Zustand and includes systems for player progress, skill development, and story progression.

🎮 Features

Player Progress System

• Level & Experience: Track player levels with dynamic experience requirements
• Playtime Tracking: Monitor total playtime across sessions
• Auto-Save: State persists to browser localStorage automatically
• Animated Progress Bars: Smooth Framer Motion animations

Skill Management

• Skill Unlocking: Unlock skills as you progress through the story
• Skill Leveling: Level up individual skills with prerequisite chains
• Dynamic Requirements: Skills can have prerequisites
• Visual Skill Cards: Beautiful animated skill displays with status indicators

Story Progression

• Chapter-Based Stages: Organize story into chapters and stages
• Stage Completion: Mark stages as complete and earn rewards
• Dynamic Rewards: Automatically unlock skills and award experience
• Completion Tracking: Track player progress through the narrative

🏗️ Project Structure

src/
├── app/
│   ├── layout.tsx          # Root layout with Tailwind styles
│   ├── page.tsx            # Main game page
│   └── globals.css         # Global styles with Tailwind
├── components/
│   ├── PlayerProgressCard.tsx   # Player stats & level display
│   ├── SkillsPanel.tsx          # Skill management UI
│   └── StoryStagesList.tsx      # Story progression UI
├── hooks/
│   └── usePersistentGameState.ts # localStorage persistence hook
├── lib/
│   └── storage.ts          # Storage utility functions
├── store/
│   └── gameStore.ts        # Zustand state management
└── types/
    └── index.ts            # TypeScript type definitions

🛠️ Technology Stack

• Framework: Next.js 16 with App Router
• Language: TypeScript