← Zurück zum Katalog

Skill · Version 1.0.0

Mobiles Design übergeben

Übersetzt mobile Designentscheidungen in umsetzbare Bildschirmabläufe, Zustandsregeln und beobachtbare Abnahmekriterien.

mobile-design-handoff

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze dies, wenn Entwickler mehr als statische Entwürfe benötigen.

Wobei hilft er dir?

  • Dokumentiert Einstiegspunkte, Rücknavigation und Komponentenhierarchie.
  • Spezifiziert Eingaben, sichere Bildschirmbereiche und Plattformunterschiede.
  • Ergänzt Ausnahmen, Zustandsmatrizen und ungeprüfte Annahmen.

Das könntest du fragen

Bereite Buchungsübergabe mit Benachrichtigungseinstieg, Abbruch, Tastaturverhalten und konkreten Abnahmeprüfungen vor. Beschreibe dieselbe Buchung aus Benachrichtigung und Kalender. Entwickler kennen das gewünschte Zurück-Ziel und die Wiederaufnahme nach abgewiesener Speicherung.

Ausführliche Dokumentation

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

Details…Weniger anzeigen

Design Handoff & State Specification

Deliver complete, unambiguous mobile specifications so the mobile developer can implement every screen, interaction, state and edge case without guessing.

1. The standard handoff structure

Structure every mobile design specification and handoff in this order:

  1. User goal & context: who the user is, the trigger/situation, and the measurable outcome of the flow.
  2. Screen flow & navigation map: entry points (tabs, deep links, notifications), screen sequence, modal vs push transitions, and back/cancel behavior.
  3. Screens & component hierarchy: layout structure, reusable vs new components, design tokens, safe-area behavior and responsive rules across phone/tablet sizes.
  4. Interactions & inputs: tap actions, gestures (plus visible alternatives), keyboard types, return-key actions, focus progression and haptic/visual feedback.
  5. Complete state matrix & exceptions:
    • Loading: initial skeleton/spinner, pull-to-refresh, and in-flight button/submission states.
    • Empty: first-time empty state vs zero-results search/filter state, with the next action.
    • Populated & edge content: single item, many items (pagination/infinite scroll), long text, missing optional fields or images.
    • Error & offline: field validation errors, server errors, network loss/timeout, stale cached data indicator, and retry/recovery actions.
    • Interrupted & resumed: behavior when backgrounded, rotated or reopened mid-task.
  6. Platform differences (iOS vs Android): where the two platforms share product logic and where navigation bars, sheets, pickers, permissions or back gestures follow native platform conventions.
  7. Testable acceptance criteria: concrete, observable checks for the developer and reviewer/tester, plus an explicit list of any unverified assumptions or simulated prototype limits.

Before you finish

  • Handoff follows: user goal -> screen flow -> components -> interactions -> states & exceptions -> platform differences -> acceptance criteria.
  • Loading, empty, populated, long-content, offline, error and interrupted states are all specified.
  • No critical interaction or edge case is left for the developer to invent during coding.

Enthaltene Dateien 1

  • SKILL.md

Über dieses Skill-Paket

mobile-design-handoff

mobile-design-handoff: Gestaltet mobile Abläufe für iOS und Android mit angenehmer Navigation, zugänglichen Bedienelementen und verständlichen Unterbrechungszuständen.

Details…Weniger anzeigen

mobile-design-handoff

mobile-design-handoff: Gestaltet mobile Abläufe für iOS und Android mit angenehmer Navigation, zugänglichen Bedienelementen und verständlichen Unterbrechungszuständen.

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 preparing mobile UX/UI specifications and design handoffs for mobile developers: documenting user goals, screen flows, component states, edge cases, platform differences and testable acceptance criteria.

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.