ios-ux-prototype_skill

Overview

This skill generates self-contained interactive HTML prototypes that present iOS-style mobile UX flows inside realistic phone mockups. It produces HTML pages with iOS-native styling, phone frames (notch or Dynamic Island), flow arrows, and annotation callouts to visualize screen-to-screen navigation. The output is ready to open in a browser and share with stakeholders for review or documentation.

How this skill works

You copy the provided CSS design system into a new HTML file and compose a page using the recommended structure: page header, journey rows, and journey steps. Each journey step wraps a phone-frame and phone-screen where you place nav components, lists, forms, or action cards. Add flow-arrow elements between steps and use positioned annotation callouts to explain interactions or decisions.

When to use it

• Visualizing end-to-end user journeys and navigation flows.
• Creating mobile wireframes that look like native iOS screens.
• Documenting screen-to-screen patterns and alternative flows for engineers and designers.
• Presenting UI designs with annotated callouts during stakeholder reviews.
• Prototyping app structure and navigation before engineering implementation.

Best practices

• Copy the complete ios-design-system CSS into the <style> section so components render correctly.
• Organize each user journey into logical rows and numbered steps to keep flows readable.
• Use annotation callouts for key taps, keyboard behavior, or conditional navigation paths.
• Prefer semantic structure: nav-large or nav-inline for headers, segmented-control for tabbed areas.
• Keep flow-arrows between nearby frames and use section-dividers to separate alternative flows.

Example use cases

• Onboarding flow prototype with step-by-step screens and annotated taps.
• Settings page exploration showing nested navigation and segmented controls.
• Feature card grid demonstrating app home screen, detail screen, and action flows.
• Error and recovery paths with alternative-flow dividers and callout explanations.
• Developer handoff HTML documenting nav patterns, status bar states, and component examples.