learning-platform

Create structured interactive learning platforms for any field or subject. Use this skill whenever the user wants to build a learning site, educational course collection, study guide platform, or knowledge base about ANY topic — psychology, physics, history, cooking, music theory, programming, medicine, etc. Also use when the user wants to add topics to an existing learning platform, propose new topics, or generate educational content in the structured 6-content-per-topic format. Trigger on phrases like 'create a course about', 'build a learning platform', 'teach me about [broad field]', 'make an educational site', 'add a topic about', 'what topics should I learn next', or any request to generate structured educational material for a broad field.

Create structured, interactive learning platforms for any field — modeled after the business-101 architecture: a single-page app (SPA) that dynamically renders markdown content and interactive HTML tools, with no build step required.

How the Platform Works

The platform is a static site powered by a single index.html SPA. The README.md acts as the database — the SPA parses it at runtime to discover all topics and their content files. Each topic gets a folder under src/ with exactly 6 content files covering different learning angles. The only external dependency is marked.js for markdown rendering.

<cwd>/
└── platform-name/          # New directory created inside CWD
    ├── index.html          # SPA shell (from template)
    ├── README.md           # Topic registry — the SPA parses this
├── Makefile            # Local preview (make serve)
├── .nojekyll           # For GitHub Pages
└── src/
    ├── learning-roadmap.md       # Suggested learning order
    ├── glossary.md               # Key terms table
    ├── <topic-folder>/           # One folder per topic
    │   ├── <topic>_analysis.md       # In-depth professional analysis
    │   ├── <topic>_guide.md          # Beginner-friendly plain language guide
    │   ├── <topic>_cases.md          # Real-world case studies
    │   ├── <topic>_interactive.html  # Self-contained interactive HTML tool
    │   ├── <topic>_quiz.md           # Practice questions & self-assessment
    │   └── <topic>_resources.md      # Further learning resources
    └── cross-topic/              # Cross-topic integration analyses
        └── <case-name>.md

The SPA provides: hash-based routing, tabbed content viewer per topic, full-text search across all markdown, glossary with search integration, responsive card grid, and iframe embedding for interactive HTML tools.

Two Modes

Auto-detect: If no learning platform directory (containing index.html + README.md with topic structure) exists in the current working directory → Create mode. If one exists and the user's request targets it → Expand mode.

Create Mode

Step 1: Gather Requirements

Ask the user (skip what's already clear from their request):

  1. Field/subject: What field? (e.g., "psychology", "classical physics", "wine tasting")
  2. Language: What language for content? (default: English)
  3. Audience level: Target audience? (beginners, intermediate, advanced, mixed)
  4. External sources: Any specific materials (URLs, papers, textbooks) to incorporate? Or all from general knowledge?
  5. Scope: How many initial topics? (suggest 5-8 for a solid start)
  6. Project name: Platform directory name — a kebab-case slug derived from the subject (e.g., "psychology-101", "wine-tasting-guide"). This becomes the new directory created inside the current working directory to hold all platform content.
  7. Author info (optional): Ask for the user's name and contact info (e.g., email, website, or social link). Explain that this will be displayed in the footer of the platform's index.html page to credit the course creator. The user can skip this — if skipped, the footer will use a generic credit or omit author info entirely.

Step 2: Present Curriculum Plan for Approval

Before generating any content, present a structured plan:

## Proposed Curriculum: [Platform Name]

### Learning Roadmap
Suggested order with brief rationale for the sequence.

### Initial Topics (N topics)
For each topic:
- **Topic Name** — 1-sentence scope description
- **Interactive Tool Idea** — What the HTML interactive will do

### Cross-Topic Analyses (2-3)
- **Case Name** — Which topics it connects

### Glossary Scope
Estimated number of terms, categories.

### Color Scheme
Proposed colors that match the field's aesthetic.

Wait for approval. Iterate until the user is satisfied. Only then proceed to generation.

Step 3: Generate Platform

Once the plan is approved, create a new directory named after the project (e.g., psychology-101/) inside the current working directory. All generated files go inside this directory. Then generate in this order:

  1. index.html — Read the SPA template from assets/index-template.html in this skill's directory. Customize the CONFIG object and all __PLACEHOLDER__ strings:
  2. Platform title, subtitle, favicon SVG
  3. Color scheme (warm for humanities, cool for sciences, earthy for nature topics, etc.)
  4. All language strings (tab labels, search placeholder, loading text, error text, disclaimer, badges)
  5. Content type detection keywords in CONFIG.keywords matching the language
  6. Footer links — if the user provided author name/contact info, include it in the __FOOTER_HTML__ (e.g., "Created by Name — contact@example.com"). If skipped, use a generic footer without author attribution.

  7. Section headers matching what you'll use in README.md

  8. Makefile: makefile .PHONY: serve serve: python3 -m http.server 8000

  9. .nojekyll — Empty file

  10. README.md — Exact format the SPA parser expects: ```markdown # platform-name

Disclaimer about AI-generated content...

Description.

## Topics

### Topic Name

## Cross-Topic Analysis

### Case Name - Case Analysis — Description... ```

  1. src/learning-roadmap.md — Structured learning path with suggested order and connections

  2. src/glossary.md — Terms table by category: markdown # Glossary ## Category | Term | English | Definition | |------|---------|------------|

  3. Topic content — For each topic, generate all 6 files. Read references/content-guidelines.md for detailed instructions on each content type.

  4. Cross-topic analyses — Markdown files synthesizing insights across multiple topics

Generation Pace

Generate topics one at a time, completing all 6 files before moving to the next. After 2-3 topics, check with the user that the style and depth match expectations before continuing.

Expand Mode

Detect Existing Platform

Read README.md and index.html to understand: existing topics, language, naming conventions, content style.

Three Expand Actions

1. Add specific topic(s) — User says "add a topic about X" - Generate the topic folder with all 6 content files - Append to README.md with the new topic entry (matching existing format exactly) - Update glossary.md with relevant new terms - Optionally update learning-roadmap.md to place the new topic

2. Propose topics — User says "what should I learn next?" or "suggest more topics" - Analyze existing topics to understand coverage and gaps - Identify natural next steps, complementary areas, and missing foundations - Present 5-10 suggested topics with brief descriptions and rationale for each - Let the user pick which ones to generate

3. Add cross-topic analysis — User wants a case spanning multiple existing topics - Generate cross-topic markdown - Append to README.md cross-topic section

Updating README.md

Append entries in the exact format the SPA parser expects. Match whatever section headers and keyword conventions the existing platform uses. The parser relies on: - ## headers as section markers - ### headers as topic names - - [Link Text](path) — description as content links - Content type detection via keywords in link text/URL (or .html extension for interactive)

Key Principles

Content Quality

  • Analysis: Genuinely teaches — frameworks, models, expert perspectives, nuanced discussion. Not Wikipedia summaries.
  • Guide: Vivid everyday analogies. Makes concepts click for someone with zero background.
  • Cases: Real events with dates, names, numbers, source references. For fields without traditional cases, use historical discoveries, famous experiments, or worked examples.
  • Interactive: Genuinely useful tools, not decorative. Read references/content-guidelines.md for patterns.
  • Quiz: Mixed question types with detailed answer explanations.
  • Resources: Real, currently available books/courses/podcasts with difficulty ratings.

Interactive HTML — Must Be Self-Contained

  • All CSS in <style>, all JS in <script>, all data in JS variables
  • No external dependencies unless truly necessary
  • Works inside an iframe, responsive design
  • 3-5 interactive tools per page using tab navigation
  • Include hints/tooltips for discoverability

Adapting to the Field

Field Type Analysis Focus Guide Approach Interactive Ideas
Sciences Theories, formulas, experiments Analogies, visualizations Simulators, calculators
Humanities Schools of thought, debates Stories, relatable scenarios Timelines, concept maps
Practical Techniques, best practices Step-by-step walkthroughs Builders, planners
Arts History, theory, criticism Sensory descriptions Visual/audio explorers

File Naming

  • Topic folders: kebab-case (e.g., cognitive-biases/)
  • Files: topic-name_analysis.md, topic-name_guide.md, topic-name_cases.md, topic-name_interactive.html, topic-name_quiz.md, topic-name_resources.md
  • Cross-topic: case-name.md
  • For non-English platforms, you may use localized folder/file names if the user prefers — just ensure the README links match exactly

Reference Documents

Content Guidelines

Content Guidelines

Detailed guidelines for generating each of the 6 content types per topic.

1. In-Depth Analysis (_analysis.md)

Professional, comprehensive treatment. The core reference material.

Structure

# [Topic]: In-Depth Analysis

## Introduction
What this covers and why it matters.

---

## Part 1: [Core Concept Area]

### [Subtopic]
Deep explanation with frameworks, models, data.

### [Subtopic]
...

---

## Part 2: [Another Area]
...

---

## Summary & Key Takeaways
Numbered list of the most important points.

Guidelines

  • 2000-3000 words
  • Proper heading hierarchy (H1 title, H2 parts, H3 subtopics)
  • Tables for comparisons, blockquotes for key definitions
  • Bold key terms on first use
  • Cite real researchers, frameworks, theories by name
  • Horizontal rules between major sections

2. Beginner-Friendly Guide (_guide.md)

Plain language — accessible to anyone with zero background.

Structure

# [Topic]: A Beginner's Guide

## What Is [Topic]?
Imagine you're [vivid everyday scenario]...

---

## Part 1: The Basics

### [Concept] in Plain Terms
**[Term]** is basically like [analogy]...

#### Example: [Real-Life Situation]
Concrete walkthrough.

---

## Quick Reference
Summary table or checklist.

Guidelines

  • 1500-2000 words
  • Start with a relatable scenario
  • Everyday analogies throughout
  • Define jargon immediately when used
  • Short paragraphs, bullet points
  • Friendly, conversational, encouraging tone

3. Case Studies (_cases.md)

Real-world events/examples illustrating the topic in action.

Structure

# [Topic]: Case Studies

> Real-world cases related to [topic]. Each describes background, events, and relevance.

---

### Case 1: [Event/Name] — [Year]

**Background**
Context with dates, names, numbers.

**What Happened**
Chronological narrative.

**Relevance to [Topic]**
Which concepts this illustrates.

**References**
- [Source](URL)

Guidelines

  • 3-5 cases per topic
  • Real events with verifiable facts
  • Specific dates, numbers, names
  • Explain connection to topic concepts
  • Real source URLs
  • For abstract fields (math, philosophy): use historical discoveries, thought experiments, famous debates

4. Interactive HTML (_interactive.html)

Self-contained HTML pages embedded via iframe. Genuinely useful learning tools.

Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Topic] Interactive Tools</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f1f5f9; min-height: 100vh; padding: 24px;
  }
  .container { max-width: 920px; margin: 0 auto; }
  h1 { text-align: center; font-size: 26px; color: #1e293b; margin-bottom: 4px; }
  .subtitle { text-align: center; font-size: 14px; color: #94a3b8; margin-bottom: 18px; }
  .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
  .tab-btn {
    padding: 8px 20px; border-radius: 20px; border: 1px solid #cbd5e1;
    background: #fff; color: #64748b; font-size: 14px; cursor: pointer; transition: all .2s;
  }
  .tab-btn:hover { border-color: #94a3b8; }
  .tab-btn.active { background: #1e293b; color: #fff; border-color: #1e293b; }
  .tab-content { display: none; }
  .tab-content.active { display: block; }
  .panel {
    background: #fff; border-radius: 14px; border: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 24px; margin-bottom: 16px;
  }
  @media (max-width: 640px) {
    body { padding: 12px; }
    .tab-btn { padding: 6px 14px; font-size: 13px; }
  }
</style>
</head>
<body>
<div class="container">
  <h1>[Title]</h1>
  <p class="subtitle">[Description]</p>
  <div class="tabs">
    <button class="tab-btn active" onclick="switchTab(0)">Tool 1</button>
    <button class="tab-btn" onclick="switchTab(1)">Tool 2</button>
  </div>
  <div class="tab-content active" id="tab-0"><!-- Tool 1 --></div>
  <div class="tab-content" id="tab-1"><!-- Tool 2 --></div>
</div>
<script>
function switchTab(idx) {
  document.querySelectorAll('.tab-btn').forEach((b,i) => b.classList.toggle('active', i===idx));
  document.querySelectorAll('.tab-content').forEach((c,i) => c.classList.toggle('active', i===idx));
}
</script>
</body>
</html>

Interactive Ideas by Domain

Domain Tool Ideas
Sciences Formula calculators, simulations, animated diagrams, periodic table
Humanities Timeline explorers, concept maps, debate comparisons, historical maps
Practical Step-by-step builders, checklists, decision trees, comparison matrices
Arts Visual galleries, audio explorers, style comparisons
Business Financial calculators, org charts, process flows, dashboards

Common Patterns

  • Relationship diagram: SVG nodes + connections, filter by category, click for detail panel
  • Calculator: Input fields → computed outputs, optionally with charts
  • Explorer: Filterable cards/list with detail view on click
  • Process flow: Step-by-step animation with play/pause
  • Matrix/Grid: 2D grid with clickable cells (e.g., risk matrix, comparison grid)

Requirements

  • All CSS/JS/data self-contained — no external deps unless essential
  • Works in iframe, responsive (test at 320px and 920px)
  • 3-5 tools per page via tab navigation
  • Include hints/tooltips for discoverability
  • Use CSS transitions for polish

5. Practice Quiz (_quiz.md)

Self-assessment with varied question types and detailed explanations.

Structure

# [Topic]: Practice & Self-Assessment

> Complete these after reading the analysis and guide. Answers at each section's end.

---

## Section 1: True or False (10 questions)
**1. [Statement]**
...

### Answers
1. **True/False** — Explanation...

---

## Section 2: Multiple Choice (5-8 questions)
**1. [Question]**
A. [Option]  B. [Option]  C. [Option]  D. [Option]
...

### Answers
1. **C** — Explanation...

---

## Section 3: Scenario Analysis (2-3)
**Scenario 1:** [Situation description]
1. [Question]
2. [Question]

### Analysis
...

---

## Section 4: Reflection Questions
1. [Open-ended thought question]

Guidelines

  • 20-30 questions total across sections
  • True/False: target common misconceptions
  • Multiple Choice: plausible distractors
  • Every answer includes detailed explanation referencing concepts
  • Reflection questions encourage deeper thinking

6. Further Resources (_resources.md)

Curated recommendations for continued learning.

Structure

# [Topic]: Further Learning Resources

[Brief intro]

---

## Books
**[Title - Author](URL)**
- Description. Difficulty: Beginner/Intermediate/Advanced

---

## Online Courses
**[Course (Platform)](URL)**
- Description. Difficulty: ...

---

## Podcasts
**[Name](URL)**
- Description. Difficulty: ...

---

## Videos & YouTube
**[Channel/Video](URL)**
- Description.

---

## Websites & Tools
**[Name](URL)**
- Description.

Guidelines

  • 3-5 items per category
  • Real, currently available resources with working URLs
  • Difficulty ratings on each
  • Range from beginner to advanced
  • Diverse media types

Evaluation Prompts

I want to create a learning platform about cognitive psychology. Let's do it in English, aimed at curious beginners — maybe college students who haven't taken a psych class yet. Start with 5 topics and suggest what they should be.
Should present a curriculum plan with 5 psychology topics, each with an interactive tool idea, learning roadmap, and glossary scope. Should ask for approval before generating any content.
我想建立一個關於古典物理學的學習平台，用繁體中文，適合高中生程度。先幫我規劃 6 個主題。
Should present a curriculum plan in Traditional Chinese for classical physics with 6 topics. Should include topic names, interactive tool ideas (e.g., projectile simulator, wave visualizer), and ask for approval before generating.
I already have a learning platform in my current directory about psychology-101. Can you suggest what topics I should add next? I've covered cognitive biases, memory, learning theories, perception, and emotions so far.
Should detect expand mode, analyze existing topics, and propose 5-10 complementary topics with rationale for each (e.g., social psychology, developmental psychology, neuroscience basics). Should let the user pick which to generate.