ワンクリックでManusで任意のスキルを実行

$pwd:

ios-ux-prototype

Name: Ios Ux Prototype
Author: tddworks

// 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.

Manusで実行

$ git log --oneline --stat

stars:32

forks:5

updated:2026年1月12日 09:00

ファイルエクスプローラー

4 ファイル

SKILL.md

readonly

related-skills.json

同じリポジトリ

feature-lifecycle.md

from "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-1932

domain-design.md

from "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-1932

swiftui-atomic-design.md

from "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-1432

ios-app-scaffold.md

from "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-2632

appstore-info-generator.md

from "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-2132

app-localization.md

from "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-1232

package.json

"author": "tddworks"

"repository": "tddworks/claude-skills"

GitHub リポジトリを開く Creator のリポジトリを見る

$ install --global

$ download --local

Manusで実行

$ useful --forSOC

グラフィックデザイナー芸術・デザイン・エンタメ・スポーツ・メディア職27-1024L4

name

ios-ux-prototype

description

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.

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
Structure: page header → journey rows → phone frames with content
Add flow arrows between screens and annotations for callouts

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">
    <div class="action-icon blue">📱</div>
    <h3>Feature</h3>
    <p>Description</p>
  </div>
</div>

List Group

<div class="list-group">
  <div class="list-row">
    <div class="list-icon yellow">⭐</div>
    <span>Setting</span>
    <span class="chevron">›</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)
references/ios-components.md - Full component documentation with all variants

ios-ux-prototype

このリポジトリの他の Skills

iOS UX Prototype

Quick Start

Page Structure

Core Components

Journey Step

Flow Arrow

Annotation Callout

Navigation Patterns

Large Title Nav

Inline Nav with Back

Segmented Control (3-5 options)

Scrollable Tabs (many options)

Content Components

App List Row

Action Card Grid

List Group

Form Card

Color Classes

Section Divider (Alternate Flows)

Resources

iOS UX Prototype

Quick Start

Page Structure

Core Components

Journey Step

Flow Arrow

Annotation Callout

Navigation Patterns

Large Title Nav

Inline Nav with Back

Segmented Control (3-5 options)

Scrollable Tabs (many options)

Content Components

App List Row

Action Card Grid

List Group

Form Card

Color Classes

Section Divider (Alternate Flows)

Resources

このリポジトリの他の Skills