Quality Checklists

Completion Checklist

Verify AFTER all slides are written.

All Slides

  • All slide IDs defined in contract.ts ("title", "problem-setup", "step-N", "step-N-cfu", "step-N-answer", practice slides)
  • Visual component (visual.tsx) renders all slides using 640x360 SVG viewport
  • All SVG element groups have data-element-id attributes
  • Progressive reveal uses show() predicate from SlideSystem
  • Elements that appear/disappear are wrapped in <Animated> component
  • Colors are 6-digit hex only (no rgb/rgba/named colors)

Content Quality

  • Title slide shows Grade/Unit/Lesson and Big Idea statement
  • Step names match STRATEGY DEFINITION exactly
  • CFU questions reference strategy verbs
  • CFU and Answer use separate slide IDs via CfuAnswerCard component
  • Visual stays in same position across all step slides
  • Each step slide ADDS something new to the visual
  • Problem reminder is at bottom on step slides

Deck Visual Technical Checks

  • contract.ts defines all slide IDs for the deck
  • contract.test.ts has fixtures for each slide ID with visibleElements and hiddenElements
  • visual.tsx renders all slides correctly
  • Visual is registered in src/lib/deck/registry.ts
  • npm run typecheck passes
  • Playground preview renders correctly

Printable Slide

  • Has zero scaffolding (no step headers, no hints)
  • WHITE background (#ffffff)
  • Times New Roman font
  • Contains BOTH practice problems (from Scenarios 2 & 3)
  • Each problem has work space

Lesson Summary

  • Contains Big Idea prominently (large text, blue background box)
  • Contains strategy steps as numbered list
  • Includes a visual reference (graph, diagram, or worked example)
  • Has "REMEMBER" key takeaway section (1-2 sentences)
  • Is a single page (NOT multi-page)
  • WHITE background (#ffffff)
  • Times New Roman font (matching printable worksheet)
  • 8.5in x 11in format

If SVG Visual

  • Scale matches GRAPH PLAN from Phase 1 (scenarios[0].graphPlan)
  • Annotations match GRAPH PLAN type and positions
  • Grid lines align with axis labels (same pixel values)
  • Each element group has a unique data-element-id

Ready for Phase 4

When all items are checked, proceed to:

Read: .claude/skills/create-worked-example-sg/phases/04-save-to-database.md