refactor: shorten class names in layout lessons for easier typing

- flexbox.json: .flex-container → .wrap
- grid.json: .grid-container → .grid, .grid-layout → .page,
  .responsive-grid → .cards, .align-grid → .cells, .overlap-grid → .stack
- 07-layouts.json: .flex-container → .flex, .flex-item → .item,
  .grid-container → .grid
- CLAUDE.md: add short class names rule (1-2 syllables max)

CLAUDE.md

@@ -69,14 +69,20 @@ When creating or editing lessons:
 
 ### Lesson Design Best Practices
 
+**Short Class Names:**
+- Class names students type should be short: 1-2 syllables maximum
+- Good: `.wrap`, `.flex`, `.grid`, `.box`, `.card`, `.item`, `.btn`
+- Bad: `.flex-container`, `.grid-layout`, `.button-primary` (too long, compound names)
+- Single-word names are easier to type and remember
+
 **Clear Task Instructions:**
 - Always state the selector AND the property explicitly in the task
-- Good: "Add `display: flex` to `.flex-container`"
+- Good: "Add `display: flex` to `.wrap`"
 - Bad: "Use flexbox to align the items" (unclear what selector to use)
 
 **Use `codePrefix` for Context:**
 - Include the selector in `codePrefix` so students know where to write
-- Example: `"codePrefix": ".flex-container {\n  "` with `"codeSuffix": "\n}"`
+- Example: `"codePrefix": ".wrap {\n  "` with `"codeSuffix": "\n}"`
 - This shows students exactly which rule they're editing
 
 **Simple, Human-Friendly Values:**