Personalized Learning
Purpose
- Turn a learning request into a structured teaching deliverable.
- Support topic scoping, outline design, section writing, instructional visuals, and final packaging.
- Use this skill for systematic learning tasks, not for unrelated coding work, casual chat, or simple copy edits.
Preparation
- Read references/html-template.html before writing so the structure and styling stay aligned with the intended page layout.
- Infer the learner's background conservatively from context when it is not stated. Prefer clarity over unnecessary density.
Workflow
1. Understand the learning request
- Identify the topic, learning goal, learner background, likely use case, and tone.
- If the learner profile is ambiguous, choose the simplest framing that still respects the topic.
2. Plan the outline internally
Create a short internal outline and do not show it separately unless the user asks for it.
- One clear overall title
- Up to 10 section titles in a logical progression
Outline rules:
- Keep titles focused on the knowledge itself.
- Avoid filler such as "Chapter 1," "Study Plan," or other low-information labels.
- Make each section distinct and order them so understanding builds step by step.
3. Write every section completely
Every outline section must have a matching full section in the final output.
Each section should include:
- the core concept, mechanism, or principle
- at least one explanatory visual using
svg or canvas - an example, analogy, or realistic scenario
- a common mistake, edge case, or misconception
- a short wrap-up that connects naturally to the next section when helpful
Writing rules:
- Stay within the boundary of the current section title.
- Adjust terminology, pacing, and examples to the learner's background.
- Use plain, natural language and break difficult ideas into smaller steps.
4. Design instructional visuals
- Use visuals to explain relationships, structure, flow, timelines, or state changes.
- Prefer
svg for static diagrams. - Use
canvas only when motion or step-by-step change genuinely improves understanding. - Keep labels concise and let the visual do most of the explanatory work.
- Inline all styles, scripts, graphics, and animation logic when producing HTML so the result remains self-contained.
5. Assemble the final deliverable
- Default to one complete HTML document that follows the template structure.
- If the user explicitly requests another output format, keep the same teaching workflow but adapt the final packaging to that format.
- Ensure the navigation and body stay perfectly aligned: every planned section appears in both places with full content.
- When the final format is HTML, save it as an actual
.html file and provide that file to the user.
For HTML output:
- Left side: clickable outline navigation with current-section highlighting
- Right side: full lesson content for every planned section, including headings, prose, and visuals
Output Rules
- Return only the final deliverable, without conversational framing such as "Here is your page" or "I will generate."
- If the output is HTML, make sure the user receives the generated
.html file rather than only a pasted code block. - Keep the result suitable for long-form reading and visually restrained.
- Make sure no section from the outline is missing from the final content.
Resource