diff --git a/.claude/skills/task-workflow/SKILL.md b/.claude/skills/task-workflow/SKILL.md new file mode 100644 index 0000000..c7b507c --- /dev/null +++ b/.claude/skills/task-workflow/SKILL.md @@ -0,0 +1,142 @@ +--- +name: task-workflow +description: Workflow complet pour traiter une tâche du TASK.md — branche git, développement, tests, commit conventionnel, push, puis archivage dans DONE.md. Utiliser quand l'utilisateur veut implémenter une tâche listée dans TASK.md. +allowed-tools: Read, Bash, Edit, Write, Glob, Grep +--- + +# Workflow de traitement d'une tâche (TASK.md → DONE.md) + +Quand l'utilisateur demande de traiter une tâche du `TASK.md`, suivre **dans l'ordre** les étapes ci-dessous. + +--- + +## ⚠️ Étape 0 — Repartir d'une branche saine depuis `origin/main` + +**IMPORTANT : toujours commencer par cette étape, sans exception.** + +```bash +git fetch origin +git checkout main +git pull origin main +``` + +Ensuite seulement créer la branche de travail (voir étape 2). + +> Règle : ne jamais partir d'une branche de feature existante. Toujours tirer depuis `main` à jour. + +--- + +## Étape 1 — Lire et choisir la tâche + +1. Lire `TASK.md` pour identifier la tâche à traiter (si non précisée, demander laquelle). +2. Extraire : le titre, les fichiers impactés, et la liste des sous-tâches. + +--- + +## Étape 2 — Créer une branche git + +Nommer la branche d'après le type et le titre de la tâche : + +``` +/ +``` + +Exemples de types : `feat`, `fix`, `style`, `refactor`, `test`, `chore` + +```bash +git checkout -b style/simplifier-table-homepage +``` + +Règle : **ne jamais committer directement sur `main`**. + +--- + +## Étape 3 — Implémenter la tâche + +- Lire tous les fichiers mentionnés dans la tâche avant de les modifier. +- Cocher mentalement chaque sous-tâche `[ ]` au fur et à mesure. +- Respecter les skills existants selon les fichiers touchés : + - Composant Vue → skill `vue-frontend` + - Domaine PHP → skills `ddd-core`, `hexagonal-arch`, `cqrs`, `api-platform` + - Tests → skill `testing-strategy` + +--- + +## Étape 4 — Vérifier que tous les tests passent + +```bash +make test +``` + +- Si des tests échouent, **corriger avant de continuer**. +- Ne pas passer à l'étape suivante tant que la suite n'est pas verte. +- Pour un test spécifique : `make test f="NomDeLaClasse"` + +--- + +## Étape 5 — Commit conventionnel + +Format Conventional Commits : + +``` +(): + +[corps optionnel : explication du pourquoi] +``` + +**Types autorisés :** `feat`, `fix`, `style`, `refactor`, `test`, `chore`, `docs` + +**Scope :** nom du domaine ou du composant impacté (ex: `manga-table`, `sidebar`, `homepage`) + +Exemples : +``` +style(manga-table): simplifier le wrapper card + hover vert sur le titre +fix(sidebar): séparer toggle et navigation sur MenuGroup +``` + +```bash +git add +git commit -m "style(manga-table): simplifier le wrapper card + hover vert sur le titre" +``` + +--- + +## Étape 6 — Push de la branche + +**Demander confirmation à l'utilisateur avant de pusher.** + +```bash +git push -u origin +``` + +--- + +## Étape 7 — Archiver la tâche dans DONE.md + +1. Retirer le bloc de la tâche de `TASK.md` (section complète, du titre `##` jusqu'au `---` suivant). +2. Ajouter la tâche dans `DONE.md` (créer le fichier s'il n'existe pas) avec la date et le sha du commit : + +Format dans `DONE.md` : +```markdown +## [TYPE] Titre de la tâche — YYYY-MM-DD + +> Branche : `` | Commit : `` + +- [x] Sous-tâche 1 +- [x] Sous-tâche 2 +``` + +--- + +## Résumé du flux + +``` +fetch + checkout main + pull (branche saine) + → branche git depuis main + → TASK.md (choisir la tâche) + → implémentation + → make test (vert obligatoire) + → conventional commit + → push (après confirmation) + → DONE.md +``` diff --git a/.claude/skills/ui-style/SKILL.md b/.claude/skills/ui-style/SKILL.md new file mode 100644 index 0000000..c6632d8 --- /dev/null +++ b/.claude/skills/ui-style/SKILL.md @@ -0,0 +1,223 @@ +--- +name: ui-style +description: Design system et harmonisation UI de Mangarr — layout de page canonique (Toolbar + flex + sections border-t), palette Tailwind, patterns composants (boutons, badges, upload, progression). Utiliser quand on crée ou modifie une page Vue ou un composant UI. +allowed-tools: Read, Grep, Glob +--- + +# Design system Mangarr — Guide UI + +Les pages de référence canoniques sont : +- `assets/vue/app/domain/manga/infrastructure/presentation/pages/NewImportPage.vue` +- `assets/vue/app/domain/conversion/infrastructure/presentation/pages/ConversionPage.vue` + +En cas de doute, les lire pour vérifier le pattern en vigueur. + +--- + +## 1. Layout de page canonique + +```vue + +``` + +**Règles absolues :** +- `flex flex-col h-full` toujours à la racine du template +- `` toujours en premier enfant direct de la racine +- `overflow-y-auto flex-1` pour le contenu scrollable +- `px-6 py-8` comme wrapper interne — **jamais** `container mx-auto` +- Chaque bloc logique = une `
` avec `border-t border-gray-200 dark:border-gray-700` +- **Jamais** de `

` volant dans le contenu — le titre de page va dans `toolbarConfig.leftSection` + +--- + +## 2. Configuration Toolbar + +```javascript +import { computed } from 'vue'; +import { SomeIcon } from '@heroicons/vue/24/outline'; + +const toolbarConfig = computed(() => ({ + leftSection: [ + { type: 'label', text: 'Titre de la page', class: 'text-sm font-medium' }, + ], + rightSection: [ + { + type: 'button', + icon: SomeIcon, + label: 'Action principale', + onClick: handler, + disabled: condition, + }, + // Bouton conditionnel : + ...(showAction ? [{ + type: 'button', + icon: OtherIcon, + label: 'Action contextuelle', + onClick: otherHandler, + }] : []), + ], +})); +``` + +- Icônes : Heroicons v24/outline (`@heroicons/vue/24/outline`) +- Boutons toolbar visibles uniquement si pertinents — utiliser le spread conditionnel +- `rightSection` peut être vide `[]` + +--- + +## 3. Headers de section + +```vue + +

+ Titre +

+ + +
+

+ Titre +

+ info contextuelle +
+``` + +--- + +## 4. Palette de couleurs + +| Usage | Classes Tailwind | +|-------|-----------------| +| Primaire (action principale) | `bg-green-600 hover:bg-green-700` | +| Secondaire | `bg-blue-600 hover:bg-blue-700` | +| Danger | `bg-red-600 hover:bg-red-700` | +| Désactivé | `disabled:bg-gray-400 disabled:cursor-not-allowed` | +| Texte principal | `text-gray-900 dark:text-gray-100` | +| Texte secondaire | `text-gray-600 dark:text-gray-300` | +| Texte subtil | `text-gray-500 dark:text-gray-400` | +| Étiquette section | `text-gray-400 dark:text-gray-500` | +| Fond carte / panel | `bg-white dark:bg-gray-800` | +| Bordure | `border-gray-200 dark:border-gray-700` | +| Séparateur de liste | `divide-y divide-gray-100 dark:divide-gray-700/50` | + +--- + +## 5. Boutons + +```vue + + + + + +``` + +--- + +## 6. Barre de progression + +```vue +
+
+
+``` + +> **Important :** toujours `bg-green-600`, jamais `bg-blue-600` pour les barres de progression. + +--- + +## 7. Liste avec séparateurs + +```vue +
+
+ +
+
+``` + +--- + +## 8. Zone de drop / upload de fichier + +```vue +
+ +

+ Message principal +

+

+ Précision format/taille +

+
+``` + +--- + +## 9. Pages non conformes à corriger + +Les pages suivantes dévient encore du pattern canonique : + +| Page | Chemin relatif | Déviations principales | +|------|---------------|----------------------| +| `HomePage.vue` | `domain/manga/.../pages/` | Pas de `px-6 py-8`, pas de sections `border-t` | +| `AddManga.vue` | `domain/manga/.../pages/` | Pas de Toolbar, pas de `flex flex-col h-full` | +| `ActivityPage.vue` | `domain/activity/.../pages/` | Pas de `flex flex-col`, pas de Toolbar intégré | +| `UserPreferencesPage.vue` | `domain/setting/.../pages/` | `h1` volant, pas de Toolbar | +| `ScrapperConfigurations.vue` | `domain/setting/.../pages/` | `h1` volant, `container mx-auto` | +| `ScrapperEdit.vue` | `domain/setting/.../pages/` | `container mx-auto` au lieu de `px-6 py-8` | +| `MangaDetails.vue` | `domain/manga/.../pages/` | Layout spécial (cover + chapitres), à traiter séparément | +| `ChapterPage.vue` | `domain/reader/.../pages/` | Layout lecteur spécialisé — **exception justifiée**, ne pas modifier | + +--- + +## 10. Checklist avant de livrer une page + +- [ ] Racine : `flex flex-col h-full` +- [ ] Premier enfant : `` +- [ ] Contenu scrollable : `overflow-y-auto flex-1` +- [ ] Wrapper interne : `px-6 py-8` (jamais `container mx-auto`) +- [ ] Blocs logiques : `
` +- [ ] Titre de page dans `toolbarConfig.leftSection`, pas de `

` dans le contenu +- [ ] Headers de section : classes `text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider` +- [ ] Barres de progression : `bg-green-600` (pas `bg-blue-600`) +- [ ] Dark mode : chaque couleur a sa variante `dark:` diff --git a/.gitignore b/.gitignore index 1a876c9..ccdb529 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,10 @@ yarn-error.log src/Controller/TestController.php .phpunit.cache/test-results /tests/Fixtures/pages/ + +# Claude Code — versionner les skills partagés, ignorer les fichiers perso +!.claude/ +!.claude/skills/ +!.claude/skills/** +.claude/settings.local.json +.claude/projects/