---
estimated_steps: 7
estimated_files: 2
skills_used: []
---

# T01: Add Music Theory category to canonical_tags.yaml and badge colors to App.css

Add "Music Theory" as the 7th category in `config/canonical_tags.yaml` on ub01 with appropriate sub-topics (harmony, chord progressions, scales, rhythm, time signatures, melody, counterpoint, song keys). Add corresponding CSS custom properties `--color-badge-cat-music-theory-bg` and `--color-badge-cat-music-theory-text` to the `:root` block in `frontend/src/App.css`, and add the `.badge--cat-music-theory` class rule after the existing `.badge--cat-mastering` line. Use a warm orange-gold palette (e.g., bg: #3b2506, text: #fdba74) that is visually distinct from the existing 6 category colors (teal, purple, blue, amber, green, pink).

Steps:
1. SSH to ub01 and edit `/vmPool/r/repos/xpltdco/chrysopedia/config/canonical_tags.yaml` — add Music Theory category block after the Mastering entry, following the same YAML structure as existing categories.
2. Verify the API returns 7 categories: `curl -s http://ub01:8096/api/v1/topics | python3 -c "import sys,json; d=json.load(sys.stdin); print(len(d)); assert len(d)==7; print([c['name'] for c in d])"`
3. Edit `frontend/src/App.css` `:root` block (around line 99) — add two new custom properties for music-theory badge colors.
4. Edit `frontend/src/App.css` badge class section (around line 1206) — add `.badge--cat-music-theory` class.
5. Verify CSS is syntactically valid by running `cd frontend && npm run build`.

## Inputs

- ``config/canonical_tags.yaml` — existing 6-category YAML on ub01 at `/vmPool/r/repos/xpltdco/chrysopedia/config/canonical_tags.yaml``
- ``frontend/src/App.css` — existing CSS with 6 category badge custom properties (lines 89-100) and badge classes (lines 1201-1206)`

## Expected Output

- ``config/canonical_tags.yaml` — updated with 7th Music Theory category and sub-topics`
- ``frontend/src/App.css` — updated with `--color-badge-cat-music-theory-*` custom properties and `.badge--cat-music-theory` class`

## Verification

curl -s http://ub01:8096/api/v1/topics | python3 -c "import sys,json; d=json.load(sys.stdin); assert len(d)==7, f'Expected 7 categories, got {len(d)}'; names=[c['name'] for c in d]; assert 'Music Theory' in names, f'Music Theory not found in {names}'; print('PASS: 7 categories including Music Theory')" && cd frontend && npx grep-cli --no-error 'music-theory' src/App.css || grep -q 'music-theory' frontend/src/App.css && echo 'PASS: badge CSS present'
