# Sub-task 4: Enhance SkillsTab Component

## Scope

Refactor the `SkillsTab` component to use the new design system primitives for skill display and study interface.

### Key Deliverables:
1. Update `SkillsTab` to use `GameCard`, `SectionHeader`, `SkillRow`, `StatRow` primitives
2. Apply proper skill level dots with `--mana-light` color
3. Add proper study progress using `Progress` primitive (300ms linear transition)
4. Ensure skill categories are clearly separated with `SectionHeader`

## Acceptance Criteria

1. Skill rows use `SkillRow` primitive component
2. Section headers use `SectionHeader` primitive
3. Study progress bars use `Progress` with proper styling
4. Skill level dots filled with `--mana-light` color
5. No raw hex values - all colors use CSS variables
6. Tab switch has 150ms fade-in transition

## Dependencies

- **ST1 (Sub-task 1)** - Must be completed first (design system must exist)

## Status

🟡 **PENDING** - Waiting for ST1 completion

## Notes

- Component location: `src/components/game/tabs/SkillsTab.tsx`
- Handles multiple skill categories (mana, study, enchanter, fabricator, invoker)
- Shows skill tiers (T1-T5) with milestone upgrades
- Study progress needs to animate smoothly