← Zurück zum Katalog

Skill · Version 1.0.0

Mobile Anwendungserfahrung

Gestaltet vollständige mobile Abläufe nach Plattformkonventionen, Berührung, Netzbedingungen und klaren Rückmeldungen.

mobile-app-ux

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze dies für auf Telefonen umständliche desktopähnliche Ansichten.

Wobei hilft er dir?

  • Passt Layout, Navigation und Bedienelemente an die Zielplattform an.
  • Deckt Laden, leere Inhalte, Fehler und Offlinezustände ab.
  • Koordiniert Tastatur, Berechtigungen und zugängliche Rückmeldungen.

Das könntest du fragen

Gestalte Terminbuchung für eine Hand bei schlechtem Netz ohne verdeckte Aktionen durch die Tastatur. Wähle auf einem kleinen Telefon einen Termin, verliere die Verbindung und wiederhole. Erhalte die Auswahl und unterscheide ungesendete Anfrage von bestätigter Buchung.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

Mobile App UX

Platform conventions

  • Follow iOS Human Interface Guidelines and Material Design on Android, through the repo's UI kit and existing components. Do not mix styles on one screen.
  • Android system back and the iOS edge swipe must work as expected; block them only to confirm discarding unsaved work.
  • Bottom tabs for 3–5 top-level destinations, stack navigation for drill-down, modals for focused tasks with a clear close. Keep each tab's state when switching.
  • Prefer native pickers, date inputs, share sheets and alerts.

Touch and layout

  • Touch targets at least 44x44 pt (iOS) or 48x48 dp (Android), with spacing. Enlarge the hit area rather than the visual if needed.
  • Primary actions within thumb reach; destructive actions separated and confirmed or undoable.
  • Respect safe areas: notch, Dynamic Island, home indicator, status bar, Android cutouts and gesture bar. Use the framework's safe-area utilities, never hardcoded insets.
  • Check small phones, large phones and tablets if supported.

States

  • Every data screen handles loading (skeleton, or spinner after a short delay), empty (explain and offer the next action), error (human message plus retry) and partial data.
  • Pull to refresh on lists that change; paginate long lists.
  • Optimistic updates only with rollback and a visible error on failure.

Offline and network

  • Assume slow or missing connectivity: show cached data with a stale hint, queue or disable writes, retry with backoff.
  • Never lose user input: keep drafts across errors, backgrounding and restarts.

Keyboard and input

  • The keyboard must not cover the focused input or the submit button (KeyboardAvoidingView, adjustResize, scroll into view).
  • Set keyboard type, autofill content type, autocapitalize and return key action per field; dismiss on tap outside or scroll.

Appearance and accessibility

  • Dark mode through semantic color tokens; check contrast in both themes and images or icons that assume a white background.
  • Dynamic Type and font scaling: layouts grow without clipping or overlap. Never disable scaling; test the largest sizes.
  • Screen reader labels on icon buttons (accessibilityLabel, Semantics, contentDescription) and a logical reading order.
  • Respect the reduce motion setting.

Feedback

  • Visible pressed state within 100 ms of every tap.
  • Haptics sparingly, with system haptic types: significant confirmations and errors, never every tap or scroll.

Permissions

  • Ask in context, when the feature needs it, after a short explanation. Never request everything on first launch.
  • Handle denied and limited states with a path to Settings; the app must still work without optional permissions.

Before you finish

  • Touch targets meet 44 pt / 48 dp; safe areas respected on notched devices.
  • Loading, empty, error and offline states exist for changed screens.
  • The keyboard hides no inputs or actions.
  • Dark mode and the largest font scale checked.
  • Permissions requested in context, with a denied path.
  • Back navigation correct on both platforms.

Enthaltene Dateien 1

  • SKILL.md

Über dieses Skill-Paket

mobile-app-ux

mobile-app-ux: Gestaltet und entwickelt eigenständige, responsive Oberflächen mit klaren nächsten Schritten auf jeder Bildschirmgröße.

Details…Weniger anzeigen

mobile-app-ux

mobile-app-ux: Gestaltet und entwickelt eigenständige, responsive Oberflächen mit klaren nächsten Schritten auf jeder Bildschirmgröße.

Enthält den vollständigen Skill und seine Begleitdateien (1 Dateien). Der genaue, ursprünglich verfasste Anwendungsbereich bleibt unten erhalten.

Ursprüngliche Skill-Beschreibung (Quellsprache)

Use when designing or building mobile app screens, iOS or Android UI, touch targets, gestures, navigation, tabs, safe area, notch, keyboard, loading, empty and error states, offline, dark mode, dynamic type, font scaling, haptics or permission prompts.

Installiere den Skill, prüfe seine Quelle und Vertrauenseinstellungen und aktiviere ihn für das passende Projekt oder den Agenten.

Voraussetzungen

  • Orqestria auf deinem Computer installiert.