Run any Skill in Manus with one click

ios-ux-prototype

Stars37

Forks6

UpdatedJune 13, 2026 at 08:00

Create interactive iOS/mobile app UX flow prototypes as HTML documents with realistic phone mockups. Use when: (1) Visualizing user journeys and navigation flows, (2) Creating mobile app wireframes, (3) Documenting screen-to-screen navigation patterns, (4) Presenting iOS UI designs with annotations, (5) Prototyping app architecture before implementation. Generates self-contained HTML files with iOS-native styling, phone frames, flow arrows, and callout annotations.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

tddworks

tddworks/claude-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

5 files

SKILL.md

readonly

More from this repository

same repository

feature-lifecycle

tddworks/claude-skills

Full-lifecycle guide for implementing a feature end-to-end in a London-school DDD Swift/iOS codebase (or any layered Domain/Infrastructure/App project that uses protocol + concrete impl aggregates, narrow infrastructure ports, and Chicago-school state-based TDD). Use this skill whenever the user asks to **build**, **implement**, **add**, **ship**, or **develop** a feature — including vague asks like "let's add X", "build me Y", "implement Z", or "wire up the W flow". Strongly prefer this skill over jumping straight to code whenever a new domain concept is in play. Each lifecycle phase has its own focused sub-guide so the agent loads only the instructions for the current task, not a 600-line monolith.

2026-04-1937

domain-design

tddworks/claude-skills

Visualize business domains as standalone HTML + inline-SVG artifacts using an opinionated editorial design system. Ships six domain-modelling types — Aggregate, Context Map, Event Storm, Context Canvas, Ubiquitous Language glossary, and Domain Model — for exploring DDD designs with stakeholders, capturing decisions from event-storming sessions, or documenting a bounded context in a repo. Use this skill whenever the user wants to sketch, explore, or document a business domain — triggered by mentions of DDD, domain-driven design, bounded contexts, aggregates, event storming, ubiquitous language, context mapping, or any request to "visualize the domain", "draw the model", "map the contexts", "show the aggregate", or "help me think through the business". Shares a skinnable style guide with diagram-design so technical and domain diagrams produced for the same project look like siblings.

2026-04-1937

swiftui-atomic-design

tddworks/claude-skills

Guide for building SwiftUI components using Brad Frost's Atomic Design methodology — organizing views into Atoms, Molecules, Organisms, Templates, and Pages with Design Tokens for theming. Use this skill whenever building new SwiftUI UI components, refactoring existing views into reusable pieces, creating a design system, or organizing a component library. Also trigger when the user mentions "atomic design", "design system", "component hierarchy", "reusable components", "atoms and molecules", "design tokens", or wants to decompose a complex SwiftUI view into smaller, composable parts, or needs to implement theming/customization across a SwiftUI app.

2026-03-1437

ios-app-scaffold

tddworks/claude-skills

Scaffold iOS apps with Tuist and layered architecture (Domain, Infrastructure, App). Use when: (1) Creating a new iOS app project, (2) Setting up Tuist project structure, (3) User asks to "create an iOS app", "scaffold an app", or "set up a new Swift project", (4) User wants layered/clean architecture for iOS, (5) User mentions Tuist setup.

2026-01-2637

appstore-info-generator

tddworks/claude-skills

Generate comprehensive App Store listing documentation for iOS/macOS apps with multilingual support. Use when (1) Creating App Store listing content for a new app, (2) Generating multilingual App Store descriptions (English, Simplified Chinese, Traditional Chinese), (3) Preparing app metadata (title, subtitle, keywords, description), (4) Writing release notes or promotional text, (5) User asks to "generate appstore info", "create app listing", or "write app description".

2026-01-2137

app-localization

tddworks/claude-skills

iOS/macOS app localization management for Tuist-based projects with .strings files. Use when: (1) Adding new translation keys to modules, (2) Validating .strings files for missing/duplicate keys, (3) Syncing translations across languages, (4) AI-powered translation from English to other locales, (5) Checking placeholder consistency (%@, %d), (6) Generating localization reports, (7) Updating Swift code to use localized strings instead of hardcoded text.

2025-12-1237

name

ios-ux-prototype

description

iOS UX Prototype

Create interactive HTML prototypes showing mobile app user journeys with realistic iPhone mockups.

Quick Start

Copy CSS from assets/ios-design-system.css into a new HTML file
Paste the sprite from assets/sf-symbols.svg once near the top of <body>
Structure: page header → journey rows → phone frames with content
Add flow arrows between screens and annotations for callouts

iOS 26 Design (default)

Target the current iOS 26 design language — Liquid Glass surfaces and SF Symbols. Apply these by default unless the user asks for an older look:

Liquid Glass floating tab bar — use .tab-bar (now a translucent, blurred capsule detached from the screen edges; the active tab gets its own glass "lens" pill). Give scrolling screens padding-bottom: 104px on .scroll-content so rows clear the floating bar.
Liquid Glass nav/toolbar buttons — use .nav-glass-btn (circular) or .nav-glass-btn.text (pill) for trailing actions, instead of plain text.
SF Symbols over emoji — never use emoji for UI affordances, list icons, tab icons, or actions. Reference glyphs from the sprite: <svg class="sf"><use href="#sf-house"/></svg>. Glyphs inherit currentColor.
- Country flags are the only allowed emoji (SF Symbols has no flag glyphs).
- Need a glyph that isn't in the sprite? Add a new <symbol> (24×24 viewBox) following the existing pattern.
Glassy segmented controls and translucent system alerts come for free in the CSS.

<!-- iOS 26 large-title nav with a Liquid Glass action button -->
<div class="nav-large with-action">
  <h1>Proxies</h1>
  <span class="nav-glass-btn"><svg class="sf"><use href="#sf-plus"/></svg></span>
</div>

<!-- Liquid Glass floating tab bar with SF Symbols -->
<div class="tab-bar">
  <div class="tab-item active">
    <svg class="tab-ic"><use href="#sf-house"/></svg>
    <span class="tab-label">Home</span>
  </div>
  <div class="tab-item">
    <svg class="tab-ic"><use href="#sf-gear"/></svg>
    <span class="tab-label">Settings</span>
  </div>
</div>

Common sprite glyphs: sf-house, sf-globe, sf-antenna, sf-gear, sf-person, sf-magnifier, sf-bell, sf-star, sf-chevron, sf-chevron-down, sf-back, sf-arrow-up/down, sf-refresh, sf-plus, sf-check, sf-xmark, sf-ellipsis, sf-share, sf-trash, sf-heart, sf-paintbrush, sf-doc, sf-clipboard, sf-folder, sf-photo, sf-qrcode, sf-link, sf-list, sf-lock, sf-shield, sf-bolt, sf-power, sf-info, sf-clock, sf-chart, sf-wifi, sf-nosign, sf-compass.

Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[App] User Journey</title>
  <style>/* Copy from assets/ios-design-system.css */</style>
</head>
<body>
  <div class="page">
    <header class="page-header">
      <h1>Journey Title</h1>
      <p>Description of the navigation flow</p>
    </header>
    <div class="journey-row">
      <!-- Journey steps with phone mockups -->
    </div>
  </div>
</body>
</html>

Core Components

Journey Step

<div class="journey-step">
  <div class="step-header">
    <div class="step-number">1</div>
    <span class="step-title">SCREEN NAME</span>
  </div>
  <div class="phone-frame">
    <div class="phone-screen">
      <div class="screen-layout">
        <div class="status-bar">
          <span class="status-bar-left">9:41</span>
          <div class="status-bar-right">
            <!-- Signal bars -->
            <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><path d="M1 4.5C1 3.67 1.67 3 2.5 3h1C4.33 3 5 3.67 5 4.5v4C5 9.33 4.33 10 3.5 10h-1C1.67 10 1 9.33 1 8.5v-4zM6 3.5C6 2.67 6.67 2 7.5 2h1C9.33 2 10 2.67 10 3.5v5c0 .83-.67 1.5-1.5 1.5h-1C6.67 9 6 8.33 6 7.5v-5zM11 2.5c0-.83.67-1.5 1.5-1.5h1c.83 0 1.5.67 1.5 1.5v6c0 .83-.67 1.5-1.5 1.5h-1c-.83 0-1.5-.67-1.5-1.5v-6z"/></svg>
            <!-- WiFi -->
            <svg width="15" height="11" viewBox="0 0 15 11" fill="currentColor"><path d="M7.5 2.5a6.5 6.5 0 0 1 4.6 1.9.75.75 0 1 0 1.06-1.06A8 8 0 0 0 7.5 1a8 8 0 0 0-5.66 2.34.75.75 0 0 0 1.06 1.06A6.5 6.5 0 0 1 7.5 2.5zM7.5 5.5a4 4 0 0 1 2.83 1.17.75.75 0 1 0 1.06-1.06A5.5 5.5 0 0 0 7.5 4a5.5 5.5 0 0 0-3.89 1.61.75.75 0 0 0 1.06 1.06A4 4 0 0 1 7.5 5.5zM9.25 8.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0z"/></svg>
            <!-- Battery -->
            <svg width="25" height="12" viewBox="0 0 25 12" fill="currentColor"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="currentColor" fill="none"/><rect x="22" y="4" width="2" height="4" rx="1"/><rect x="2" y="2" width="17" height="7" rx="1"/></svg>
          </div>
        </div>
        <!-- Screen content here -->
      </div>
      <div class="home-indicator"></div>
    </div>
  </div>
</div>

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 <div class="dynamic-island"></div> element.

Flow Arrow

<div class="flow-arrow">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
</div>

Annotation Callout

<div class="annotation right" style="top: 200px; left: -150px;">Tap here →</div>
<!-- Positions: right, left, top, bottom (arrow direction) -->

Navigation Patterns

Large Title Nav

<div class="nav-large"><h1>My Apps</h1></div>

Inline Nav with Back

<div class="nav-inline">
  <div class="nav-inline-left">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
      <path d="M15 18l-6-6 6-6"/>
    </svg>
    <span>Back</span>
  </div>
  <span class="nav-inline-title">Title</span>
  <span class="nav-inline-right">Edit</span>
</div>

Segmented Control (3-5 options)

<div class="segmented-control">
  <div class="segment active">Tab 1</div>
  <div class="segment">Tab 2</div>
  <div class="segment">Tab 3</div>
</div>

Scrollable Tabs (many options)

<div class="scrollable-tabs">
  <div class="scroll-tab active">iPhone 6.7"</div>
  <div class="scroll-tab">iPhone 6.5"</div>
  <div class="scroll-tab">iPad Pro</div>
</div>

Content Components

App List Row

<div class="app-row selected">
  <div class="app-icon blue">A</div>
  <div class="app-details">
    <div class="app-name">App Name</div>
    <div class="app-meta">v1.0.0 · iOS</div>
  </div>
  <span class="app-badge review">In Review</span>
  <span class="chevron">›</span>
</div>

Action Card Grid

<div class="action-grid">
  <div class="action-card highlighted">
    <!-- tinted square: set the glyph color to match the tint -->
    <div class="action-icon blue" style="color:var(--blue)">
      <svg class="sf"><use href="#sf-bolt"/></svg>
    </div>
    <h3>Feature</h3>
    <p>Description</p>
  </div>
</div>

List Group

<div class="list-group">
  <div class="list-row">
    <!-- solid color square: glyph renders white via .list-icon -->
    <div class="list-icon yellow"><svg><use href="#sf-star"/></svg></div>
    <span>Setting</span>
    <span class="chevron"><svg><use href="#sf-chevron"/></svg></span>
  </div>
</div>

Form Card

<div class="form-card">
  <div class="form-row">
    <div class="form-row-icon">📦</div>
    <span class="form-row-label">Label</span>
    <span class="form-row-value">value</span>
  </div>
  <div class="form-input">
    <label>Field Name</label>
    <input type="text" value="Content">
  </div>
</div>

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)

<div class="section-divider">
  <div class="section-divider-line"></div>
  <span class="section-divider-text">Alternative Flow</span>
  <div class="section-divider-line"></div>
</div>

Resources

assets/ios-design-system.css - Complete CSS design system (copy into HTML)
assets/sf-symbols.svg - SF Symbol sprite sheet (paste once into <body>)
references/ios-components.md - Full component documentation with all variants