Mobile-Native Web Feel
Faire ressembler une app web mobile à une app installée — les petites corrections CSS et meta-tags qui effacent chaque indice de « site web »
- Quoi
- Faire ressembler une app web mobile à une app installée — les petites corrections CSS et meta-tags qui effacent chaque indice de « site web »
- Coût
- Gratuit
- Prérequis
- une app web orientée mobile ou PWA ; un vrai téléphone pour vérification (USB + inspecteur web Safari ou chrome://inspect)
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — un skill de correction issu de la philosophie de design engineering d'Emil Kowalski. Important et explicite : il s'agit d'apps web MOBILES (PWA), pas de React Native — une poignée de lignes CSS et de meta-tags décide si l'app semble installée ou ressemble à un site web dans un navigateur. Couvre la table des symptômes que tout dev web mobile rencontre : états hover collants derrière `(hover: hover) and (pointer: fine)`, suppression du flash de surbrillance au toucher, `100dvh`/`100svh` au lieu de `100vh`, champs à 16px (jamais `user-scalable=no` — une faute d'accessibilité), suppression du délai de 300 ms au toucher avec `touch-action: manipulation`, domptage du pull-to-refresh avec `overscroll-behavior`, padding de safe area sous l'encoche, feedback au toucher sur `:active`/`pointerdown`, `theme-color` par schéma, et la règle dure qu'une barre d'outils d'émulation desktop n'est pas un téléphone — tester sur du vrai matériel en USB. Direct et bref : chaque correction arrive avec son pourquoi, et quand la réponse honnête est « impossible à vérifier sans appareil », il le dit. Crédit : @emilkowalski. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Prérequis : une app web orientée mobile ou PWA ; un vrai téléphone pour vérification (USB + inspecteur web Safari ou chrome://inspect) Installe-moi « Sensation native sur mobile ». Faire ressembler une app web mobile à une app installée — les petites corrections CSS et meta-tags qui effacent chaque indice de « site web ». Note : il s'agit du web mobile/PWA, pas de React Native Dépôt : https://github.com/emilkowalski/skills/blob/main/skills/mobile-native/SKILL.md 1. Récupère le fichier SKILL.md du skill emilkowalski-skills-mobile-native depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « emilkowalski-skills-mobile-native ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. tout compte, clé API ou outil CLI mentionné dans les prérequis ci-dessus). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, tu peux l'utiliser ; sinon, l'accès public suffit. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Ne me demande jamais de coller des secrets dans le chat ; les identifiants passent par le coffre sécurisé ou des variables d'environnement. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.