tablet

ultrahand : tablette

Concevez des écrans de tablette en tant qu'artefact interactif Claude. L'artefact bascule entre les tailles iPad et Android dans les deux orientations, s'accroche aux largeurs de fractionnement (1/3, 1/2, 2/3) et se réorganise en direct lorsque vous faites glisser une fenêtre de la pleine largeur jusqu'à 320. Chaque règle que vous appliquez se trouve dans references/principles.md, et chaque règle cite references/sources.md. Les tailles, fractionnements et classes de taille 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 : iPadOS, Android, ou les deux. Si les deux, utilisez des cibles de 48 unités et des motifs neutres pour la plateforme.
• Périmètre : un écran ou un flux. Pour un flux, listez les écrans et comment les personnes se déplacent entre eux : barre latérale ou rail, liste vers détail, feuille, popover ou nouvelle fenêtre.
• Tâche principale : l'unique objectif de chaque écran, et la disposition canonique qui lui correspond (liste-détail, volet de support, fil d'actualité, ou un seul volet).
• Contenu réel : noms, longueurs, quantités et les chaînes plausibles les plus longues. 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.
• Entrées : tactile uniquement, ou également clavier, trackpad ou souris, ou Pencil. Supposez que tous sont possibles sauf indication contraire.
• Multitâche : ce que les personnes font à côté de cette application (référence côte à côte, glisser-déposer du contenu). Attendez-vous à des fenêtres de 320 de large jusqu'au plein écran.
• Contraintes : couleurs de marque, polices, un système de design existant, et s'il s'agit d'une application native ou web.
• Thème : recherchez le thème du projet (design/THEME.md, *.tokens.json ; voir shared/theme/README.md) avant de choisir toute 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 le design 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 règles non négociables dans shared/theme/rules.md et proposez la compétence 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 latérale ou rail, vue fractionnée, popovers, commandes de barre de menu) plutôt que d'en inventer de nouveaux.

3. Composer l'écran

Les composants qui passent leurs vérifications peuvent néanmoins aboutir à 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 le plan des sections. Pour chaque écran, listez ses sections (une barre latérale, un volet de liste, un volet de détail avec sa barre d'outils, et un inspecteur), leur tâche unique, leurs membres ordonnés par fréquence d'utilisation, et leur accent unique. Dites ce qui est contenu principal et ce qui est chrome : le contenu domine et le chrome s'efface.
• Groupez avec de l'espace. Les espaces à l'intérieur d'un groupe sont clairement plus petits que les espaces entre les groupes ; ajoutez un conteneur uniquement lorsque l'espace ne peut pas montrer le groupe.
• Un aspect par rôle, un accent par section. Même rôle, même style ; les statuts et les étiquettes ne ressemblent jamais à des boutons ; l'accent fort va à une 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 comme screen.html et les paramètres de conception comme config.json dans un dossier de travail, puis construisez :

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

Publiez index.html en tant qu'artefact. Depuis references/presets.md, le canevas obtient :

• Plein écran : ipad-mini 744, ipad 820, ipad-13 1032 et android-tablet 800. La rotation donne chacun en mode paysage.
• Vue fractionnée : ipad-split, ipad-13-split et android-split, l'appareil en paysage avec votre application d'un côté d'un séparateur. Le séparateur s'accroche à 1/3, 1/2 et 2/3 (faites-le glisser, ou focalisez-le et appuyez sur les touches fléchées) ; Full est le préréglage plein écran en paysage.
• Redimensionnement libre : poignées de glissement de la taille préréglée jusqu'à 320 × 450.
• Vérifications : réorganisation à 320 de large, et paysage avec le clavier levé (1180 × 420).

Lors du glissement, la disposition doit se réorganiser en direct. Passer de la pleine largeur à la moitié doit se re-rendre en continu, traversant les points de rupture 840 et 600 sans rechargement et sans perte d'état. La lecture montre la largeur actuelle et sa classe de taille (compacte, moyenne, étendue, large).

• config.json définit title et states (par exemple, défaut, chargement, vide, erreur). Pour un design uniquement Android, définissez "initialPreset": "android-tablet" ; pour iPadOS et Android ensemble, définissez "minTarget": 48.
• Contrat d'écran : un <template id="uh-screen"> avec des sections [data-screen], et data-nav, data-nav-replace, data-nav-back et data-show-state pour les clics. Disposez par classe de taille avec @container screen (width >= 600px) et (width >= 840px), ou le data-width-class de la fenêtre, jamais par préréglage ou @media. Remplissez les bords avec var(--uh-safe-*), déclaré sur [data-screen] (:host ne peut pas les voir). Texte en rem ; zones tactiles, icônes et gouttières en pixels, de sorte que le texte à 200 % agrandisse les mots, pas les contrôles. Couleurs avec light-dark(). Le comportement se trouve dans window.ultrahandSetup = function (canvas) { … }.
• Basculements intégrés : clair/sombre, texte à 200 %, le sélecteur d'état et afficher les zones tactiles. Ne construisez pas les vôtres. Appelez canvas.refresh() après avoir ouvert une feuille, un popover ou un menu.
• Le pointeur et le clavier sont toujours actifs : le spectateur pilote l'artefact avec une souris et un clavier, donc donnez à chaque contrôle un état de survol, un menu contextuel par clic droit là où la plateforme en a un, un focus :focus-visible visible et des indices de raccourcis. Vérifiez le tactile avec la superposition des zones tactiles. Ne cachez rien de tout cela derrière votre propre basculement.
• Dans les états iPad fenêtré, gardez les contrôles de la barre d'outils de tête à l'écart des contrôles de fenêtre en haut à gauche.
• Rendez le flux principal cliquable : les éléments de navigation changent, les lignes sélectionnent ou poussent, les volets cachent et montrent, et les feuilles et popovers s'ouvrent et se ferment. N'utilisez jamais alert, confirm ou prompt.

5. Concevoir chaque classe de taille

Travaillez du large à l'étroit, et résolvez chaque problème à la taille où il apparaît :

1. Étendu / large, plein écran paysage (par exemple, ipad 1180) : choisissez les volets, la navigation (barre latérale ou rail) et la densité. Limitez les longueurs de ligne et les largeurs des contrôles.
2. Moyen, portrait plein écran et fractionnement 2/3 (par exemple, 820, 787) : réduisez à moins de volets, avec un rail ou une barre d'onglets en haut.
3. Compact, fractionnement 1/2 et 1/3 (par exemple, 590, 393) : la disposition téléphone, avec une barre inférieure ou une barre d'onglets, un volet à la fois et Retour vers la liste.
4. Glissez lentement de la pleine largeur à 320 et retour. Vérifiez que la sélection, la position de défilement et le texte saisi survivent. Vérifiez que la liste-détail conserve le détail ouvert lorsqu'elle se rétrécit, et sélectionne cet élément lorsqu'elle s'élargit.

Vérifiez ensuite les cas supplémentaires : réorganisation à 320 de large, paysage avec le clavier levé, et le préréglage android-tablet (si Android est dans le périmètre) dans les deux orientations.

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

Passez en revue chaque élément. Corrigez toute défaillance, ou nommez-la et dites pourquoi elle 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 plus grande et à la plus petite taille, ou vérifiez à l'œil) :

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

Composants et plateforme :

• La disposition change par classe de largeur (600 / 840), pas par appareil. Chaque fonctionnalité est accessible à chaque largeur, de 320 au plein écran.
• Le redimensionnement se réorganise en direct et conserve la sélection, le défilement, la saisie et la lecture. Rien ne se réinitialise à un point de rupture.
• La navigation s'adapte à la largeur : une barre inférieure en mode compact, et un rail, une barre d'onglets en haut ou une barre latérale au-dessus. Il y a cinq onglets de premier niveau ou moins, aucun caché ou désactivé.
• Les dispositions multi-volets suivent un motif canonique. La sélection est mise en évidence dans chaque volet, les volets cachés ont plus d'un moyen de revenir, et aucun volet de détail n'est laissé vide.
• Rien ne s'étire : boutons, champs, feuilles, dialogues et images ont des largeurs maximales, et le texte a une longueur de ligne lisible.
• Les zones tactiles mesurent au moins 44 × 44 pt (iOS) ou 48 × 48 dp (Android) et jamais moins de 24 × 24, même avec un pointeur. Le contenu principal se trouve au centre et les contrôles fréquents sont accessibles depuis les bords latéraux.
• Rien d'interactif ne se trouve sous la barre d'état, l'indicateur d'accueil, la barre des tâches ou les contrôles de fenêtre iPad, dans les deux orientations.
• Pointeur : chaque contrôle a un état de survol, un clic droit et un appui long ouvrent un menu contextuel, et rien n'est disponible uniquement au survol.
• Changer d'élément, fermer un panneau ou rejeter une feuille ne perd jamais le texte saisi ; Annuler survit à deux suppressions consécutives et remet l'élément dans son volet.
• Clavier : les flux principaux fonctionnent avec Tab et les flèches, le focus est toujours visible, les raccourcis standard fonctionnent, et Esc ferme, annule ou efface.
• Chaque glisser-déposer a une alternative non glisser, montre des cibles valides et peut être annulé.
• Les deux orientations fonctionnent, et le champ focalisé reste visible en paysage avec le clavier levé.
• La disposition survit au texte à 200 %, et le contraste est d'au moins 4,5:1 pour le texte et 3:1 pour l'interface utilisateur dans les deux modes clair et sombre.
• Les états de chargement, vide et erreur sont conçus pour chaque volet, pas seulement pour l'écran.
• Le design fonctionne à 320 de large sans défilement horizontal.

7. Présenter

Partagez le lien de l'artefact. En quelques lignes, énoncez le plan des sections (la tâche et l'accent de chaque section), les décisions clés et le principe derrière chacune (citez la clé source), comment la disposition change à chaque classe de largeur, tout élément d'auto-vérification que vous avez accepté avec une raison, et toute proposition d'ajout au thème (pour la compétence theme), et les questions ouvertes.