mobile

ultrahand: mobile

Entwerfe Handy-Bildschirme als interaktives Claude-Artfakt, das zwischen drei Handygrößen im Hoch- und Querformat umschaltet. Jede Regel, die du anwendest, steht in references/principles.md, und jede Regel zitiert references/sources.md. Die Größen und Safe Areas stehen in references/presets.md.

1. Anforderungen erfassen

Frage nur nach dem, was du nicht ableiten kannst. Kläre diese Punkte, bevor du zeichnest:

• Plattform: iOS, Android oder beide. Wenn beide, verwende 48-Einheiten-Targets und plattformneutrale Muster.
• Umfang: ein Bildschirm oder ein Flow. Bei einem Flow liste die Bildschirme auf und wie man sich zwischen ihnen bewegt: Tab, Push, Sheet oder Vollbild-Modal.
• Primäraufgabe: die eine Sache, für die jeder Bildschirm da ist. Diese Aktion befindet sich in Daumenreichweite.
• Echte Inhalte: Namen, Längen, Zählungen und die längsten plausiblen Zeichenfolgen. Gestalte nicht mit Lorem Ipsum.
• Datenzustände: was lädt, was leer sein kann, und was fehlschlagen oder offline gehen kann.
• Einschränkungen: Markenfarben, Schriften, ein bestehendes Designsystem und ob es sich um eine native App oder das Web handelt.
• Theme: Suche nach dem Theme des Projekts (design/THEME.md, *.tokens.json; siehe shared/theme/README.md), bevor du eine Farbe, Größe oder einen Abstand wählst. Wenn es eines gibt, gestalte damit: führe node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html aus, übergib --head theme.html an den Build, verwende nur seine benutzerdefinierten Eigenschaften (var(--color-surface), var(--space-gap-group)), und verwende die Komponenten aus seinem Inventar wieder. Wenn das Design etwas braucht, das das Theme nicht bietet, verwende den nächstgelegenen Token und liste die Ergänzung unter offenen Fragen auf; erfinde keinen Wert. Ohne Theme folge den nicht verhandelbaren Regeln in shared/theme/rules.md und biete den theme-Skill an.

2. Die Referenzen lesen

Lies references/principles.md und references/presets.md bevor du gestaltest. Verwende die plattformeigenen Muster (Tab-Leiste, Navigationsstapel, Sheets), anstatt neue zu erfinden.

3. Den Bildschirm komponieren

Komponenten, die jeweils ihre Prüfungen bestehen, können dennoch einen unübersichtlichen Bildschirm ergeben. Bevor du baust, plane, wie sie Abschnitte bilden und wie die Abschnitte den Bildschirm bilden, unter Verwendung der Kompositionsregeln des Plugins in shared/composition/principles.md:

• Schreibe die Abschnittskarte. Liste für jeden Bildschirm seine Abschnitte auf (eine Navigationsleiste, der Inhalt, eine primäre Aktion und eine Tab-Leiste), die jeweilige einzelne Aufgabe, seine Mitglieder geordnet nach Nutzungshäufigkeit und seine eine Hervorhebung. Sage, was primärer Inhalt und was Chrome ist: Der Inhalt dominiert und das Chrome tritt zurück.
• Gruppiere mit Abstand. Abstände innerhalb einer Gruppe sind deutlich kleiner als Abstände zwischen Gruppen; füge einen Container nur hinzu, wenn der Abstand die Gruppe nicht zeigen kann.
• Ein Look pro Rolle, eine Hervorhebung pro Abschnitt. Gleiche Rolle, gleicher Stil; Status und Labels sehen niemals aus wie Schaltflächen; der starke Akzent geht an eine Sache pro Abschnitt, und ausgewählte Zustände verwenden eine ruhigere Behandlung.
• Halte es klein. Ungefähr drei Schriftgrößen, eine Tatsache an einer Stelle, häufige Mitglieder im Blick und seltene hinter einem Menü. Wenn eine Änderung etwas hinzufügt, reorganisiere zuerst und füge nur das hinzu, was seinen Platz verdient.

4. Das Canvas-Artfakt erstellen

Baue auf der gemeinsam genutzten veränderbaren Leinwand des Plugins auf (shared/canvas/; seine README.md enthält den vollständigen Vertrag). Schreibe den Bildschirm als screen.html und die eigenen Einstellungen des Designs als config.json in einen Arbeitsordner, dann baue:

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

Veröffentliche index.html als Artfakt. Die Voreinstellungen sind small 360 (Android), medium 393 und large 430 (iOS); Drehen gibt jede im Querformat, und der 320-breite Reflow-Durchlauf liegt unter Prüfungen.

• config.json setzt title und states (z. B. Standard, Laden, Leer, Fehler). Für ein reines iOS-Design setze "initialPreset": "medium"; für iOS und Android zusammen setze "minTarget": 48, damit jede Voreinstellung am strengeren Ziel gemessen wird.
• Bildschirmvertrag: ein <template id="uh-screen"> mit [data-screen]-Abschnitten, und data-nav, data-nav-replace (Tabs), data-nav-back und data-show-state für Klicks. Ränder mit var(--uh-safe-top|right|bottom|left) polstern, die der Voreinstellung und ihrer Drehung folgen; deklariere Tokens, die sie verwenden, auf [data-screen], da :host sie nicht sehen kann. Reagiere auf die Größe mit @container screen (width >= …), nicht mit @media. Text in rem; Treffbereiche, Symbole und Ränder in px, damit 200 % Text die Wörter vergrößert, nicht die Bedienelemente. Farben mit light-dark(). Verhalten in window.ultrahandSetup = function (canvas) { … }.
• Hängende Teile: Staple alles, was unten fixiert ist (Tab-Leiste, FAB, Snackbar), in einem Dock, damit sich nichts überlappt, und setze scroll-padding auf [data-screen], damit der Fokus über hängende Balken hinaus scrollt [WCAG-2.4.11]. Bei kompakter Höhe oder 200 % Text lasse den Header statisch werden [WCAG-1.4.4].
• Plattform pro Voreinstellung: small ist Android, medium und large sind iOS. Folge canvas.size.platform für Konventionen, die sich unterscheiden, wie das Zurück-Steuerelement, die Titelausrichtung und die Zielgröße.
• Eingebaute Umschalter: hell/dunkel, 200 % Text, der Zustandsauswähler und Touch-Ziele anzeigen (44 pt oder 48 dp bei Android-Voreinstellungen). Baue keine eigenen. Rufe canvas.refresh() auf, nachdem du ein Sheet geöffnet hast, damit die Ziel-Overlay es sieht.
• Gestalte mit flexiblen Einheiten und den Einsätzen, nicht mit festen Gerätenummern, damit sich ein Design an jede Voreinstellung anpasst.
• Mache den Hauptfluss anklickbar: Tabs wechseln, Zeilen pushen und Sheets öffnen und schließen. Zeichne Sheets und Dialoge im Bildschirm; verwende niemals alert, confirm oder prompt.

5. Jede Voreinstellung gestalten

Arbeite für jeden Bildschirm zuerst small, dann medium, dann large, dann jede im Querformat durch. Behebe jedes Problem in der Größe, in der es auftritt:

• small (360): Text und Schaltflächen passen immer noch, ohne wichtige Informationen abzuschneiden.
• large (430): Inhalt dehnt sich nicht zu langen Zeilen aus oder hinterlässt toten Raum.
• Querformat: Die geringe Höhe zeigt den fokussierten Bereich immer noch über der Tastatur, und der seitliche Safe Area wird respektiert. Überprüfe es auch mit 200 % Text: Der hängende Header und das Dock müssen zusammen den größten Teil des Bildschirms für Inhalt freigeben.

Führe dann einen schnellen Durchlauf beim 320 breiten Reflow-Check durch.

6. Selbstprüfung vor der Präsentation

Gehe jeden Punkt durch. Behebe jedes Problem oder benenne es und sage, warum es akzeptabel ist.

Komposition (führe das Kompositions-Audit durch, node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs", bei der größten und kleinsten Größe oder prüfe mit dem Auge):

• Unscharf zeigt der Bildschirm die beabsichtigten Abschnitte, und der primäre Inhalt zieht zuerst den Blick auf sich. Kein unbeabsichtigter heller Punkt.
• Jeder Abschnitt hat eine Aufgabe, seine Mitglieder nach Funktion und Häufigkeit gruppiert, mit Abständen zwischen Gruppen deutlich größer als innerhalb der Gruppen.
• Jeder Abschnitt hat höchstens ein stark hervorgehobenes Element; ausgewählte Zustände sind ruhig.
• Ein Stil pro Rolle: Zähle die Steuerelementstile in jedem Abschnitt und begründe etwaige zusätzliche. Kein Label oder Status sieht aus wie eine Schaltfläche.
• Zeilen und Abschnitte sind an gemeinsamen Kanten ausgerichtet; etwa drei Schriftgrößen auf dem Bildschirm.
• Keine Tatsache wird zweimal gezeigt, und nichts auf dem Bildschirm, das hier keiner Aufgabe dient.
• Nach einer Runde Änderungen: Liste auf, was hinzugefügt wurde; der Bildschirm ist nicht überladener als nötig.
• Nur Theme-Werte: keine Rohfarben, keine Abstände außerhalb des 8-Punkt-Rasters, keine Schriftgrößen außerhalb der Skala, und Inventarkomponenten werden wiederverwendet, nicht neu erstellt (shared/theme/rules.md NN-1, NN-2, NN-6, EV-4).

Komponenten und Plattform:

• Touch-Ziele sind mindestens 44 × 44 pt (iOS) oder 48 × 48 dp (Android), mit Abstand, und niemals kleiner als 24 × 24.
• Die primäre Aktion ist mit einem Daumen erreichbar; destruktive Aktionen sind entfernt von der Daumenposition.
• Nichts Interaktives befindet sich unter der Statusleiste, dem Cutout oder der Home-Anzeige, in keiner Ausrichtung.
• Es gibt 3–5 Tabs auf oberster Ebene, jeder mit einem Textlabel, und keinen einsamen Hamburger.
• Jedes Sheet hat eine sichtbare Schließen- oder Abbrechen-Schaltfläche und eine klare Rasterung, und Sheets stapeln sich nie. Das Öffnen eines Sheets verschiebt den Fokus hinein, Esc schließt es, und der Fokus kehrt zum Öffner zurück [NNG-SHEET].
• Der ausgewählte Tab wird durch mehr als Farbe markiert, z. B. durch eine Indikator-Pille oder -Gewichtung [WCAG-1.4] [M3-NAVBAR], und das Entfernen von etwas bietet ein tippbares Rückgängig.
• Jedes Feld hat ein Label darüber (kein Platzhalter), den richtigen Tastatur- und Autovervollständigungstyp und bleibt bei geöffneter Tastatur sichtbar.
• Fehler erscheinen inline, neben dem Feld, und sagen, wie das Problem zu beheben ist; eingegebene Eingabe wird beibehalten.
• Jede Geste hat eine sichtbare Alternative, und nichts bekämpft die System-Randgesten.
• Fließtext ist 16–17 pt oder größer, und das Layout überlebt 200 % Text ohne Informationsverlust.
• Der Kontrast beträgt mindestens 4,5:1 für Text und 3:1 für UI sowohl im hellen als auch im dunklen Modus, und Farbe ist niemals das einzige Signal.
• Lade-, Leer- und Fehlerzustände sind gestaltet, und das Laden verwendet den richtigen Indikator für seine Dauer.
• Das Design funktioniert bei 320 Breite ohne horizontales Scrollen und im Querformat.

7. Präsentieren

Teile den Artfakt-Link. Gib in wenigen Zeilen die Abschnittskarte an (Aufgabe und Hervorhebung jedes Abschnitts), die wichtigsten Entscheidungen und das Prinzip dahinter (zitiere den Quellenschlüssel), jedes selbstgeprüfte Element, das du mit einem Grund akzeptiert hast, und alle vorgeschlagenen Theme-Ergänzungen (für den theme-Skill) sowie alle offenen Fragen.