# Math Tasks Generator — Setup Steps

## Step 1: Initialize Node.js project
- [x] `npm init -y` with `"type": "module"`
- [x] Create `.gitignore` (node_modules/, output/)

## Step 2: Install dependencies
- [x] `puppeteer` — HTML to PDF conversion (headless Chrome)
- [x] `@tailwindcss/cli` — Tailwind CSS v4 build tool (dev)
- [x] `serve` — static file server for HTML preview (dev)
- [x] `concurrently` — run CSS watch + preview server together (dev)

## Step 3: Create directory structure
- [x] `src/styles/main.css` — Tailwind source with A4/print styles
- [x] `src/scripts/generate-pdf.mjs` — HTML → PDF via Puppeteer
- [x] `src/scripts/generate-problems.mjs` — JSON task → concrete problem list
- [x] `src/scripts/banatie.mjs` — Banatie API client for image generation
- [x] `tasks/` — JSON task definition files
- [x] `assets/backgrounds/` — large background images per theme
- [x] `assets/icons/` — icon sets in subfolders
- [x] `output/html/` — generated HTML (gitignored)
- [x] `output/pdf/` — generated PDFs (gitignored)
- [x] `output/css/` — built Tailwind CSS (gitignored)

## Step 4: Configure Tailwind CSS v4
- [x] `src/styles/main.css` with `@import "tailwindcss"`, `@page` rules for A4
- [x] Custom utility classes: `.page-a4`, `.page-background`, `.page-content`, `.problem-row`, `.problem-icon`, `.problem-text`, `.answer-line`
- [x] Build script: `npx @tailwindcss/cli -i src/styles/main.css -o output/css/styles.css`

## Step 5: Create PDF generation script
- [x] `src/scripts/generate-pdf.mjs` using Puppeteer
- [x] Accepts HTML file path, outputs PDF to `output/pdf/`
- [x] Settings: A4 format, `printBackground: true`, zero margins, `preferCSSPageSize: true`

## Step 6: Create problem generation utility
- [x] `src/scripts/generate-problems.mjs` — reads JSON task, generates randomized math problems
- [x] Exports function and works as CLI
- [x] Handles variable substitution, deduplication

## Step 7: Create example JSON task
- [x] `tasks/example-multiply.json` with sample multiplication task config
- [x] Demonstrates full JSON schema: template, variables, labels, theme refs

## Step 8: Set up npm scripts
- [x] `build:css` — build Tailwind CSS (minified)
- [x] `build:css:watch` — watch mode
- [x] `preview` — serve HTML at localhost:3000
- [x] `pdf` — convert HTML to PDF
- [x] `dev` — CSS watch + preview (concurrent)

## Step 9: Initialize git repo
- [ ] `git init`, initial commit

## Step 10: Configure Banatie API integration
- [x] `src/scripts/banatie.mjs` — API client for image generation
- [x] Documented in CLAUDE.md
- [x] Standard sizes: backgrounds 1200×1700px, icons 128×128px transparent PNG