mobile

ultrahand : mobile

Concevez des écrans de téléphone sous forme d'artefact Claude interactif qui bascule entre trois tailles de téléphone en portrait et paysage. Chaque règle que vous appliquez se trouve dans references/principles.md, et chaque règle cite references/sources.md. Les tailles et zones de sécurité sont dans references/presets.md.

1. Recueillir les exigences

Ne demandez que ce que vous ne pouvez pas déduire. Réglez ces points avant de dessiner :

• Plateforme : iOS, Android, ou les deux. Si les deux, utilisez des cibles de 48 unités et des motifs neutres.
• Périmètre : un seul écran ou un flux. Pour un flux, listez les écrans et comment les utilisateurs se déplacent entre eux : onglet, poussée, feuille ou modale plein écran.
• Tâche principale : la chose unique pour laquelle chaque écran est conçu. Cette action se trouve à portée du pouce.
• Contenu réel : noms, longueurs, compteurs et les chaînes les plus longues plausibles. Ne concevez pas avec du lorem ipsum.
• États des données : ce qui se charge, ce qui peut être vide, et ce qui peut échouer ou être hors ligne.
• Contraintes : couleurs de marque, polices, un système de conception existant, et s'il s'agit d'une application native ou du web.
• Thème : cherchez le thème du projet (design/THEME.md, *.tokens.json ; voir shared/theme/README.md) avant de choisir une couleur, taille ou espacement. S'il y en a un, concevez avec : exécutez node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html, passez --head theme.html à la construction, utilisez uniquement ses propriétés personnalisées (var(--color-surface), var(--space-gap-group)), et réutilisez les composants de son inventaire. Lorsque la conception a besoin de quelque chose que le thème ne fournit pas, utilisez le jeton le plus proche et listez l'ajout sous les questions ouvertes ; n'inventez pas de valeur. Sans thème, suivez les non-négociables dans shared/theme/rules.md et proposez le skill theme.

2. Lire les références

Lisez references/principles.md et references/presets.md avant de concevoir. Utilisez les motifs propres à la plateforme (barre d'onglets, pile de navigation, feuilles) plutôt que d'en inventer de nouveaux.

3. Composer l'écran

Les composants qui réussissent chacun leurs vérifications peuvent néanmoins donner un écran désordonné. Avant de construire, planifiez comment ils forment des sections et comment les sections forment l'écran, en utilisant les règles de composition du plugin dans shared/composition/principles.md :

• Écrivez la carte des sections. Pour chaque écran, listez ses sections (une barre de navigation, le contenu, une action principale et une barre d'onglets), le travail unique de chacune, ses membres ordonnés par fréquence d'utilisation, et son unique accent. Dites ce qui est contenu principal et ce qui est chrome : le contenu domine et le chrome s'efface.
• Regroupez avec de l'espace. Les écarts à l'intérieur d'un groupe sont nettement plus petits que les écarts entre les groupes ; n'ajoutez un conteneur que lorsque l'espace ne peut pas montrer le groupe.
• Un seul aspect par rôle, un seul accent par section. Même rôle, même style ; le statut et les étiquettes ne ressemblent jamais à des boutons ; l'accent fort va à une seule chose par section, et les états sélectionnés utilisent un traitement plus discret.
• Gardez-le petit. Environ trois tailles de police, un fait à un endroit, les membres fréquents visibles et les rares derrière un menu. Lorsqu'un changement ajoute quelque chose, réorganisez d'abord et n'ajoutez que ce qui mérite sa place.

4. Construire l'artefact du canevas

Construisez sur le canevas redimensionnable partagé du plugin (shared/canvas/ ; son README.md contient le contrat complet). Écrivez l'écran sous forme de screen.html et les paramètres de conception sous forme de config.json dans un dossier de travail, puis construisez :

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/mobile/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<nom de la conception>" --out index.html

Publiez index.html comme artefact. Les préréglages sont small 360 (Android), medium 393 et large 430 (iOS) ; la rotation donne chacun en paysage, et le passage de réduction à 320 de large se trouve sous Vérifications.

• config.json définit title et states (par exemple défaut, chargement, vide, erreur). Pour une conception uniquement iOS, définissez "initialPreset": "medium" ; pour iOS et Android ensemble, définissez "minTarget": 48 afin que chaque préréglage soit mesuré par rapport à la cible la plus stricte.
• Contrat de l'écran : un <template id="uh-screen"> avec des sections [data-screen], et data-nav, data-nav-replace (onglets), data-nav-back et data-show-state pour les clics. Remplissez les bords avec var(--uh-safe-top|right|bottom|left), qui suivent le préréglage et sa rotation ; déclarez les jetons qui les utilisent sur [data-screen], car :host ne peut pas les voir. Répondez à la taille avec @container screen (width >= …), pas @media. Texte en rem ; zones de clic, icônes et gouttières en px, ainsi un texte à 200 % agrandit les mots, pas les contrôles. Couleurs avec light-dark(). Le comportement va dans window.ultrahandSetup = function (canvas) { … }.
• Parties fixes : empilez tout ce qui est épinglé en bas (barre d'onglets, FAB, snackbar) dans un seul dock pour que rien ne se chevauche, et définissez scroll-padding sur [data-screen] pour que le focus défile sans être masqué par les barres fixes [WCAG-2.4.11]. En hauteur compacte ou texte à 200 %, laissez l'en-tête devenir statique [WCAG-1.4.4].
• Plateforme par préréglage : small est Android, medium et large sont iOS. Suivez canvas.size.platform pour les conventions qui diffèrent, comme le contrôle de retour, l'alignement du titre et la taille de la cible.
• Boutons intégrés : clair/sombre, texte à 200 %, le sélecteur d'état et afficher les cibles tactiles (44 pt, ou 48 dp sur les préréglages Android). Ne construisez pas les vôtres. Appelez canvas.refresh() après avoir ouvert une feuille pour que la superposition de cibles la voie.
• Disposez avec des unités flexibles et les encarts, pas des numéros de périphérique fixes, afin qu'une conception s'adapte à chaque préréglage.
• Rendez le flux principal cliquable : les onglets changent, les lignes poussent, et les feuilles s'ouvrent et se ferment. Dessinez les feuilles et les boîtes de dialogue dans l'écran ; n'utilisez jamais alert, confirm ou prompt.

5. Concevoir chaque préréglage

Pour chaque écran, travaillez sur small, puis medium, puis large, puis chacun en paysage. Corrigez chaque problème à la taille où il apparaît :

• small (360) : le texte et les boutons tiennent toujours sans tronquer les informations clés.
• large (430) : le contenu ne s'étire pas en longues lignes ni ne laisse d'espace mort.
• paysage : la hauteur courte montre encore le champ actif au-dessus du clavier, et la zone de sécurité latérale est respectée. Vérifiez-le aussi avec un texte à 200 % : l'en-tête fixe et le dock ensemble doivent laisser la majeure partie de l'écran pour le contenu.

Faites ensuite un passage rapide à la vérification de réduction à 320 de large.

6. Auto-vérification avant de présenter

Passez en revue chaque élément. Corrigez tout échec, ou nommez-le et dites pourquoi il est acceptable.

Composition (exécutez l'audit de composition, node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs", à la taille la plus grande et la plus petite, ou vérifiez à l'œil) :

• Flouté, l'écran montre les sections prévues, et le contenu principal attire l'œil en premier. Aucune tache lumineuse involontaire.
• Chaque section a un seul travail, ses membres groupés par fonction et fréquence, avec des écarts entre les groupes nettement plus grands que ceux à l'intérieur.
• Chaque section a au plus un élément fortement accentué ; les états sélectionnés sont discrets.
• Un seul style par rôle : comptez les styles de contrôle dans chaque section et justifiez tout supplément. Aucune étiquette ou statut ne ressemble à un bouton.
• Les lignes et sections s'alignent sur des bords partagés ; environ trois tailles de police sur l'écran.
• Aucun fait n'est montré deux fois, et rien à l'écran qui ne sert pas une tâche ici.
• Après un tour de modifications : listez ce qui a été ajouté ; l'écran n'est pas plus chargé que nécessaire.
• Uniquement des valeurs de thème : pas de couleurs brutes, pas d'espacement hors de l'échelle de 8 points, pas de tailles de police en dehors de l'échelle, et les composants d'inventaire sont réutilisés plutôt que reconstruits (shared/theme/rules.md NN-1, NN-2, NN-6, EV-4).

Composants et plateforme :

• Les cibles tactiles font au moins 44 × 44 pt (iOS) ou 48 × 48 dp (Android), avec espacement, et jamais en dessous de 24 × 24.
• L'action principale est accessible avec un seul pouce ; les actions destructrices sont éloignées de l'endroit où le pouce se repose.
• Rien d'interactif n'est sous la barre d'état, la découpe ou l'indicateur d'accueil, dans les deux orientations.
• Il y a 3 à 5 onglets de niveau supérieur, chacun avec une étiquette textuelle, et pas de hamburger solitaire.
• Chaque feuille a un bouton visible Fermer ou Annuler et un arrêt clair, et les feuilles ne s'empilent jamais. En ouvrir une déplace le focus dedans, Échap la ferme, et le focus revient à l'élément d'ouverture [NNG-SHEET].
• L'onglet sélectionné est marqué par plus que la couleur, comme un pilule d'indicateur ou une graisse [WCAG-1.4] [M3-NAVBAR], et la suppression de quelque chose offre une annulation tactile.
• Chaque champ a une étiquette au-dessus (pas un espace réservé), le bon clavier et type de saisie automatique, et reste visible avec le clavier levé.
• Les erreurs apparaissent en ligne, à côté du champ, et disent comment résoudre le problème ; la saisie tapée est conservée.
• Chaque geste a une alternative visible, et rien ne combat les gestes de bord du système.
• Le texte du corps fait 16–17 ou plus, et la disposition survit à un texte à 200 % sans perdre d'informations.
• Le contraste est d'au moins 4,5:1 pour le texte et 3:1 pour l'interface dans les deux modes clair et sombre, et la couleur n'est jamais le seul signal.
• Les états de chargement, vide et erreur sont conçus, et le chargement utilise l'indicateur approprié pour sa durée.
• La conception fonctionne à 320 de large sans défilement horizontal, et en paysage.

7. Présenter

Partagez le lien de l'artefact. En quelques lignes, énoncez la carte des sections (le travail et l'accent de chaque section), les décisions clés et le principe derrière chacune (citez la clé source), tout élément d'auto-vérification que vous avez accepté avec une raison, et toute ajout de thème proposé (pour le skill theme), et toute question ouverte.