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> |
||
|---|---|---|
| .. | ||
| web | ||