Before anything else: read $HOME/.agentic-workflow/toolkit/skills/_preamble.md and follow it (skill index, provider capability map, bootstrap check, session context). Run its Session Close section when this skill finishes.

Design context: read $HOME/.agentic-workflow/toolkit/skills/_design-preamble.md and follow it before continuing.

---

Design Implement iOS — Generate SwiftUI Code from Mockup

Generate production-ready SwiftUI code from an approved mockup, using design-tokens.json to create a Theme.swift file and typed view components, then prove the result against the mockup baseline before claiming completion.

Step 1: Validate Prerequisites & Load Mockup

Both design-tokens.json and at least one mockup source must exist.

SHARED_DIR="$HOME/.agentic-workflow/toolkit/skills/_shared"
source "$SHARED_DIR/repo-slug.sh"
ls "$AW_DIR/design/Mockup-"*.swift 2>/dev/null            # persisted SwiftUI mockups (primary reference)
ls "$AW_DIR/design/mockup-ios-"*.png 2>/dev/null          # CD3 baselines
ls "$AW_DIR/design/mockup-ios.png" 2>/dev/null            # legacy baseline — re-run /design-mockup to upgrade

• Nothing found → stop: "No iOS mockup found. Run /design-mockup-ios <screen-name> first."
• Multiple screens found and no screen-name argument → ask the user which to implement.

Then load both references for the chosen screen:

1. Read the persisted $AW_DIR/design/Mockup-<screen>.swift — the primary structural reference: view hierarchy, layout containers, modifier usage.
2. Read the baseline PNG $AW_DIR/design/mockup-ios-<screen>.png (view the image itself, not just its path) — the visual reference: actual spacing, color placement, and hierarchy as approved. Do not implement from an existence check alone.

Step 2: Generate Theme.swift

Create Theme.swift at the project root (or app target folder):

// Theme.swift — generated by /design-implement-ios
// Source: design-tokens.json
import SwiftUI

enum Theme {
    // MARK: - Colors
    enum Colors {
        // Primary palette
        static let primary = Color(hex: "<color.primary.$value>")
        static let primaryDark = Color(hex: "<color.primary-dark.$value>")
        static let background = Color(hex: "<color.background.$value>")
        static let surface = Color(hex: "<color.surface.$value>")
        static let textPrimary = Color(hex: "<color.text-primary.$value>")
        static let textSecondary = Color(hex: "<color.text-secondary.$value>")
        static let accent = Color(hex: "<color.accent.$value>")
        static let error = Color(hex: "<color.error.$value>")
        // ... all color tokens from design-tokens.json
    }

    // MARK: - Typography
    enum Typography {
        static let headingLarge = Font.system(size: <heading.large.fontSize>, weight: .bold)
        static let headingMedium = Font.system(size: <heading.medium.fontSize>, weight: .semibold)
        static let body = Font.system(size: <body.fontSize>, weight: .regular)
        static let caption = Font.system(size: <caption.fontSize>, weight: .regular)
        // ... all typography tokens
    }

    // MARK: - Spacing
    enum Spacing {
        static let xs: CGFloat = <spacing.xs value in points>
        static let sm: CGFloat = <spacing.sm value in points>
        static let md: CGFloat = <spacing.md value in points>
        static let lg: CGFloat = <spacing.lg value in points>
        static let xl: CGFloat = <spacing.xl value in points>
        // ... all spacing tokens
    }

    // MARK: - Corner Radius
    enum Radius {
        static let sm: CGFloat = <radius.sm>
        static let md: CGFloat = <radius.md>
        static let lg: CGFloat = <radius.lg>
    }
}

// MARK: - Color Hex Extension
extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 6: (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default: (a, r, g, b) = (255, 0, 0, 0)
        }
        self.init(.sRGB, red: Double(r) / 255, green: Double(g) / 255, blue: Double(b) / 255, opacity: Double(a) / 255)
    }
}

Write Theme.swift to the project root (or the main app target directory if identifiable).

The Color(hex:) extension above must ship inside the generated Theme.swift — Mockup-<screen>.swift and every generated view depend on it; nothing else defines it.

Step 3: Plan & Generate SwiftUI View Components

3a: Enumerate target views. From the Mockup-<screen>.swift hierarchy and the baseline PNG, list every distinct view the screen needs (screen root, sections, reusable rows/cards, controls). One stub view is never sufficient — the plan must cover the whole mockup.

3b: Confirm the file plan. Present the enumerated list as a file plan (Views/<Screen>View.swift, Views/Components/<Name>.swift, …) and confirm via Ask the user before writing any file. Adjust per the user's answer.

3c: Generate each planned view using the mockup as reference and Theme.* values:

• Import and use Theme.Colors, Theme.Typography, Theme.Spacing
• Use semantic SwiftUI view hierarchy (VStack, HStack, LazyVGrid as appropriate)
• Follow iOS HIG: NavigationStack, proper safe area handling, .font() modifiers
• Support light and dark color schemes via @Environment(\.colorScheme) where needed
• Use .foregroundColor(Theme.Colors.textPrimary) not hardcoded color values

Reference .impeccable.md (if present) for brand personality — spacing density, interaction patterns.

Step 3.5: Token Compliance Scan

Always run a content search (e.g. rg -n) over every generated/modified view file (excluding Theme.swift, which legitimately defines the raw values):

rg -n 'Color\(hex:|#[0-9a-fA-F]{3,8}\b' <each view file>
rg -n 'Font\.system\(size:' <each view file>

Report every hit as file:line — <matched value> and replace with the corresponding Theme.Colors.* / Theme.Typography.* / Theme.Spacing.* reference (or justify — no corresponding token). Unjustified hits must be fixed before Step 4.

Dark factory (optional): follow $SHARED_DIR/dark-factory.md with the "design-implement (token-compliance)" objective template adapted to Theme.swift compliance — gate on dark-factory.json, route via mcp: prism-mcp/session_task_route, run mcp: prism-mcp/prism_infer only on a claw target, and re-search any reported violations yourself before acting. Config absent ⇒ skip silently. The content search above runs regardless.

Step 4: Verification Gate (mandatory)

Run the simulator diff against the mockup baseline:

Invoke skill design-verify-ios with args "<screen-name>"

Read the run's design/verify/<run-id>/comparison-report.json (schema and CD11 thresholds: $SHARED_DIR/design-artifact-paths.md). The gate binds to overall.verdict:

• PASS (≤2%) or WARN (2–10%) → implementation may complete.
• FAIL (>10%) → print [BLOCKED] followed by the failing rows and required fixes (region-level deviations from the report). Never print "iOS Implementation Complete" while the verdict is FAIL — fix and re-run this step.

Step 5: Report

Print (only when the Step 4 verdict is PASS or WARN):

iOS Implementation Complete
============================

Mockup:      Mockup-<screen>.swift + mockup-ios-<screen>.png
Verify run:  <run-id> — <overall_verdict> (max diff <pct>%)

Generated:
  Theme.swift              (Colors, Typography, Spacing, Radius + Color(hex:) extension)
  <list of created view files, per the confirmed Step 3b plan>

Rules

• Theme.swift always goes at the project root or the main app target folder — never in a test target
• Never hardcode values that exist in design-tokens.json
• Do not modify design-tokens.json — it is the source of truth
• If the project has existing color definitions (Asset catalog, extension), note any conflicts rather than silently overwriting
• No completion claim without a PASS/WARN verify run from Step 4

Next steps

• /design-refine "polish spacing and hierarchy to match the mockup" — refinement intents, dispatched through impeccable
• /shipRelease — ship once the verify verdict is PASS
• Commit generated files: git add Theme.swift <components>