chore: initialize math-tasks project

tasks.md

@@ -0,0 +1,57 @@
+# 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