managarten/apps/skilltree/CLAUDE.md

SkillTree

Gamified personal skill tracking app - like an RPG skill tree for real life.

Overview

Track your skills, earn XP through activities, and level up your abilities across different life domains.

Tech Stack

• Web: SvelteKit + Svelte 5 + Tailwind CSS
• Storage: IndexedDB (offline-first, no backend needed)
• State: Svelte 5 runes ($state, $derived)

Development

# Start development server (port 5195)
pnpm dev:web

# Or from monorepo root
pnpm --filter @skilltree/web dev

Project Structure

apps/skilltree/
├── apps/
│   └── web/                 # SvelteKit web app
│       ├── src/
│       │   ├── lib/
│       │   │   ├── components/  # UI components
│       │   │   ├── services/    # IndexedDB storage
│       │   │   ├── stores/      # Svelte 5 reactive stores
│       │   │   └── types/       # TypeScript types
│       │   └── routes/          # SvelteKit routes
│       └── static/              # Static assets
└── package.json

Features

MVP (Current)

• Skill creation with name, description, and branch
• Six skill branches: Intellect, Body, Creativity, Social, Practical, Mindset
• XP system with 6 levels (0-5)
• Activity logging with XP rewards
• Stats overview (total XP, skills, highest level, streak)
• Offline-first with IndexedDB
• Branch filtering
• Recent activities feed

Planned

• Skill editing
• Skill tree visualization (graph view)
• Skill dependencies/prerequisites
• Achievements/badges
• Data export/import
• Cloud sync (optional)

Data Model

Skill

interface Skill {
  id: string;
  name: string;
  description: string;
  branch: SkillBranch;
  parentId: string | null;
  icon: string;
  color: string | null;
  currentXp: number;
  totalXp: number;
  level: number;
  createdAt: string;
  updatedAt: string;
}

Levels

Level	Name	XP Required
0	Unbekannt	0
1	Anfänger	100
2	Fortgeschritten	500
3	Kompetent	1,500
4	Experte	4,000
5	Meister	10,000

Branches

Branch	Icon	Color	Description
Intellect	brain	blue	Knowledge, languages, science
Body	dumbbell	red	Fitness, sports, health
Creativity	palette	pink	Art, music, writing
Social	users	purple	Communication, leadership
Practical	wrench	orange	Crafts, cooking, tech
Mindset	heart	emerald	Meditation, focus, resilience