# Tddworks Claude Skills IOS UX Prototype > iOS UX Prototype - Skill: `tomevault-io/tddworks-claude-skills-ios-ux-prototype` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/tddworks-claude-skills-ios-ux-prototype` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/tddworks-claude-skills-ios-ux-prototype/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/tddworks-claude-skills-ios-ux-prototype --- # iOS UX Prototype Create interactive HTML prototypes showing mobile app user journeys with realistic iPhone mockups. ## Quick Start 1. Copy CSS from `assets/ios-design-system.css` into a new HTML file 2. Structure: page header → journey rows → phone frames with content 3. Add flow arrows between screens and annotations for callouts ## Page Structure ```html [App] User Journey

Journey Title

Description of the navigation flow

``` ## Core Components ### Journey Step ```html
1
SCREEN NAME
9:41
``` **Note:** The phone frame uses a notch-style bezel by default. To use Dynamic Island style instead, add the `dynamic-island-style` class to `.phone-frame` and include a `
` element. ### Flow Arrow ```html
``` ### Annotation Callout ```html
Tap here →
``` ## Navigation Patterns ### Large Title Nav ```html

My Apps

``` ### Inline Nav with Back ```html
Back
Title Edit
``` ### Segmented Control (3-5 options) ```html
Tab 1
Tab 2
Tab 3
``` ### Scrollable Tabs (many options) ```html
iPhone 6.7"
iPhone 6.5"
iPad Pro
``` ## Content Components ### App List Row ```html
A
App Name
v1.0.0 · iOS
In Review ›
``` ### Action Card Grid ```html
📱

Feature

Description

``` ### List Group ```html
⭐
Setting ›
``` ### Form Card ```html
📦
Label value
``` ## Color Classes **Icons**: `.blue`, `.purple`, `.orange`, `.cyan`, `.green`, `.yellow`, `.red`, `.gray` **Badges**: `.app-badge.review` (orange), `.app-badge.ready` (green), `.app-badge.draft` (purple) **Highlight**: `.action-card.highlighted` (blue border glow) ## Section Divider (Alternate Flows) ```html
Alternative Flow
``` ## Resources - `assets/ios-design-system.css` - Complete CSS design system (copy into HTML) - `references/ios-components.md` - Full component documentation with all variants --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/tddworks) — claim your Tome and manage your conversions.