Implement comprehensive skill customization system allowing teachers to:
- Configure existing default skills with custom difficulty settings
- Create entirely new custom skills from scratch
- Visualize skills in mastery progression context with directional edges
- Interact with difficulty space using 2D plot with hover tooltips
Database Schema:
- custom_skills table: Stores user-created skills
- skill_customizations table: Stores modifications to default skills
- Both tables track regrouping config, display rules, and metadata
API Endpoints:
- POST /api/worksheets/skills/custom - Create custom skill
- GET /api/worksheets/skills/custom - List custom skills
- PUT /api/worksheets/skills/custom/[id] - Update custom skill
- DELETE /api/worksheets/skills/custom/[id] - Delete custom skill
- POST /api/worksheets/skills/[skillId]/customize - Save customization
- GET /api/worksheets/skills/customizations - List customizations
Components:
- DifficultyPlot2D: Interactive 2D visualization of difficulty space
- Regrouping Intensity (x-axis) × Scaffolding Level (y-axis)
- Dual mode: Default presets vs Mastery progression skills
- Directional edges showing skill progression sequence
- Hover tooltips with skill details
- Click to select configuration
- Visual legend explaining elements
- SkillConfigurationModal: Modal for skill configuration
- Name and description fields
- Digit range slider
- 2D difficulty plot integration
- Shows mastery progression context when editing
- Real-time configuration summary
- MasteryModePanel Integration:
- "Configure Skill" button for existing skills
- "Create Custom Skill" button for new skills
- Passes mastery progression to modal for context
Visual Design:
- Purple theme (#9333ea) for mastery progression skills
- Green theme (#10b981) for current configuration
- Dashed arrows with triangular arrow heads
- Numbered skill circles with hover tooltips
- Compact legend in top-right corner
Technical Features:
- PlotPoint interface for custom skill plotting
- Conditional snapping to either presets or custom points
- Vector math for arrow head calculations
- Z-ordering: edges before points
- Event propagation control for hover interactions
- Storybook examples for both components
Bug Fixes:
- Fix page indicator stuck on page 1 in WorksheetPreview
- Changed from threshold-based to most-visible-page tracking
- Works correctly for both scroll directions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
7fbc743c4c