personalized-learning

# 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](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 - HTML template: [references/html-template.html](references/html-template.html)