@dzhechkov/skills-edu-site

Gamified Educational Site Generator skill pack for Claude Code

Transform documentation, guides, and knowledge bases into interactive learning SPAs with quizzes, flashcards, achievements, progress tracking, and GitHub Pages deployment. Part of the Keysarium ecosystem.

Quick Start

# One-command install via npx
npx @dzhechkov/skills-edu-site

# Or install globally
npm install -g @dzhechkov/skills-edu-site
skills-edu-site init

# Install into a project that already has @dzhechkov/keysarium
npx @dzhechkov/skills-edu-site init

After installation, open Claude Code in your project directory and run /edu-site [topic or docs path].

What You Get

| Component | Count | Description | |-----------|-------|-------------| | Skill | 1 | edu-site-generator -- core skill with 8 pipeline modules | | Modules | 8 | Steps 00-07: Content Analysis through Verification | | References | 4 | Exercise patterns, gamification design, tech stack specs, deployment guide | | Examples | 1 | Sample generated site structure |

Everything is installed into your project's .claude/skills/edu-site-generator/ directory and works natively with Claude Code.

Commands

npx @dzhechkov/skills-edu-site                    # Full install (interactive, same as init)
npx @dzhechkov/skills-edu-site init               # Install skill pack
npx @dzhechkov/skills-edu-site init --force       # Overwrite existing files
npx @dzhechkov/skills-edu-site init --dry-run     # Preview without making changes
npx @dzhechkov/skills-edu-site update             # Update to latest version
npx @dzhechkov/skills-edu-site remove             # Clean uninstall
npx @dzhechkov/skills-edu-site list               # Show installed components
npx @dzhechkov/skills-edu-site doctor             # Health check

Pipeline

CONTENT       COURSE        DATA          SCAFFOLD
ANALYSIS  --> STRUCTURE --> GENERATION --> PROJECT
  |             |             |             |
  |             |             |             v
  |             |             |         COMPONENT     GAMIFICATION    DEPLOY       VERIFY
  |             |             |         GENERATION --> LAYER      --> CONFIG   --> & QA
  |             |             |             |             |             |           |
  v             v             v             v             v             v           v
Step 00     Step 01       Step 02       Step 03       Step 04       Step 05     Step 06-07
Analyze     Design        Generate      Create        Add quizzes   GitHub      Test &
source      learning      exercise      React+Vite    flashcards    Pages +     validate
docs        modules       data JSON     SPA scaffold  achievements  deployment  output

Usage in Claude Code

# Generate an educational site from documentation
/edu-site ./docs/api-reference.md

# Generate from a topic description
/edu-site "Kubernetes fundamentals for developers"

# Generate from multiple source files
/edu-site ./docs/

Features

• 6 Exercise Types -- Interactive learning activities with instant feedback
• Achievement System -- Unlock badges and track mastery across modules
• Progress Tracking -- Persistent state with Zustand, per-module completion
• Dark Mode -- Full dark/light theme toggle with system preference detection
• Final Assessment -- Comprehensive test covering all modules
• Responsive Design -- Mobile-first, works on all screen sizes
• SEO Optimized -- Meta tags, Open Graph, structured data

Exercise Types

| Type | Description | |------|-------------| | Quiz | Multiple-choice and true/false questions with explanations | | Flashcards | Flip-card interface for concept memorization | | Matching | Drag-and-drop term-to-definition matching | | Drag-to-Order | Arrange items in correct sequence (steps, priorities) | | Command Builder | Construct CLI commands or code snippets from parts | | Scenario Game | Decision-tree scenarios with branching outcomes |

Each exercise type supports difficulty levels, hints, and detailed explanations.

Output Structure

The generated project is a complete SPA ready for deployment:

edu-site-output/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   ├── exercises/          # 6 exercise type components
│   │   ├── layout/             # Header, Footer, Sidebar, ThemeToggle
│   │   ├── gamification/       # Achievements, ProgressBar, ScoreBoard
│   │   └── assessment/         # FinalAssessment component
│   ├── data/
│   │   ├── modules.json        # Course structure and content
│   │   ├── exercises.json      # All exercise data
│   │   └── achievements.json   # Achievement definitions
│   ├── stores/
│   │   └── useProgress.js      # Zustand progress store
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── Module.jsx
│   │   └── Assessment.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css               # TailwindCSS v4 styles
├── index.html
├── package.json
├── vite.config.js
└── tailwind.config.js

Tech Stack

| Technology | Version | Purpose | |-----------|---------|---------| | React | 19 | UI framework | | Vite | Latest | Build tool and dev server | | TailwindCSS | v4 | Utility-first CSS framework | | Zustand | Latest | Lightweight state management | | React Router | v7 | Client-side routing |

Integration with Keysarium

Edu Site Generator works standalone but integrates seamlessly with @dzhechkov/keysarium:

# Install Keysarium first (optional)
npx @dzhechkov/keysarium init

# Then add Edu Site -- it detects Keysarium automatically
npx @dzhechkov/skills-edu-site init

When installed alongside Keysarium, the edu-site-generator skill is available as part of the full Keysarium toolkit and can generate educational sites from research artifacts produced by the Casarium pipeline.

Requirements

• Claude Code CLI -- installed and configured (installation guide)
• Node.js >= 16.0.0 -- required for the npm install method
• npm -- required to build the generated project (npm install && npm run dev)

License

MIT

Links

• GitHub: https://github.com/dzhechko/product-keysarium-2026
• Issues: https://github.com/dzhechko/product-keysarium-2026/issues
• npm: https://www.npmjs.com/package/@dzhechkov/skills-edu-site
• Keysarium: https://www.npmjs.com/package/@dzhechkov/keysarium