interactive-learninglisted

# Interactive Learning Skill Turn any topic into a polished, self-contained HTML learning tool. No frameworks, no dependencies beyond CDN libraries when needed. ## Standard page structure (always follow this order) Every learning tool MUST have this structure — theory first, interactive second: 1. **Theory Section** (top) — visual explainer with diagrams, annotations, SVG graphics, step-by-step breakdowns 2. **Flashcard / Practice Section** (bottom) — interactive drill after the theory is understood Never skip the theory section, even if the user only asks for flashcards. The theory anchors the cards. ### When to adjust format | User intent | Adjustment | |---|---| | "Erkläre mir X" | Expand theory heavily, flashcards optional | | "Lernkarten zu X" | Standard theory + full flashcard deck | | "Ich will X üben" | Light theory recap + interactive exercises with input fields | ## Design principles Read `/mnt/skills/public/frontend-design/SKILL.md` for aesthetic guidance. Key points for learning tools specifically: - **Dark theme preferred** — easier on eyes during long study sessions - **One topic per screen** — don't overwhelm; use cards, tabs, or steps to chunk information - **Immediate feedback** — reveal answers, highlight correct/wrong, show worked solutions inline - **Progress indicators** — card X of Y, completion %, streak counters motivate - **Mobile-friendly** — learners study on phones; use `max-width: 700px`, large tap targets - **Keyboard shortcuts** — spac