Obsidian Interactive Explainer

name obsidian-interactive-explainer description Create interactive HTML explainer pages for learning concepts, designed to work inside Obsidian with the HTML Reader plugin. Use this skill whenever a user wants to understand a technology, concept, framework, architecture, protocol, algorithm, or any knowledge topic AND wants it as a visual/interactive learning resource. Trigger when the user says things like: 'explain X as an interactive page', 'make me an Obsidian-compatible explainer for Y', 'I want to learn about Z visually', 'create an interactive guide about W', 'make a learning page for V'. Also trigger when the user asks about a concept and mentions Obsidian, interactive, visual learning, HTML explainer, or study material. Even if the user simply asks to 'explain something interactively' or 'make it visual for my notes', this skill should activate. Do NOT trigger for simple Q&A, code generation, or non-visual explanations. Obsidian Interactive Explainer Create beautiful, interactive HTML learning pages that render perfectly inside Obsidian's HTML Reader plugin. These pages help users deeply understand technical concepts through visual, hands-on exploration rather than passive reading. Core Constraint: No JavaScript Obsidian's HTML Reader plugin (Balance Mode) strips

<script> tags and blocks JS execution. Every interactive element must be built with pure CSS using the checkbox/radio hack pattern. This is the single most important rule — if the output contains any <script> tags, it will be broken in Obsidian. How CSS-Only Interactivity Works The pattern relies on hidden <input> elements paired with <label> elements: <!-- Hidden checkbox controls the state --> < input type = "checkbox" id = "toggle1" class = "hidden-toggle" > <!-- Label acts as the clickable trigger --> < label for = "toggle1" class = "visible-button" > Click me </ label > <!-- Content changes based on checked state via CSS --> < div class = "expandable-content" > This appears when toggled </ div > .hidden-toggle { position : absolute; opacity : 0 ; pointer-events : none; } .expandable-content { max-height : 0 ; overflow : hidden; transition : max-height 0.4s ease; } .hidden-toggle :checked + label + .expandable-content { max-height : 500px ; } Available interaction patterns (all CSS-only): Accordion / Expand-collapse : checkbox + :checked to toggle max-height Tabs : radio inputs with same name attribute, :checked ~ .panel selectors Hover reveals : :hover to show tooltips or extra info Progress steps : checkboxes that light up step indicators Card flips : :checked to trigger transform: rotateY(180deg) Before/after comparisons : :checked to change clip-path or opacity HTML structure rule : The <input> must be a sibling placed before the elements it controls, because CSS can only select forward siblings ( + or ~ ), never backwards. Workflow Phase 1: Understand What the User Wants to Learn Before building anything, clarify the topic through conversation. Ask about: The topic : What concept, technology, or system do they want to understand? Current knowledge level : Are they a complete beginner, or do they have some background? Specific curiosities : Is there a particular aspect they find confusing or want to focus on? Learning goal : Do they want a broad overview, deep dive into internals, comparison with alternatives, or practical how-to? Keep the questioning natural — often 1-2 focused questions are enough. If the user already gave enough context (e.g., "explain how TCP handshake works, I'm a backend developer"), skip unnecessary questions and start building. Phase 2: Structure the Explanation Organize the content into 4-7 sections that tell a coherent story: Hero / Title — Topic name, one-line description, context badge What is it? — Core concept in simple terms, with 2-3 concept cards How does it work? — Step-by-step flow, the main interactive section Key details — Hierarchy, components, or taxonomy (expandable items) Practical examples — Code snippets, config examples, use cases (tabbed) Best practices / Tips — Card grid with actionable advice Footer — Attribution, further reading suggestions Not every page needs all sections. Adapt the structure to the topic. Phase 3: Build the HTML Read the reference design file before writing code: → references/design-system.md — CSS variables, typography, component patterns Key principles: Dark theme by default (matches common Obsidian themes) Use Google Fonts via @import for typography (Noto Sans KR for Korean content, plus a monospace font for code) All colors as CSS variables for easy theming Smooth transitions on all interactive elements (0.3-0.5s) Mobile-friendly — use clamp() for font sizes, auto-fit grids Generous whitespace between sections Quality checklist before delivering: Zero <script> tags in the entire document All interactive elements use checkbox / radio + CSS :checked Hidden inputs use position: absolute; opacity: 0; pointer-events: none; All <input> elements appear before their controlled siblings in DOM order Fonts load via CSS @import (not <link> in <head> , which may be stripped) No localStorage , sessionStorage , or any Web API calls Content is accurate and well-structured for learning Korean text uses appropriate font (Noto Sans KR or similar) Phase 4: Deliver Save the file to /mnt/user-data/outputs/ with a descriptive filename like tcp-handshake-explainer.html . Use present_files to share with the user. Remind the user: Place the .html file in their Obsidian vault Open it with the HTML Reader plugin (Balance Mode is fine) All interactions work via clicking — no JS needed Language Match the user's language. If they write in Korean, the entire HTML page (headings, body text, labels, tooltips) should be in Korean. Code examples and technical terms can stay in English where conventional. Example Interaction User : "MCP가 뭔지 인터랙티브하게 설명해줘" Claude asks: "MCP(Model Context Protocol)에 대해 어느 정도 알고 계신가요? 전체 아키텍처를 처음부터 설명할지, 아니면 특정 부분(서버 구현, 클라이언트 연동 등)을 집중적으로 다룰지 정하고 싶어서요." User : "처음 들어봐서 전체적으로 알고 싶어" Claude builds a full explainer with: concept overview → architecture flow (interactive accordion) → server/client roles (expandable cards) → transport types (tabbed comparison) → practical setup (code block) → tips.