Initial commit
This commit is contained in:
Zhongwei Li
12
.claude-plugin/plugin.json
Normal file
12
.claude-plugin/plugin.json
Normal file
@@ -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"
|
||||
]
|
||||
}
|
||||
3
README.md
Normal file
3
README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# leapmultix-skill-testing-mobile-responsive
|
||||
|
||||
Skill testing-mobile-responsive from LeapMultix
|
||||
45
plugin.lock.json
Normal file
45
plugin.lock.json
Normal file
@@ -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": []
|
||||
}
|
||||
}
|
||||
215
skills/testing-mobile-responsive/SKILL.md
Normal file
215
skills/testing-mobile-responsive/SKILL.md
Normal file
@@ -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
|
||||
- `<picture>` 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
|
||||
Reference in New Issue
Block a user