# Flashcards

> Render study flashcards into an interactive HTML deck.

- Skill: `serenakeyitan/flashcards` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add serenakeyitan/flashcards`
- Raw SKILL.md: https://api.skillmd.com/api/skills/serenakeyitan/flashcards/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: serenakeyitan (https://skillmd.com/u/serenakeyitan)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/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
```json
[
  {
    "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
```json
{
  "title": "Quantum Physics Flashcards",
  "flashcards": [
    {
      "question": "What is quantum superposition?",
      "answer": "A state where a qubit exists in multiple states simultaneously."
    }
  ]
}
```

## Usage

```bash
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:

```text
$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:
```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

```bash
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**:
```bash
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:
```python
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
```

Want different card size? Edit line 74:
```python
height: 420px;
```