History

Thomas Hallock 2b5d66f776 perf(worksheets): use Suspense streaming for preview generation Problem: The worksheet page had 1.7-2.3s TTFB because the 1.25MB SVG preview was being serialized into the initial HTML response, blocking first paint. Solution: Use React Suspense to stream the preview separately: - Page shell renders immediately with settings (~200ms TTFB) - Preview generates async and streams in when ready (~1.5s later) - User sees the UI instantly, preview appears with loading skeleton New components: - StreamedPreview: async server component that generates preview - PreviewSkeleton: loading placeholder while streaming - StreamedPreviewContext: shares streamed data with PreviewCenter - PreviewDataInjector: bridges server-streamed data to client context Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>		2026-01-23 18:54:17 -06:00
..
plans	feat(flowcharts): implement unified computation model (Phases 1-2)	2026-01-22 15:39:20 -06:00
procedures	refactor(docs): consolidate .claude instructions (53% reduction)	2026-01-21 11:15:26 -06:00
reference	feat(flowchart-workshop): add version history with preview mode	2026-01-23 13:52:59 -06:00
ANIMATION_PATTERNS.md	…
ARCADE_SYSTEM.md	refactor(docs): consolidate .claude instructions (53% reduction)	2026-01-21 11:15:26 -06:00
BKT_DESIGN_SPEC.md	…
BLOG_EXAMPLES_PATTERN.md	…
CLAUDE.md	feat(flowchart-workshop): add version history with preview mode	2026-01-23 13:52:59 -06:00
CODE_QUALITY_REGIME.md	…
COMPLEXITY_BUDGET_SYSTEM.md	…
DEPLOYMENT.md	…
GAME_SETTINGS_PERSISTENCE.md	…
GAME_THEMES.md	…
GOOGLE_CLASSROOM_SETUP.md	…
PER_PLAYER_STATS_ARCHITECTURE.md	…
PROBLEM_GENERATION.md	…
PROGRESSION_PEDAGOGY.md	…
README.md	refactor(docs): consolidate .claude instructions (53% reduction)	2026-01-21 11:15:26 -06:00
SIMULATED_STUDENT_MODEL.md	…
UI_STYLE_GUIDE.md	…
Z_INDEX_MANAGEMENT.md	…
settings.local.json	perf(worksheets): use Suspense streaming for preview generation	2026-01-23 18:54:17 -06:00

README.md

.claude/ Documentation Index

This directory contains Claude Code instructions and project documentation.

Core Instructions

CLAUDE.md - Main instructions file (loaded every session)

Procedures (Step-by-Step Workflows)

Procedure	Trigger	Description
database-migrations.md	Creating/modifying DB schema	Complete Drizzle migration workflow
FLOWCHART_MODIFICATIONS.md	Modifying flowcharts	Checkpoint nodes, path enumeration, skipIf
merge-conflicts.md	Git merge conflicts	diff3 resolution patterns

Reference (Passive Lookup)

Doc	Topic
panda-css.md	Panda CSS gotchas, dark mode, fixing corrupted styled-system
react-query-mutations.md	React Query mutation patterns, cache invalidation
tensorflow-browser-debugging.md	Keras→TensorFlow.js debugging (normalization, quantization)
abacus-react.md	@soroban/abacus-react usage, SSR patterns
PROBLEM_GENERATION.md	Problem generation quick reference

Architecture & Design

Doc	Description
ARCADE_SYSTEM.md	Complete arcade architecture (rooms, modes, setup, routing)
PER_PLAYER_STATS_ARCHITECTURE.md	Per-player statistics system
COMPLEXITY_BUDGET_SYSTEM.md	Problem difficulty measurement

Settings & Configuration

Doc	Description
GAME_SETTINGS_PERSISTENCE.md	How game settings are stored and synced
GAME_THEMES.md	Standardized color themes
Z_INDEX_MANAGEMENT.md	Z-index hierarchy and constants
UI_STYLE_GUIDE.md	UI styling conventions

Operations & Quality

Doc	Description
DEPLOYMENT.md	Production deployment (NAS, compose-updater)
CODE_QUALITY_REGIME.md	Pre-commit checks, linting
BLOG_EXAMPLES_PATTERN.md	Blog post example generation
ANIMATION_PATTERNS.md	React-spring animation patterns

Research & Pedagogy

Doc	Topic
BKT_DESIGN_SPEC.md	Bayesian Knowledge Tracing spec
PROGRESSION_PEDAGOGY.md	Learning progression design
SIMULATED_STUDENT_MODEL.md	Simulated student for testing

Integration Guides

Doc	Integration
GOOGLE_CLASSROOM_SETUP.md	Google Classroom API setup