ui-mobile

Überblick über die ui-mobile-Skill

Wofür die ui-mobile-Skill gedacht ist

Die ui-mobile-Skill ist ein praxisnaher Leitfaden für den Bau von mobiler UI, die in echten Apps funktioniert – besonders in React Native und angrenzenden Mobile-Codebases. Sie richtet sich an Contributors, die schnellere und sicherere Entscheidungen zu Touch-Zielen, Kontrast und mobilen Interaktionsmustern für UI Design treffen müssen, nicht nur an ästhetischem Feinschliff interessiert sind.

Für wen sie gedacht ist

Nutze die ui-mobile-Skill, wenn du Screens für iOS/Android entwirfst oder überarbeitest, eine mobile Component Library prüfst oder aus einer groben Produktidee mobile-taugliche UI machst. Besonders hilfreich ist sie, wenn du einen promptbaren Standard für Accessibility und Interaktionsdetails brauchst, die in einem allgemeinen Design-Prompt leicht untergehen.

Was sie unterscheidet

Das Repo ist dort klar opinionated, wo es zählt: Mindestgrößen für Touch-Flächen, WCAG-Erwartungen an den Kontrast und sichtbare Interaktionsregeln werden als harte Constraints behandelt, nicht als Empfehlungen. Dadurch eignet sich ui-mobile besser für Installationsentscheidungen, wenn das größte Risiko darin besteht, optisch ansprechende, aber unbenutzbare Mobile-UI auszuliefern.

Wie du die ui-mobile-Skill verwendest

Installieren und aktivieren

Installiere die ui-mobile-Skill mit dem Skill-Manager deines Projekts und verknüpfe sie dann mit der Mobile-UI-Aufgabe, die erledigt werden soll. Eine typische ui-mobile-Installation ist besonders wertvoll, wenn die Aufgabe konkret ist, etwa: „Überarbeite dieses Formular für die Bedienung mit dem Daumen“ oder „Prüfe diese Buttons auf Accessibility“.

Gib ihr die richtige Eingabeform

Die besten Eingaben beschreiben Plattform, Screen-Kontext, Component-Typ und Einschränkungen. Statt „mach diese Mobile-UI besser“ sag zum Beispiel: „Verbessere diesen React-Native-Checkout-Screen für die Einhandbedienung, behalte die bestehenden Markenfarben bei, sofern der Kontrast reicht, und behebe alle Probleme mit Touch-Zielen oder Sichtbarkeit.“ So liefert die ui-mobile-Skill brauchbare UI-Design-Hinweise statt allgemeiner Vorschläge.

Lies zuerst die richtigen Dateien

Starte mit SKILL.md, um die verbindlichen Regeln zu verstehen, und prüfe dann alle Projekt-Prompts oder begleitenden Hinweise, die dein Repo verwendet. In diesem Repository ist die Dateistruktur schlank, daher ist SKILL.md die zentrale Quelle für die Nutzung von ui-mobile; es gibt keine unterstützenden Scripts oder Referenzordner, auf die du dich stützen könntest.

Wende die Einschränkungen in deinem Workflow an

Behandle Größe der Touch-Ziele und Kontrast als Gatekeeper, bevor du das Layout verfeinerst. Wenn du das Modell bitten willst, Code zu generieren, nenne die Plattform und den Component-Typ und lass es dann die Mindestgrößen für Hit Areas, lesbaren Text und sichtbare Zustandswechsel prüfen. Ein starker Prompt für die Nutzung von ui-mobile sollte sowohl die UI als auch den Grund dafür abfragen, warum jede mobile Einschränkung erfüllt ist.

FAQ zur ui-mobile-Skill

Ist ui-mobile nur für React Native?

Nein. Der Schwerpunkt der Skill liegt auf React Native, aber die Regeln sind auch für UI-Arbeit auf iOS/Android allgemein relevant. Wenn dein Stack Flutter oder ein anderes Mobile-Framework ist, kann die ui-mobile-Skill trotzdem bei Accessibility- und Interaktionsentscheidungen helfen; du solltest die Ausgabe dann aber an dein Framework anpassen.

Wann sollte ich diese Skill nicht verwenden?

Verwende ui-mobile nicht, wenn deine Aufgabe desktop-first, rein inhaltsbezogen oder nichts mit interaktiver Mobile-UI zu tun hat. Sie ist auch kein guter Fit, wenn du reine Markenexploration willst, ohne mobile Usability-Constraints durchzusetzen.

Ist das besser als ein normaler Prompt?

Meistens ja, wenn das Risiko in Mobile-Usability-Regressionen liegt. Ein normaler Prompt kann ästhetisch akzeptable Ergebnisse liefern, aber die ui-mobile-Skill lenkt das Modell auf Constraints, die in der Praxis zählen: erreichbare Controls, lesbarer Text und mobile-spezifische Sichtbarkeitsregeln.

Ist sie anfängerfreundlich?

Ja, wenn du den Screen und das Problem beschreiben kannst. Einsteiger holen den größten Nutzen heraus, wenn sie jeweils nur ein Component oder einen Screen anfragen und die aktuelle UI, das gewünschte Geräteverhalten sowie alle festgelegten Design-Tokens angeben.

So verbesserst du die ui-mobile-Skill

Beginne mit der schwierigsten Anforderung

Der größte Gewinn entsteht, wenn du genau das benennst, was am ehesten scheitert. Bei ui-mobile sind das oft Touch-Target-Größe, Kontrast oder ein enges Layout. Wenn du sagst: „Erhalte das Design, aber mache jedes Tap-Target mindestens 44x44 und halte den Text WCAG-AA-konform“, wird die Ausgabe in der Regel deutlich handlungsorientierter.

Gib plattformspezifischen Kontext an

Mobile UI verhält sich auf iOS und Android unterschiedlich, und die Skill arbeitet besser, wenn du das Zielsystem nennst. Ein Prompt wie „iOS Bottom Sheet für Kontenaktionen“ liefert bessere ui-mobile-Ergebnisse als „mobile modal“, weil Abstände, Safe Areas und Interaktionserwartungen klarer sind.

Bitte um Checks, nicht nur um Output

Die besten ui-mobile-Ergebnisse enthalten eine Selbstprüfung. Bitte um eine kurze Validierungsliste wie: „Bestätige, dass jedes interaktive Element die Mindestgröße erfüllt, benenne mögliche Kontrastprobleme und markiere Elemente, die hinter der Tastatur oder der System-UI verschwinden könnten.“ So sinkt die Chance, ein optisch gelungenes, aber fragiles Design abzunehmen.

Iteriere auf konkrete Fehler

Wenn der erste Durchgang fast passt, aber noch nicht gut genug ist, antworte mit konkreten Mängeln: „Der Secondary Button ist zu klein“, „Icon-Beschriftungen haben zu wenig Kontrast“ oder „Das Formular ist mit einer Hand schwer zu bedienen“. Das gibt der ui-mobile-Skill ein viel besseres Korrekturziel, als erneut nur zu verlangen, die „Mobile Usability zu verbessern“.