Flashcards

Convert AI-generated JSON flashcards into NotebookLM-style interactive study interface. Beautiful flip animations, keyboard shortcuts, and one-click CSV export.

What This Skill Does

Input: JSON file with question/answer pairs (generated by AI) Output: NotebookLM-style interactive HTML

This is a pure frontend converter - AI (Claude/Gemini) generates the flashcards as JSON, this skill renders them with NotebookLM's exact UI/UX.

Output Contract

• •Produces a single HTML file containing the interactive flashcard deck.
• •Optional CSV export is available from the UI.

Workflow

1. User: "Claude, generate 50 flashcards about quantum physics"
2. Claude: Generates JSON with {question, answer} pairs
3. Save JSON to file (e.g., flashcards.json)
4. Run from `skills/flashcards`: `python main.py -i flashcards.json -o flashcards.html`
5. Open HTML → NotebookLM-style flashcard interface

Exam Mode Features

Optimized for exam preparation:

• •Automatic formatting: Bullet points and numbered lists are automatically formatted with proper line breaks for easy memorization
• •Clean display: Answers are displayed left-aligned with proper spacing between points
• •Exam-focused content: When generating flashcards, focus on:
  • •Key concepts likely to appear on exams
  • •Definitions, formulas, and important facts
  • •Step-by-step processes and procedures
  • •Comparison and contrast points
  • •Common exam questions and their answers

Answer formatting supports:

• •Bullet points: •, -, * followed by content
• •Numbered lists: 1., 2., 3. or 1), 2), 3)
• •Lettered lists: a., b., c. or a), b), c)
• •Each point automatically gets its own line for clarity

JSON Input Format

Option A: Simple Array

[
  {
    "question": "What are the three main types of chemical bonds?",
    "answer": "• Ionic bonds\n• Covalent bonds\n• Metallic bonds"
  },
  {
    "question": "List the steps of photosynthesis.",
    "answer": "1. Light absorption\n2. Water splitting\n3. ATP production\n4. Carbon fixation"
  }
]

Option B: With Title

{
  "title": "Quantum Physics Flashcards",
  "flashcards": [
    {
      "question": "What is quantum superposition?",
      "answer": "A state where a qubit exists in multiple states simultaneously."
    }
  ]
}

Usage

cd skills/flashcards
python main.py --input flashcards.json --output flashcards.html

Parameters:

• •--input, -i: Input JSON file (required)
• •--output, -o: Output HTML file (default: flashcards.html)

Math (KaTeX)

Use LaTeX delimiters in questions or answers to render formulas:

$E=mc^2$ inline, or $$\nabla \cdot \vec{B} = 0$$ block

Notes:

• •Inline math uses $...$ and block math uses $$...$$.
• •Escape literal dollar signs as \$ to avoid math parsing.
• •When local KaTeX assets are available, a fonts/ folder is created next to the HTML for offline rendering.

NotebookLM-Style Features

Visual Design

• •Purple gradient background (same as NotebookLM)
• •Dark card front (question) with "See answer" hint
• •White card back (answer)
• •Smooth 3D flip animation (600ms cubic-bezier)
• •Card dimensions: 600px wide, 420px tall

Interactions

UI Elements

• •Header: Title + "Based on 1 source"
• •Instructions: "Press 'Space' to flip, '← / →' to navigate"
• •Navigation: Left/right arrow buttons
• •Progress: "1 / 59 cards"
• •Controls: Reset button + CSV download button

CSV Export

Click the download icon to export all flashcards as CSV:

question,answer
"What is quantum superposition?","A state where..."
"What is quantum entanglement?","A phenomenon where..."

Perfect for importing into:

• •Anki
• •Quizlet
• •Excel/Google Sheets
• •Other flashcard apps

Features Comparison

Technical Details

• •No LLM/AI: Pure JSON → HTML conversion
• •No API Keys: No external calls
• •Standalone HTML: All CSS/JS embedded
• •Offline: Works without internet
• •Flip Animation: CSS 3D transforms
• •CSV Generation: Client-side (no server needed)

Dependencies

pip install -r requirements.txt

Only requires: loguru (logging)

Integration with AI

Asking Claude

"Generate 30 flashcards about [topic] in JSON format.
Use this structure:
[
  {"question": "...", "answer": "..."}
]
"

Asking Gemini

Same prompt works across any AI model that can generate structured JSON.

Example Workflow

1. •Generate flashcards with Claude:

User: "Create 20 flashcards about ESPM 42 entomology topics"
Claude: Generates JSON and saves to entomology.json

1. •Convert to interactive HTML:

cd skills/flashcards
python main.py -i entomology.json -o entomology.html

1. •Study:

• •Open entomology.html in browser
• •Use Space to flip
• •Use ← → to navigate
• •Download CSV for Anki import

Tips

• •Card content: Keep questions concise (one concept per card)
• •Answer length: 1-3 sentences work best for visibility
• •Batch size: 20-50 cards per set is optimal for studying
• •File size: Each HTML is ~10-15KB (very lightweight)

Customization

Want to change the colors? Edit main.py lines 36-37:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Want different card size? Edit line 74:

height: 420px;