Lesson Skill
The Lesson Skill tells the AI how to build a complete, interactive HTML lesson from a single prompt. It is triggered automatically whenever you ask for a lesson, a didactic activity, a learning unit, or similar educational content — in any language.
Trigger phrases
The Skill activates on requests like:
- “Create a lesson on photosynthesis”
- “Build a math lesson for middle school students”
- “Didactic activity on the water cycle”
- “Make an interactive lesson on ancient Rome”
You never need to invoke it explicitly — the AI recognises the intent and calls the Skill in the background.
What the AI does
When the Lesson Skill is active, the AI follows a fixed workflow:
- Calls
list_componentsto see exactly which components are available under your license. - Creates a project via
create_projectwith the lesson title to obtain a stable bundle URL. - Writes the page header — a title and 3–5 learning objectives in the first person (“I will be able to…”).
- Outlines content sections and selects editorial components from the catalog for each one.
- Decides whether exercises add value and, if so, picks the right exercise types.
- Calls
get_component_docsfor every component it plans to use to get the exact API. - Calls
select_componentswith the full component list, then produces the final HTML artifact.
The AI delivers a finished, self-contained HTML file — not a plan or an outline.
Structure principles
| Principle | Detail |
|---|---|
| One topic per lesson | Each lesson covers a single concept or skill. |
| Content before exercises | Introduce the concept first, then let the learner practise. Interleave for complex topics. |
| Exercises are optional | A purely narrative or visual lesson is valid when active recall does not add value. |
| Vary interaction types | Mix formats to maintain engagement and test different cognitive skills. |
| Progressive difficulty | Recognition tasks first (multiple choice, true/false), then recall (fill-in-the-blank), then production (essay, sort). |
| Keep exercises short | Several focused exercises are better than one long assignment. A single <dna-assignment> rarely exceeds 5–7 questions. |
Editorial components
Editorial components are used to present content. The AI always calls get_component_docs before using any of them.
| Component | Tag | Best used for |
|---|---|---|
| Accordion | dna-accordion | Collapsible sections, FAQs, progressive disclosure |
| Tabs | dna-tabs | Parallel content, different perspectives or steps |
| Slideshow | dna-slideshow | Step-by-step sequences, image galleries with captions |
| Story Scroller | dna-story-scroller | Narrative scroll with media transitions |
| Timeline | dna-timeline | Chronological events, historical sequences |
| Flipcard | dna-flipcard | Term / definition pairs, front / back reveal |
| Glossary | dna-glossary-card | Inline term definitions, vocabulary reference |
| Comparison | dna-comparison | Before/after image sliders, side-by-side contrast |
| Spotlight | dna-spotlight | Annotated image with clickable hotspot callouts |
| Diagram | dna-diagram | Flow charts, concept maps, structured diagrams |
| Text Analysis | dna-text-analysis | Annotated text with labelled highlights |
| Zoom Panel | dna-zoom-panel | High-resolution image with zoom interaction |
| Gallery | dna-gallery | Grid or masonry image collections |
| Media Player | dna-media-player | Audio and video with accessible controls |
Exercise components
When the lesson includes active practice, exercises are rendered inside <dna-assignment>. Each exercise type maps to a specific learning objective.
| Learning objective | Exercise types |
|---|---|
| Recognise the correct answer | multiple_choice, true_false |
| Recall and produce language | fill_blanks, fill_blanks_options, drag_words |
| Understand structure / sequence | sort_words, sort_list |
| Locate information in a text | mark_words |
| Reflect and express | essay |
| Contextualise within rich media | video_quiz — timestamped questions inside a video |
| Vocabulary recall | crossword |
<dna-assignment> handles all learner interaction automatically — answer confirmation, feedback, retry, and score display. No custom JavaScript is needed.
Bundle format
Components are delivered as a Modula project — a stable CDN URL that always resolves to the current component selection.
| Environment | Format | How to use |
|---|---|---|
| Static HTML, no bundler | urls.iife | <script src="<url>"></script> at the end of <body> |
| Vite, webpack, Next.js… | urls.tar | Download and extract the bundle |
The script tag is placed at the end of <body>, before any other scripts that depend on the components.
Hard rules
The Lesson Skill enforces these constraints unconditionally:
- No custom interactive elements. Every interactive or editorial element must use a
dna-*component. Custom<div class="quiz">elements, hand-crafted button handlers, or any UI that replicates catalog functionality are forbidden. list_componentsis always called first. The AI never assumes which components are available.get_component_docsis called before every component. Attributes, slot names, and model shapes are versioned — the docs are authoritative.- If no component fits, the AI informs you and adapts to the closest available alternative. It never falls back to custom HTML or JavaScript.
- No CSS targeting
dna-*internals. Rules that setdisplay,position,flex,grid,gap, or that select children of adna-*element are removed. Layout intent is moved to wrapping native elements.