From 74366d4a8d1c38e24000f0a870cbb666a5815cdb Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sun, 30 Nov 2025 08:27:36 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 12 ++ README.md | 3 + plugin.lock.json | 45 +++++ skills/testing-mobile-responsive/SKILL.md | 215 ++++++++++++++++++++++ 4 files changed, 275 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 plugin.lock.json create mode 100644 skills/testing-mobile-responsive/SKILL.md diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..7c6bce1 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,12 @@ +{ + "name": "leapmultix-skill-testing-mobile-responsive", + "description": "Skill testing-mobile-responsive from LeapMultix", + "version": "1.0.0", + "author": { + "name": "Julien LE SAUX", + "email": "contact@jls42.org" + }, + "skills": [ + "./skills" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..fa3c3a9 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# leapmultix-skill-testing-mobile-responsive + +Skill testing-mobile-responsive from LeapMultix diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..4fd7657 --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,45 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:jls42/leapmultix:leapmultix-marketplace/skills/testing-mobile-responsive", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "d336c5b10ccab5781d421fd76658e0e77cc40bf3", + "treeHash": "e6e8d2fcb068d40c279220bd4431bffdbb20f9f721f56b11aea1274e60dc1249", + "generatedAt": "2025-11-28T10:19:15.161709Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "leapmultix-skill-testing-mobile-responsive", + "description": "Skill testing-mobile-responsive from LeapMultix", + "version": "1.0.0" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "10e8cf1882a40828d8317ec2ad8080b53eb2f25c4cbc4f52da5b28fb1b380a47" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "836a041edef2a3e0141ac0b33714be2b05b4c9c1760dd79f51e2f3ce80399d61" + }, + { + "path": "skills/testing-mobile-responsive/SKILL.md", + "sha256": "18556974588aeb5ef30057cc9bc889c5d5fe58128ac4a90c59cdbec1ec44dc01" + } + ], + "dirSha256": "e6e8d2fcb068d40c279220bd4431bffdbb20f9f721f56b11aea1274e60dc1249" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/testing-mobile-responsive/SKILL.md b/skills/testing-mobile-responsive/SKILL.md new file mode 100644 index 0000000..8bee9f1 --- /dev/null +++ b/skills/testing-mobile-responsive/SKILL.md @@ -0,0 +1,215 @@ +--- +name: testing-mobile-responsive +description: Tests mobile compatibility and responsive design (touch, viewports, mobile performance). Use after responsive CSS modifications, touch controls, or before releases +allowed-tools: Read, Grep, Glob, Bash, WebSearch +--- + +# Tests Responsive Mobile + +Guide les tests de responsive design et compatibilité mobile pour garantir une expérience optimale sur tous les appareils. + +## Table des matières + +- [Quand utiliser](#quand-utiliser) +- [Viewports essentiels](#viewports-essentiels) +- [Outils de test](#outils-de-test) +- [Checklist responsive](#checklist-responsive) +- [Workflow de test](#workflow-de-test) +- [Checklist finale](#checklist-finale) +- [En cas de doute](#en-cas-de-doute) + +## Quand utiliser + +- Modifications CSS responsive +- Ajout de touch controls +- Avant chaque release +- Bugs reportés sur mobile +- Tests performance mobile + +## Viewports essentiels + +**Desktop:** 1920×1080, 1366×768 +**Tablet:** 768×1024, 1024×768 +**Mobile:** 375×667, 390×844, 412×915 + +Trouve les breakpoints CSS utilisés dans le projet. + +## Outils de test + +### Chrome DevTools Device Mode + +Émule différents appareils : + +- Viewports prédéfinis +- Touch simulation +- Network/CPU throttling + +### Chrome DevTools MCP + +- Capture screenshots multi-device +- Tests automatisés layout +- Performance profiling + +### Tests sur vrais appareils + +**Essentiels :** + +- iPhone (iOS récent) +- Android (version récente) + +**Pourquoi :** + +- Touch réel ≠ simulation +- Performance réelle +- Bugs spécifiques device + +## Checklist responsive + +### 1. Layout + +- Layout fluide (pas de horizontal scroll) +- Contenu lisible sans zoom +- Images redimensionnées +- Colonnes en stack mobile + +### 2. Touch targets + +**Taille minimum :** + +- 44×44 px (iOS) +- 48×48 px (Android) +- 8px espacement minimum + +Trouve les tailles de touch targets dans le CSS. + +### 3. Navigation mobile + +- Menu burger accessible +- Animation fluide +- Fermeture backdrop ou X +- Pas de piège clavier + +### 4. Touch interactions + +**Supportés :** + +- Tap (pas de hover requis) +- Swipe si applicable +- Pinch-zoom si pertinent + +**Éviter :** + +- Hover-only interactions +- Gestures complexes + +Trouve les touch handlers dans le JavaScript. + +### 5. Formulaires mobiles + +**Optimisations :** + +- Input type approprié (`email`, `tel`, `number`) +- `autocomplete` actif +- Labels visibles +- Clavier adapté au type + +Examine les formulaires et leur configuration. + +### 6. Images responsive + +**Techniques :** + +- `srcset` pour résolutions multiples +- `` pour art direction +- Lazy loading +- WebP avec fallback + +Trouve la stratégie d'images responsive. + +### 7. Typography + +**Tailles :** + +- 16px minimum corps de texte +- Line-height ≥ 1.5 +- rem/em pour scalabilité + +Examine les tailles de police CSS. + +### 8. Performance mobile + +**Métriques cibles :** + +- First Contentful Paint < 2s (3G) +- Time to Interactive < 5s (3G) +- Lighthouse Performance > 80 + +Lance Lighthouse en mode mobile. + +## Workflow de test + +### 1. Tests DevTools + +Pour chaque viewport clé : + +- Layout adaptatif +- Touch targets simulation +- Performance +- Screenshot + +### 2. Tests vrais devices + +iPhone et Android : + +- Navigation complète +- Touch interactions réelles +- Formulaires +- Jeux arcade si applicable + +### 3. Tests throttling + +Avec 3G + 4x CPU : + +- Temps de chargement +- Fluidité interactions +- FPS jeux arcade + +### 4. Corrections + +Priorise : + +1. Bloquants (layout cassé) +2. UX dégradée (touch targets petits) +3. Performance (chargement lent) + +## Checklist finale + +- [ ] Tous viewports testés (mobile, tablet, desktop) +- [ ] Touch targets ≥ 44×44 px +- [ ] Pas de horizontal scroll +- [ ] Menu mobile fonctionnel +- [ ] Formulaires optimisés (input types) +- [ ] Images responsive (srcset/picture) +- [ ] Typography lisible (16px min) +- [ ] Performance 3G acceptable (< 5s TTI) +- [ ] Testé sur vrais appareils (iOS + Android) +- [ ] Lighthouse Mobile > 80 +- [ ] Pas de hover-only interactions + +## En cas de doute + +**Source :** Vrais appareils + Lighthouse Mobile + +**Règles absolues :** + +1. Toujours tester sur vrais appareils (iOS + Android) +2. Toujours tester avec 3G throttling +3. Touch targets minimum 44×44 px +4. Jamais hover-only interactions +5. Lighthouse Mobile > 80 obligatoire + +**Workflow minimal :** + +- DevTools pour iterations rapides +- Vrais appareils pour validation finale +- Lighthouse mobile pour métriques