learning-dashboard

Generate self-contained offline HTML learning dashboards with tabs, concept maps, flows, and quizzes.

Updated Apr 14, 2026
One-click install
npx skills add https://github.com/amitkarpe/agent-skills --skill learning-dashboard-amitkarpe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: learning-dashboard
Source: https://github.com/amitkarpe/agent-skills/tree/main/archive/skills-20260611-html-overlap/learning-dashboard
Command: npx skills add https://github.com/amitkarpe/agent-skills --skill learning-dashboard-amitkarpe

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Dense technical content such as AWS architecture, codebases, incident reports, and long articles is hard to absorb as plain text. This Skill converts that material into a single offline HTML dashboard that presents the same knowledge through multiple visual formats for faster scanning and better recall. ## Core Features & Use Cases - Multi-format learning loop: Presents each topic as a 30-second summary, concept map, workflow flow, comparison, decision guide, deep dives, and recap quiz in one file. - Offline self-contained output: Produces valid HTML with inline CSS and minimal vanilla JavaScript, no external fonts, CDNs, or chart libraries, with responsive and print styles. - Reusable design system: Ships a Midnight dark-theme template, component library, AWS/DevOps guidance, and a scaffold generator script for consistent output. - Use Case: Paste a dense Terraform module README or an AWS incident postmortem and receive a single learning_dashboard_<topic>.html file with sticky navigation, traffic-light decision guide, collapsible details, and a reveal-answer quiz. ## Quick Start Use the learning-dashboard skill to turn this document into a self-contained Midnight Learning Dashboard HTML file.

Frequently Asked Questions about learning-dashboard

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

FAQPage Schema
How do I create an HTML learning dashboard from technical documentation?▼

Provide the source content and request a learning dashboard. The output is a single self-contained HTML file with a hero summary, concept map, workflow, comparison, decision guide, collapsible deep dives, and a recap quiz, all styled with a dark Midnight theme.

What output formats does the learning dashboard support?▼

Three modes exist: a single dashboard HTML file as the default, a multi-page folder with index.html and module pages for large courses or codebases, and a compact dashboard limited to five to seven sections for quick learning.

Does the generated dashboard require internet access or external libraries?▼

No. The HTML uses inline CSS and minimal vanilla JavaScript only, with no external fonts, CDNs, remote images, Mermaid runtime, or Chart.js. It works fully offline and includes responsive mobile and print styles.

Can I use this for AWS architecture or codebase explanations?▼

Yes. A dedicated reference covers AWS and DevOps dashboards, including control plane versus data plane views, IAM and trust boundaries, failure modes, validation checklists, rollback plans, and codebase file maps with entry points and data flow.

When should I not use a learning dashboard?▼

Avoid it when a short direct answer is sufficient and no durable learning artifact is needed. It is designed for dense, technical, or hard-to-retain material where repeated visual formats improve understanding and recall.