serenakeyitan/flashcards

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

| Action | Behavior | |--------|----------| | Click card | Flip to show answer | | Press Space | Flip card | | Press → | Next card | | Press ← | Previous card | | Click navigation arrows | Move between cards | | Click download icon | Export to CSV | | Click reset icon | Return to first card |

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

| Feature | This Skill | NotebookLM | |---------|-----------|------------| | Single-card view | ✅ | ✅ | | Flip animation | ✅ | ✅ | | Keyboard navigation | ✅ | ✅ | | CSV export | ✅ | ✅ | | Purple gradient | ✅ | ✅ | | Progress counter | ✅ | ✅ | | Explain button | ⏭️ Future | ✅ |

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

2. Convert to interactive HTML:

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

3. 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;