Vibe coding with LessonKit

Who this is for

Instructional designers, trainers, and builders who do not write React by hand—you’ll pair LessonKit with an AI editor and the CLI.

Used H5P before?

Ask your AI to follow LessonKit patterns and map activities using Coming from H5P? (e.g. “use Quiz like H5P Multiple Choice”). Capability list: H5P capability map.

These guides are for instructional designers, trainers, and builders who do not write React by hand. You will use an AI assistant in your editor (Cursor, VS Code + Copilot, Windsurf, etc.) and the LessonKit CLI to create and ship courses.

You do not need to understand TypeScript, hooks, or bundlers. You do need to:

  • Install Node.js 18+ (required for dev, build, and LMS packaging)

  • Follow prompts carefully and paste suggested commands into a terminal

  • Review AI-generated changes before publishing

What “vibe coding” means here

  1. Describe what you want in plain language (“a 3-lesson phishing course with a quiz at the end”).

  2. Let the AI edit src/App.tsx, lessonkit.json, and styles under your direction.

  3. Run npm run dev to preview, then npm run build and npm run package:scorm12 (or npx lessonkit package --target scorm12) to export.

  4. Upload the ZIP (or folder) your LMS admin gives you.

The AI is your implementation partner; LessonKit is the structure it should follow. For repeatable agent behavior, install Library Skills from the repo (./library-skills/install.sh --global or --project).

Guide outline

Step

Page

1

Getting started — install Node, create a project

2

Your first course — edit content without reading React

3

Prompting and workflows — prompts that work well

4

Shipping to an LMS — build, package, hand off

5

Troubleshooting — common fixes

Optional

Library Skills — install SKILL.md packs for Cursor / Claude Code

Golden rules for AI edits

  • Never remove courseId, lessonId, or checkId from components—the LMS depends on them.

  • Keep lessonkit.json in sync when you add lessons or quizzes (the CLI uses it for packaging).

  • Prefer small edits: one lesson at a time, then run npm run dev to verify.

  • Ask the AI to run terminal commands; you approve them in the terminal.

When you outgrow vibe coding, switch to the React developer guides.