✨ Add skills page with category grouping (Story 2.4)

- Enhance Skill model with getCurrentLevel() and ordered scope
- Update SkillController to group by category with translated labels
- Add level and project_count to SkillResource
- Create skill.ts types (Skill, SkillCategory, SkillsResponse)
- Create useFetchSkills composable
- Create SkillCard component with animated progress bar
- Implement competences.vue with:
  - Responsive grid (2/3/4 columns)
  - Category sections with icons
  - Stagger animations (respects prefers-reduced-motion)
  - Loading/error/empty states
  - Placeholder for vis.js skill tree (Epic 3)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

docs/implementation-artifacts/2-4-page-competences-affichage-categories.md

@@ -1,6 +1,6 @@
 # Story 2.4: Page Compétences - Affichage par catégories
 
-Status: ready-for-dev
+Status: review
 
 ## Story
 
@@ -21,61 +21,61 @@ so that je comprends son profil technique global.
 
 ## Tasks / Subtasks
 
-- [ ] **Task 1: Créer l'endpoint API Laravel pour les skills** (AC: #3)
-  - [ ] Créer `app/Http/Controllers/Api/SkillController.php`
-  - [ ] Créer la méthode `index()` pour lister toutes les compétences
-  - [ ] Grouper les compétences par catégorie
-  - [ ] Joindre les traductions selon `Accept-Language`
-  - [ ] Créer `app/Http/Resources/SkillResource.php`
-  - [ ] Ajouter la route `GET /api/skills` dans `routes/api.php`
+- [x] **Task 1: Créer l'endpoint API Laravel pour les skills** (AC: #3)
+  - [x] Créer `app/Http/Controllers/Api/SkillController.php`
+  - [x] Créer la méthode `index()` pour lister toutes les compétences
+  - [x] Grouper les compétences par catégorie
+  - [x] Joindre les traductions selon `Accept-Language`
+  - [x] Créer `app/Http/Resources/SkillResource.php`
+  - [x] Ajouter la route `GET /api/skills` dans `routes/api.php`
 
-- [ ] **Task 2: Créer le composable useFetchSkills** (AC: #3)
-  - [ ] Créer `frontend/app/composables/useFetchSkills.ts`
-  - [ ] Gérer les états loading, error, data
-  - [ ] Typer la réponse avec interface Skill[]
+- [x] **Task 2: Créer le composable useFetchSkills** (AC: #3)
+  - [x] Créer `frontend/app/composables/useFetchSkills.ts`
+  - [x] Gérer les états loading, error, data
+  - [x] Typer la réponse avec interface Skill[]
 
-- [ ] **Task 3: Créer le composant SkillCard** (AC: #2, #8)
-  - [ ] Créer `frontend/app/components/feature/SkillCard.vue`
-  - [ ] Props : skill (avec name, icon, level, maxLevel)
-  - [ ] Afficher l'icône (si présente) ou un placeholder
-  - [ ] Afficher le nom traduit
-  - [ ] Afficher le niveau avec une barre de progression
-  - [ ] Style cliquable (hover effect, cursor pointer)
+- [x] **Task 3: Créer le composant SkillCard** (AC: #2, #8)
+  - [x] Créer `frontend/app/components/feature/SkillCard.vue`
+  - [x] Props : skill (avec name, icon, level, maxLevel)
+  - [x] Afficher l'icône (si présente) ou un placeholder
+  - [x] Afficher le nom traduit
+  - [x] Afficher le niveau avec une barre de progression
+  - [x] Style cliquable (hover effect, cursor pointer)
 
-- [ ] **Task 4: Créer la page competences.vue** (AC: #1, #6)
-  - [ ] Créer `frontend/app/pages/competences.vue`
-  - [ ] Charger les données avec `useFetchSkills()`
-  - [ ] Grouper les skills par catégorie côté frontend
-  - [ ] Afficher chaque catégorie comme une section avec titre
-  - [ ] Grille de SkillCard dans chaque section
+- [x] **Task 4: Créer la page competences.vue** (AC: #1, #6)
+  - [x] Créer `frontend/app/pages/competences.vue`
+  - [x] Charger les données avec `useFetchSkills()`
+  - [x] Grouper les skills par catégorie côté frontend
+  - [x] Afficher chaque catégorie comme une section avec titre
+  - [x] Grille de SkillCard dans chaque section
 
-- [ ] **Task 5: Implémenter l'animation d'entrée** (AC: #4)
-  - [ ] Animation stagger pour les SkillCards (comme ProjectCard)
-  - [ ] Animation fade-in pour les titres de catégories
-  - [ ] Respecter `prefers-reduced-motion`
+- [x] **Task 5: Implémenter l'animation d'entrée** (AC: #4)
+  - [x] Animation stagger pour les SkillCards (comme ProjectCard)
+  - [x] Animation fade-in pour les titres de catégories
+  - [x] Respecter `prefers-reduced-motion`
 
-- [ ] **Task 6: Design responsive** (AC: #5, #6)
-  - [ ] Mobile : 2 colonnes de SkillCards par catégorie
-  - [ ] Desktop : 4 colonnes, espace réservé pour vis.js (Epic 3)
-  - [ ] Catégories empilées verticalement
+- [x] **Task 6: Design responsive** (AC: #5, #6)
+  - [x] Mobile : 2 colonnes de SkillCards par catégorie
+  - [x] Desktop : 4 colonnes, espace réservé pour vis.js (Epic 3)
+  - [x] Catégories empilées verticalement
 
-- [ ] **Task 7: Représentation visuelle du niveau** (AC: #2)
-  - [ ] Créer une barre de progression stylisée (style RPG/XP)
-  - [ ] Utiliser `sky-accent` pour la partie remplie
-  - [ ] Afficher le ratio (ex: 4/5 ou 80%)
-  - [ ] Animation subtile au chargement (remplissage progressif)
+- [x] **Task 7: Représentation visuelle du niveau** (AC: #2)
+  - [x] Créer une barre de progression stylisée (style RPG/XP)
+  - [x] Utiliser `sky-accent` pour la partie remplie
+  - [x] Afficher le ratio (ex: 4/5 ou 80%)
+  - [x] Animation subtile au chargement (remplissage progressif)
 
-- [ ] **Task 8: Meta tags SEO** (AC: #7)
-  - [ ] Titre dynamique : "Compétences | Skycel"
-  - [ ] Description : compétences de Célian
-  - [ ] og:title et og:description
+- [x] **Task 8: Meta tags SEO** (AC: #7)
+  - [x] Titre dynamique : "Compétences | Skycel"
+  - [x] Description : compétences de Célian
+  - [x] og:title et og:description
 
-- [ ] **Task 9: Tests et validation**
-  - [ ] Tester en FR et EN
-  - [ ] Vérifier le groupement par catégorie
-  - [ ] Valider les animations
-  - [ ] Tester le responsive
-  - [ ] Vérifier que les skills sont cliquables (préparation Story 2.5)
+- [x] **Task 9: Tests et validation**
+  - [x] Tester en FR et EN
+  - [x] Vérifier le groupement par catégorie
+  - [x] Valider les animations
+  - [x] Tester le responsive
+  - [x] Vérifier que les skills sont cliquables (préparation Story 2.5)
 
 ## Dev Notes
 
@@ -552,16 +552,46 @@ frontend/i18n/en.json            # AJOUTER clés skills.*
 
 ### Agent Model Used
 
-{{agent_model_name_version}}
+Claude Opus 4.5 (claude-opus-4-5-20251101)
 
 ### Debug Log References
 
+- API SkillController et SkillResource existaient déjà, améliorés avec level, project_count et category_label
+
 ### Completion Notes List
 
+- Modèle Skill amélioré : getCurrentLevel() + scope ordered par category puis display_order
+- SkillResource amélioré : ajout level, display_order, project_count
+- SkillController amélioré : groupement par catégorie avec category_label traduit
+- Type skill.ts créé avec Skill, SkillCategory, SkillsResponse
+- Composable useFetchSkills créé
+- SkillCard créé : icône, nom, barre de progression animée, niveau X/Y, hover effect
+- Page compétences complète :
+  - Grille responsive 2/3/4 colonnes
+  - Sections par catégorie avec icônes (🎨 frontend, ⚙️ backend, 🛠️ tools, 💡 soft_skills)
+  - Animation stagger fadeInUp
+  - États loading (skeleton), error (retry), empty
+  - Placeholder vis.js (desktop only)
+- prefers-reduced-motion respecté
+- SEO via useSeo
+- Store progression visitSection('competences')
+- Traductions FR/EN ajoutées (skills.*)
+
 ### Change Log
 | Date | Change | Author |
 |------|--------|--------|
 | 2026-02-04 | Story créée avec contexte complet | SM Agent |
+| 2026-02-06 | Tasks 1-9 implémentées et validées | Dev Agent (Claude Opus 4.5) |
 
 ### File List
 
+- `api/app/Models/Skill.php` — MODIFIÉ (getCurrentLevel, scope ordered)
+- `api/app/Http/Controllers/Api/SkillController.php` — MODIFIÉ (groupement, category_label)
+- `api/app/Http/Resources/SkillResource.php` — MODIFIÉ (level, project_count)
+- `frontend/app/types/skill.ts` — CRÉÉ
+- `frontend/app/composables/useFetchSkills.ts` — CRÉÉ
+- `frontend/app/components/feature/SkillCard.vue` — CRÉÉ
+- `frontend/app/pages/competences.vue` — RÉÉCRIT
+- `frontend/i18n/fr.json` — MODIFIÉ (ajout skills.*)
+- `frontend/i18n/en.json` — MODIFIÉ (ajout skills.*)
+

docs/implementation-artifacts/sprint-status.yaml

@@ -60,7 +60,7 @@ development_status:
   2-1-composant-projectcard: review
   2-2-page-projets-galerie: review
   2-3-page-projet-detail: review
-  2-4-page-competences-affichage-categories: ready-for-dev
+  2-4-page-competences-affichage-categories: review
   2-5-competences-cliquables-projets-lies: ready-for-dev
   2-6-page-temoignages-migrations-bdd: ready-for-dev
   2-7-composant-dialogue-pnj: ready-for-dev