[WIP] Create dynamic radar chart for user skills

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Convert the CORE METRICS → PHYSICAL BALANCE section into a fully functional, live radar chart where EACH USER SKILL IS RENDERED AS ITS OWN RADAR AXIS.
This radar must be dynamic, reactive, and entirely driven by the user’s actual Skills and their progress.
Do NOT group, bucket, or aggregate skills into fewer axes.

1️⃣ REMOVE STATIC IMAGE & PLACEHOLDERS (MANDATORY)

• Completely remove:
  • Image-based radar
  • Static SVG mockups
  • Hardcoded axis labels or values
• Render the radar programmatically using a charting library (Chart.js / Recharts / ECharts).
  ❌ No image fallbacks
❌ No placeholder geometry

2️⃣ SINGLE SOURCE OF TRUTH (NON-NEGOTIABLE)
The radar must be driven by one pipeline only:
Skills (user data)
→ Radar Chart
Rules:

• Skills page is the only place where skills are created, edited, or deleted
• Radar reads directly from Skills
• No intermediate hardcoded metric lists
  ❌ No duplicate skill arrays
❌ No static radar datasets

3️⃣ RADAR AXES = SKILLS (CRITICAL FIX)
Core Rule (VERY IMPORTANT)
Each individual Skill must create exactly ONE radar axis.

• If the user has 19 skills → the radar must have 19 axes
• If the user deletes a skill → that axis disappears
• If the user adds a skill → a new axis appears
  ❌ Do NOT:
• Merge skills into categories
• Collapse skills into “Physical / Mental / Knowledge”
• Reduce the axis count automatically
  ✔ Axis count must always equal current number of skills

4️⃣ AXIS LABEL & VALUE DEFINITION
For each Skill:
Skill {
id
name
xp
maxXp // e.g. 2000
}
Radar axis:

• Label = skill.name
• Value = skill.xp
• Max = skill.maxXp
  No derived buckets. No averaging.

5️⃣ RADAR SHAPE BEHAVIOR (MANDATORY)
The radar polygon must reshape dynamically based on:

• Number of skills
• XP distribution across skills
• Skill creation, deletion, or XP updates
  Examples:
• Add a new skill → polygon gains a new vertex
• Delete a skill → polygon loses that vertex
• Increase XP → vertex extends outward
  ❌ Same shape after skill changes = bug
❌ Fewer axes than skills = incorrect

6️⃣ LIVE SYNCHRONIZATION RULES
The radar must update immediately when:

• A skill is created
• A skill is deleted
• A skill’s XP changes
• Attendance / time spent is logged
• Skill is renamed
  No refresh.
No reload.
No manual sync.

7️⃣ STATE & REACTIVITY CONSTRAINTS

• Radar subscribes directly to Skills state
• No internal radar state for labels or values
• No one-time initialization
  ❌ useState(initialRadarData)
❌ Static constants

8️⃣ OPTIONAL (BUT ALLOWED): HIGHER-LEVEL METRICS
If higher-level Core Metrics (Physical / Mental / Knowledge) exist:

• They must be derived from skills
• They must NOT reduce radar axes
• Radar still remains skill-per-axis

9️⃣ FAILURE CONDITIONS (AUTO-REJECT)
Implementation is wrong if:

• Radar shows fewer axes than skills
• Multiple skills are merged into one axis
• Axis labels don’t match skill names
• Deleting a skill doesn’t remove an axis
• Image or placeholder still exists

🎯 FINAL EXPECTED BEHAVIOR
After implementation:

• Radar is a direct visual map of the user’s skills
• Shape evolves as skills grow or shrink
• Every skill has equal visual importance
• System behaves like a true RPG stat wheel
  Not a diagram.
Not an aggregation.
A living, per-skill progression radar.

⚠️ HARD OVERRIDE LINE (MUST INCLUDE)
“Render ONE radar axis per Skill. Do not group, bucket, or aggregate multiple skills into fewer axes under any circumstances.”

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
solo-leveling	Ready	Preview, Comment	Jan 27, 2026 11:44am