visual-knowledge-explainer

Convert educational content into structured HTML explainer pages with Mermaid diagrams.

Updated Feb 6, 2026
One-click install
npx skills add https://github.com/glfruit/gorin-skills --skill visual-knowledge-explainer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-knowledge-explainer
Source: https://github.com/glfruit/gorin-skills/tree/main/openclaw/visual-knowledge-explainer
Command: npx skills add https://github.com/glfruit/gorin-skills --skill visual-knowledge-explainer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Convert textbooks, training materials, notes, and articles into structured, visual explainer pages or slide decks that are easy to teach, review, and share.

Core Features & Use Cases

  • Automatically detect content type and render teaching-friendly HTML with hero, modules, and references
  • Support multiple templates and themes for textbooks, SOPs, knowledge explanations, workflows, and comparisons
  • Integrate Mermaid diagrams, code blocks, and modular layouts to improve clarity and learning outcomes
  • Typical use cases include creating lecture aids, training materials, study notes, and technical explanations

Quick Start

Drop a Markdown content file into the tool to generate a ready-to-share HTML explainer page.

Frequently Asked Questions about visual-knowledge-explainer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert markdown notes into a visual explainer page for teaching?

To convert markdown notes into a visual explainer page, drop the markdown file into the tool to generate a ready-to-share HTML page. The output enforces a teaching-focused structure with hero, body, and reference sections.

Can I automatically generate Mermaid diagrams from training materials?

Yes, you can generate Mermaid diagrams from training materials. The tool detects content type and leverages Mermaid diagrams where appropriate to improve clarity and learning outcomes in the output HTML.

What is the best way to structure technical explanations for lecture creation?

The best way to structure technical explanations for lecture creation is using templates with learning objectives, modules, examples, and references. This adapts content into a teaching-friendly format with modular layouts and code blocks.

Does this tool support creating SOP training materials with modular layouts?

Yes, it supports creating SOP training materials with modular layouts. It provides multiple templates specifically for SOPs, workflows, and comparisons, rendering them into teaching-friendly HTML.

How do I turn textbook content into a shareable HTML slide deck?

Turn textbook content into a shareable HTML slide deck by inputting the material to automatically detect its type. It renders a visual explainer page or slide deck with hero, modules, and references.

Are there specific templates for converting articles into knowledge notes?

Yes, there are specific templates for converting articles into knowledge notes. It supports multiple themes for knowledge explanations, integrating code blocks and modular layouts to improve review and sharing.