A zero-backend, static-file course framework that uses psychology-backed learning design and Claude Code as your personal learning agent.
LearnKit is a static-file course framework — no server, no account, no npm. You open an HTML file in your browser, follow structured lessons, and your progress saves locally. Authors use Claude Code AI skills to generate and improve courses in minutes.
Try it in 30 seconds:
git clone https://github.com/forhad-h/learnkit
cd learnkit
python3 -m http.server 8000 # use any free port — 8080, 3000, etc.Open http://localhost:8000/courses/cpp-drone/ to see a live example.
(Replace 8000 with whatever port you chose if 8000 is already in use.)
| I want to… | Go to |
|---|---|
| Follow an existing course | Getting Started → Option A |
| Build my own course with AI | Getting Started → Option B |
| Understand the framework | Project Structure |
| Contribute or improve content | Contributing |
LearnKit is a framework for building and following structured technical courses. It has two modes:
- Learner mode — follow an existing course with progress tracking, smart resume, and checklist-based milestones
- Author mode — use Claude Code as an agent to create, expand, and improve courses on any topic
The framework is intentionally simple: plain HTML, CSS, and JavaScript. No npm, no build step, no server needed. Your progress lives in your browser's localStorage and can be exported as a JSON file to commit to git, share, or move between machines.
This repo ships with a C++ drone engineering course as a reference example of what LearnKit can produce. It is not the product — the framework is. New courses on any topic can be created from the template in minutes, and the cpp-drone course may be replaced with a better showcase example as the framework matures.
When you discover a technique, mental model, or shortcut that makes something click — you can add it back to the course. The improve-lesson skill prompts you for exactly this. Your personal discoveries get embedded as "What worked for me" callouts directly in the module that benefited from them.
This is the compounding part: the course gets smarter as you learn.
- 3-state progress tracking — Pending / In Progress / Completed per module, saved in browser localStorage
- Smart "continue" banner — resumes the right module with the right verb based on your state
- Lesson memory — remembers which accordion panels you opened; scrolls back to your last position on revisit
- Checklist persistence — project milestone checkboxes survive page reloads
- Copy buttons — every code block gets an auto-attached Copy button
- Sidebar navigation — fixed left nav with live status dots and progress bar, fully mobile-responsive
- Export / import state — download your progress as JSON, commit it to git, import on another machine
- Git-based state sync — each course's
states/directory holds named JSON snapshots; check them into your fork to sync across devices - Personalization — first-visit prompt asks your name; greetings and banners address you by name throughout the course
- Progress sharing via public URL — one-click share via anonymous GitHub Gist (no account required); paste URL on any device to restore your progress
Claude Code has four built-in AI skills for authoring. Ask Claude naturally, or use the skill name directly in conversation:
create-course— scaffold a complete new course from a conversationadd-lesson— add a new module to an existing courseimprove-lesson— improve content of a specific module; includes prompting for personal discoveriesimprove-framework— extend or fix the core LearnKit framework itself
git clone https://github.com/forhad-h/learnkit
cd learnkit
python3 -m http.server 8000 # any free port works: 8080, 3000, 5500, etc.Open http://localhost:8000/courses/cpp-drone/ to try the included example course (C++ drone engineering). If port 8000 is taken, pick any free port and update the URL accordingly. More courses will be added to courses/ as they're created.
Your progress saves automatically in your browser. No account, no login.
- Fork this repo on GitHub — your fork is your course's home
- Clone your fork locally
- Open Claude Code in the project directory:
claude(or open via VS Code extension) - Ask Claude: "create a course on [your topic]" — it will gather requirements and generate all the files
- Commit your new course files to your fork
- Enable GitHub Pages on your fork to publish it for free
git clone https://github.com/<your-github-username>/learnkit
cd learnkit
claude # opens Claude Code
# In Claude Code: ask "create a course on [your topic]"After cloning and opening Claude Code (claude in the terminal):
Step 1: Ask Claude "create a course on [topic]"
Claude will ask you for your topic, audience, modules, and time estimate.
It creates all the files under courses/your-topic/:
config.js, index.html, pages/, states/
Step 2: Review the generated content
Open http://localhost:8000/courses/your-topic/ and check the dashboard.
(Use whatever port you started the server on — 8000 is just the default.)
Ask Claude to improve any module you want fleshed out.
Step 3: Commit your course
git add .
git commit -m "add course: Your Topic"
git push
Step 4: Publish on GitHub Pages
Go to your repo settings → Pages → Source: main branch / root
Your course is live at https://<your-github-username>.github.io/learnkit/courses/your-topic/
learnkit/
│
├── core/ ← shared framework — never course-specific
│ ├── js/framework.js ← all runtime logic
│ └── css/styles.css ← design system (136 CSS variables)
│
├── courses/
│ ├── template/ ← copy this to start a new course
│ │ ├── config.js ← fill in: title, icon, modules, colors, prereqs
│ │ ├── index.html ← generic shell — no edits needed
│ │ ├── pages/
│ │ │ └── module-template.html ← boilerplate for a module page
│ │ └── states/
│ │ └── manifest.json
│ │
│ └── cpp-drone/ ← example course (C++ drone engineering)
│ ├── config.js ← reference for what a filled-in config looks like
│ ├── index.html
│ ├── pages/
│ │ ├── module-1.html … module-10.html
│ │ └── settings.html
│ └── states/
│ └── manifest.json
│
└── .claude/
├── CLAUDE.md ← Claude Code project instructions
└── commands/
├── create-course.md
├── add-lesson.md
├── improve-lesson.md
└── improve-framework.md
| File | Purpose |
|---|---|
courses/{name}/config.js |
Course-specific data: title, icon, stateKey, modules list, colors, prerequisites, goal. The only file you edit to define a course. |
courses/{name}/index.html |
Dashboard shell. Identical across all courses — initDashboard() populates it from config.js. |
core/js/framework.js |
All runtime logic. Reads window.COURSE_CONFIG. Shared by every course. Never edit per-course. |
core/css/styles.css |
Design system. 136 CSS custom properties. Monospace fonts. Dark code blocks. Responsive. |
pages/settings.html |
Export/import/clear state. Identical across all courses. |
states/manifest.json |
Index of named JSON snapshots for git-based sync. |
LearnKit has zero runtime dependencies by design.
| Concern | How it's solved |
|---|---|
| No server needed | Pure static files. Open index.html directly or via python3 -m http.server. |
| No database | All state lives in browser localStorage. Exported to JSON files when you want portability. |
| No build tool | No npm, no webpack, no compilation. Edit HTML/JS/CSS and refresh. |
| No account | Nothing to log in to. Nothing sent anywhere. |
| Multi-device sync | Export state as JSON, commit to your git fork, import on the other device. |
| Deployment | GitHub Pages, Netlify, Vercel, any static host, or a USB drive. |
| Backup | git commit your course's states/ directory. Your progress is in version control. |
This is intentional. The target audience is developers who understand files and git. Backend infrastructure would add zero value and introduce a dependency that breaks when it goes down.
Each module in config.js can declare an estimated duration. Displayed on module cards and in the nav footer. Helps with session planning ("I have 45 minutes — what can I finish?").
Track time spent per module (session start → status change to completed). Display average pace vs. estimate. Purely client-side; stored in the state JSON.
After marking a module completed, a callout appears with 2-3 comprehension questions. These are authored at course-creation time by Claude and embedded directly in the HTML. No API calls at runtime.
When writing or generating module content, apply these patterns:
- What — a one-line statement of what this module covers
- Why — why this matters to the learner's goal
- How — the actual content in lessons
- Verify — a checklist or code snippet they can run to confirm understanding
<!-- Accordion lesson (collapsible, state-remembered) -->
<div class="lesson" id="s3-1">
<div class="lesson-header" onclick="toggleLesson('s3-1')">
<div class="lesson-title">3.1 Your Lesson Title</div>
<svg class="lesson-chevron" ...>...</svg>
</div>
<div class="lesson-body">
<!-- content here -->
</div>
</div>
<!-- Info callout -->
<div class="callout callout-info">Key concept or context.</div>
<!-- Warning callout -->
<div class="callout callout-warning">Something that trips people up.</div>
<!-- Success callout / personal discovery -->
<div class="callout callout-success">💡 What worked for me: ...</div>
<!-- Checklist (state is persisted) -->
<ul class="checklist">
<li><input type="checkbox" id="unique-id" /> Task description</li>
</ul>
<!-- Code block (gets Copy button automatically) -->
<pre>your code here</pre>| Tag | Color | Meaning |
|---|---|---|
Read first |
blue | Required context before doing anything |
Do first |
green | Setup/installation — unblock yourself |
Core skill |
blue | Must internalize, will use repeatedly |
Memorize this |
blue | Pattern or API worth committing to memory |
Skip if confident |
orange | Optional for those with prior experience |
Core framework |
purple | Foundational tool/concept for this domain |
Month 3+ |
amber | Advanced — return to this after basics are solid |
Portfolio booster |
purple | Externally visible achievement |
Track progress |
green | Meta — managing your own learning |
Quick reference |
blue | Reference material, not linear reading |
This project is designed to get better as people use it.
Framework improvements — if you improve the core UX (new component, better mobile behavior, new feature), open a PR or ask Claude to improve the framework and commit the result.
Content improvements — if something in a course module is wrong, unclear, or missing a better example, ask Claude to improve the lesson and commit. The skill specifically asks what clicked for you personally — those insights are the most valuable additions.
New courses — ask Claude to create a course on any topic, and add it under courses/. If it's high quality it may replace cpp-drone as the primary showcase example. Anyone can fork the repo and host their own course collection.
This is not a consumer product. It assumes:
- You have git installed and know how to fork/clone
- You can run a terminal command
- You understand that files on your machine are real and persistent
- You're comfortable with "your browser is the app"
If that's you, LearnKit gives you something polished consumer tools don't: full ownership, zero subscription, and a learning environment you can extend with AI.
These features are partially implemented but hidden from the UI until they can be made reliable:
Share Progress via Public Link (GitHub Gist)
GitHub's Gist API now requires authentication even for public gist creation — anonymous POST to /gists returns 401. The shareProgressAsGist() function in core/js/framework.js and the "Share Progress (Public Link)" UI in pages/settings.html are fully implemented but hidden. To re-enable: add a GitHub Personal Access Token (PAT) flow in the settings page, or proxy the request through a small serverless function.
States Directory (git-based sync)
The states/manifest.json workflow lets you sync progress across machines via git. It works correctly when served over HTTP, but requires manual steps (download → rename → commit → push) that are too rough for a general audience. To re-enable: improve the UX (e.g. drag-and-drop into the states folder, auto-detect via a local server helper) and update the workflow steps in pages/settings.html.