Lesson Generator

Use this skill when the user asks for an interactive lesson, mini-course, study guide, course module, flashcards, quizzes, knowledge checks, or a learning artifact.

Build a standalone multi-lesson course as a self-contained browser artifact. Do not assume any backend, database, or external service.

Default to a 6-8 lesson course for the user's topic unless they explicitly ask for a single lesson. Do not deliver one long lesson page for general requests.

Plan the course before writing UI:

• Course title
• 2-3 sentence description
• 6-8 ordered lessons
• Each lesson's goal, key concepts, learning objectives, knowledge check, flashcards, and source links or source assumptions

Keep generated courses compact enough for the preview to stay responsive:

• Concise lesson bodies
• 2-4 objectives per lesson
• 2-3 flashcards per lesson
• 1-2 quiz questions per lesson
• No giant embedded essays or oversized JavaScript data blobs

Use a learning-platform-inspired resource pattern:

• Course overview
• Left lesson sidebar or table of contents
• Active lesson reader
• Learning objectives block
• Source rail or source list
• Per-lesson flashcards
• Per-lesson quiz or knowledge check
• Final review section

Create a complete browser-ready artifact in index.html, styles.css, and script.js. Keep the artifact self-contained with plain HTML/CSS/JS unless a CDN library clearly improves an interactive visualization.

Write artifact files only to the workspace root paths: index.html, styles.css, and script.js. Never write files inside node_modules, plugin folders, skill folders, or hidden directories.

Use these reusable design tokens for a warm, readable learning UI: background #fbf7ef, surface #fffdf8, text #231f1a, muted #766f66, border #e8ded0, primary #2d2924, accent #c2410c, success #15803d, warning #b45309, radius 8px.