@mmerterden/multi-agent-pipeline 8.6.0

package/pipeline/skills/figma-ios/figma-to-component/phases/phase-4b-view.md

@@ -0,0 +1,695 @@
+# PHASE 4B — View Implementation + Preview
+
+Write the main View struct and Preview.
+This is the most critical implementation phase — it produces the actual SwiftUI component.
+
+required — always execute this phase.
+PARALLEL WITH: Phase 4A (Configuration), Phase 4C (FIGMA.md)
+
+---
+
+## CONTEXT VARIABLES
+
+These are provided by the orchestrator in the dispatch prompt:
+- `componentName` — e.g., "LabelBadge"
+- `componentLocation` — e.g., "Sources/UIComponents/.../LabelBadge/"
+- `artifactPath` — path to implementation artifacts
+- `nodeId` — Figma node ID
+- `fileKey` — Figma file key
+- `complexity` — SIMPLE or COMPLEX
+- `gitUser` — from `git config user.name`
+- `date` — current date in DD.MM.YYYY format
+- `issueNumber` — GitHub issue number (e.g., "340"). May be empty if not available.
+
+---
+
+## PRE-CHECK
+
+Read all required analysis files **in this order** (compact context first, large files last):
+
+```
+{artifactPath}/pass1/component_summary.json            → Component overview (~100 lines) — READ FIRST
+{artifactPath}/pass3/00_property_coverage.json          → Property mandate (IMPLEMENT/SKIP/DEFER)
+{artifactPath}/pass3/07_implementation_spec.md          → Compiled blueprint
+{artifactPath}/pass3/04b_component_architecture.md      → API shape, enums, properties
+{artifactPath}/pass3/04c_variant_config_analysis.json   → Boolean classifications, sub-component types (from 3H)
+{artifactPath}/pass3/02_token_mapping.md                → Swift token usage patterns
+{artifactPath}/pass3/03_nested_components.md            → Child component init signatures
+{artifactPath}/pass3/08_utility_integration.md          → Testing IDs, accessibility, analytics
+{artifactPath}/pass3/04_patterns.md                     → Dimensions, variant examples
+{artifactPath}/pass1/screenshot.png                     → Visual reference
+{artifactPath}/pass1/design_context_response.json       → Layout hierarchy (ONLY if needed for complex layout detail)
+```
+
+If `component_summary.json` does not exist, fall back to reading `component_properties.json` directly.
+If `00_property_coverage.json` does not exist, proceed without it (backward compatibility with pre-3G components).
+
+Read macros reference:
+```
+.instructions/figma/figma-to-swiftui/reference/macros.md
+```
+
+Read effects conversion reference (shadows, blur, gradients, animations):
+```
+.instructions/figma/figma-to-swiftui/reference/figma-to-swiftui-effects.md
+```
+
+**(strict) CSS effect lookup:** If `design_context_response.json` contains any of `backdrop-blur-[...]`, `backdrop-filter`, `filter: blur(...)`, `box-shadow`, `linear-gradient(...deg, ...)`, you MUST apply the mapping from `figma-to-swiftui-effects.md` verbatim. Cite the section number in a code comment next to the translated line.
+
+**ANTI-PATTERN — do NOT reach for system Materials:** CSS `backdrop-blur-[Npx]` maps to `.blur(radius: N/2)` per effects-reference §2 — NOT to `.ultraThinMaterial`, `.regularMaterial`, or `.thinMaterial`. iOS Materials adapt their tint based on underlying content (darker on dark backgrounds, lighter on light) which does not match CSS `backdrop-filter` semantics. Use a plain gradient/fill + `.blur(radius:)` following the reference. If a stroke border must stay sharp, put it in an overlay above the blurred layer.
+
+If any required file is missing:
+
+```
+STATUS: HALT
+PHASE: phase-4b
+GATE: PRE_CHECK
+REASON: Required artifacts missing.
+COMPLETED_GATES: []
+ARTIFACTS_CREATED: none
+USER_ACTION_REQUIRED: Run Phase 3 first.
+```
+
+---
+
+## GATE 1: FILE_HEADER
+
+```swift
+//
+//  {ComponentName}.swift
+//  UIComponents
+//
+//  Created by {gitUser} on {date}.
+//
+
+import SwiftUI
+```
+
+### Import resolution
+
+Add imports based on what the component needs:
+
+| Condition | Import | When |
+|-----------|--------|------|
+| COMPLEX component | `import UIMacros` | @GenerateViewConfiguration macro |
+| Design tokens used | `import UIAssetTokens` | Color, Spacing, Radius, Font tokens |
+| Utility modifiers | `import UIComponentUtilities` | Testing IDs, accessibility, analytics |
+| Direct analytics | `import AnalyticsEvents` | Direct `.track()` calls |
+| Nested component from another module | `import {ModuleName}` | Cross-module dependency |
+
+---
+
+## GATE 2: CONSTANTS
+
+Extract ALL raw numbers from Figma metadata and design_context. No magic numbers in the body.
+
+INPUT: `pass3/04_patterns.md` → Dimensions section
+INPUT: `pass1/design_context_response.json` → any raw values (opacity, gradient stops, etc.)
+
+```swift
+private enum Constants {
+    static let width: CGFloat = {from metadata}
+    static let height: CGFloat = {from metadata}
+    // Only values NOT covered by design tokens
+    // Do NOT duplicate token values here (spacing, radius, colors are tokens)
+}
+```
+
+**Rules:**
+- Spacing values → use `.Spacing.spacingN` tokens, NOT constants
+- Radius values → use `.Radius.radiusN` tokens, NOT constants
+- Colors → use `Color.Namespace.tokenName` tokens, NOT constants
+- Only truly component-specific numbers go in Constants (opacity, gradient stops, fixed dimensions)
+- If no component-specific constants exist, omit the Constants enum entirely
+
+**Constants Placement Rule:**
+- Constants MUST be `private enum Constants` nested INSIDE the View struct, NOT at file scope
+- Place it as the first item inside the struct, before `// MARK: - Properties`
+- Token values (`.Spacing.*`, `.Radius.*`, `Color.*`, `.Size.*`) are used directly in the body — do NOT wrap them in Constants
+
+---
+
+## GATE 2.5: PROPERTY_MANDATE_CHECK
+
+**If `pass3/00_property_coverage.json` exists**, verify that every property with `status: "IMPLEMENT"` has a corresponding Swift init parameter or configuration property in the view being implemented.
+
+For each IMPLEMENT property:
+- VARIANT → must have an enum type and init parameter
+- BOOLEAN → must have a Bool parameter (or merged into Optional per Boolean Visibility Merge Rule)
+- TEXT → must have a String parameter
+- INSTANCE_SWAP → must have an Image?, AnyView?, or typed view parameter, OR be documented as fixed in FIGMA.md
+
+If any IMPLEMENT property is missing from the view's init:
+
+```
+STATUS: HALT
+PHASE: phase-4b
+GATE: PROPERTY_MANDATE_CHECK
+REASON: IMPLEMENT property not exposed in view init.
+MISSING_PROPERTIES: [{list names and expected Swift types}]
+COMPLETED_GATES: [PRE_CHECK, FILE_HEADER, CONSTANTS, VIEW_STRUCT]
+ARTIFACTS_CREATED:
+  - {componentLocation}/{ComponentName}.swift (partial)
+USER_ACTION_REQUIRED: Options:
+  1) Add the missing properties to the view
+  2) Update 00_property_coverage.json to mark as SKIP with reason
+```
+
+If `00_property_coverage.json` does not exist, skip this gate (backward compatibility).
+
+---
+
+## GATE 3: VIEW_STRUCT
+
+> **Issue link:** If `issueNumber` is provided, include the `/// Issue:` doc comment line. If empty or not available, omit the line entirely.
+
+### SIMPLE component (≤3 properties)
+
+```swift
+/// {Brief description of component}
+///
+/// Figma: [{ComponentName}](https://www.figma.com/design/{fileKey}/?node-id={nodeId})
+/// Issue: [#{issueNumber}](https://github.com/{github.componentsRepo}/issues/{issueNumber})
+public struct {ComponentName}: View {
+    // MARK: - Properties
+
+    {All properties from Final API Design — public let}
+
+    // MARK: - Initialization
+
+    public init(
+        {param1}: {Type},
+        {param2}: {Type} = {default}
+    ) {
+        self.{param1} = {param1}
+        self.{param2} = {param2}
+    }
+
+    // MARK: - Body
+
+    public var body: some View {
+        {implementation}
+    }
+}
+```
+
+**CRITICAL — Type Placement:**
+- ALL component-specific enums/types MUST be nested inside the View struct (SIMPLE) or Configuration struct (COMPLEX)
+- **For COMPLEX components: ALL data model types MUST be defined inside `{ComponentName}Configuration`, NOT inside the View struct.** The View then exposes them via `public typealias` for backwards-compatible API: `public typealias MyType = {ComponentName}Configuration.MyType`
+- NEVER define them as top-level types outside the struct
+- NEVER define data model types inside a COMPLEX View struct — they belong in Configuration
+- Name them WITHOUT the component prefix: `Size` not `{ComponentName}Size`, `State` not `{ComponentName}State`
+- Extensions on nested types use `extension {ComponentName}.TypeName { }` after the struct closing brace
+
+For SIMPLE components, define enums inside the View struct:
+
+```swift
+public struct {ComponentName}: View {
+    // MARK: - Types
+
+    public enum State: String, CaseIterable, Sendable {
+        case active
+        case inactive
+    }
+
+    // MARK: - Properties
+
+    private let state: State
+    // ...
+}
+
+// Extensions on nested types go after the struct
+extension {ComponentName}.State {
+    var backgroundColor: Color {
+        switch self {
+        case .active: return .Success.n100
+        case .inactive: return .Background.backgroundGrey
+        }
+    }
+}
+```
+
+### COMPLEX component (>3 properties)
+
+```swift
+/// {Brief description of component}
+///
+/// Figma: [{ComponentName}](https://www.figma.com/design/{fileKey}/?node-id={nodeId})
+/// Issue: [#{issueNumber}](https://github.com/{github.componentsRepo}/issues/{issueNumber})
+@GenerateViewConfiguration
+public struct {ComponentName}: View {
+    // MARK: - Properties
+
+    private let configuration: {ComponentName}Configuration
+    // Closure dependencies (from always-present actions)
+    private let primaryAction: () -> Void
+    // Optional closure dependencies (from PAIRED_ACTION_SUBCOMPONENT)
+    private var secondaryAction: (() -> Void)?
+
+    // MARK: - Initialization
+
+    public init({requiredDynamicProps}, {requiredClosures}) {
+        self.configuration = .init({requiredDynamicProps})
+        self.{closure} = {closure}
+    }
+
+    // MARK: - Body
+
+    public var body: some View {
+        {implementation}
+    }
+}
+```
+
+**CRITICAL for COMPLEX:**
+- `@GenerateViewConfiguration` macro generates ONLY:
+  - `configured(_:)` method — post-init configuration transform
+- **AI writes the custom init** — the macro does NOT generate inits
+- **Phase 4E writes +Modifiers** — View-level forwarding modifiers (`.state()`, `.title()`, etc.) are written by AI in +Modifiers.swift because Swift macros cannot introspect the Configuration struct
+- Init includes **required dynamic props** as direct parameters + **required closures**
+- Optional props with defaults → set via chain modifiers (generated by macro)
+- Configuration is `private let` — the macro-generated `configured()` method reconstructs via init, not mutation
+
+**Init generation rules:**
+1. **Required props** = Configuration props that have no sensible default (the component is meaningless without them). These become init parameters. AI infers this from component semantics, not from whether a default exists in config.
+2. **Required closures** = Always-present actions (e.g., primary button action). These become init parameters.
+3. **Optional config props** = Props with defaults or optional props. Set via chain modifiers, NOT init params.
+4. **Paired action closures** = From `PAIRED_ACTION_SUBCOMPONENT`. NOT in init — set via paired modifiers.
+
+### With dependencies (Bindings, ObservedObjects)
+
+```swift
+@GenerateViewConfiguration
+public struct {ComponentName}: View {
+    private let configuration: {ComponentName}Configuration
+    @Binding private var isExpanded: Bool
+
+    public init(isExpanded: Binding<Bool>, {requiredProps}) {
+        self._isExpanded = isExpanded
+        self.configuration = .init({requiredProps})
+    }
+
+    public var body: some View { ... }
+}
+```
+
+### Paired modifiers (from PAIRED_ACTION_SUBCOMPONENT)
+
+For each `PAIRED_ACTION_SUBCOMPONENT` from 3H, generate a View-level modifier that binds data + closure atomically:
+
+```swift
+// 1 dynamic prop + action:
+public func secondaryButton(_ title: String, action: @escaping () -> Void) -> {ComponentName} {
+    var copy = self.configured { $0.secondaryButtonTitle(title) }
+    copy.secondaryAction = action
+    return copy
+}
+
+// 2+ dynamic props + action:
+public func actionLink(_ config: {ComponentName}Configuration.ActionLinkConfiguration,
+                        action: @escaping () -> Void) -> {ComponentName} {
+    var copy = self.configured { $0.actionLinkConfiguration(config) }
+    copy.actionLinkAction = action
+    return copy
+}
+
+// 0 dynamic props + action (fully static sub-component):
+public func dismissButton(action: @escaping () -> Void) -> {ComponentName} {
+    var copy = self
+    copy.dismissAction = action
+    return copy
+}
+```
+
+**NOTE:** Paired modifiers use `configured()` for the config part (reconstructs via init, keeps `let configuration`), then mutate only the closure property on the copy. Optional closure properties (`secondaryAction`, etc.) must be `var` on the View for this pattern.
+
+Place paired modifiers in the View file after the body, before Preview.
+
+---
+
+## GATE 4: BODY_IMPLEMENTATION
+
+INPUT: `pass1/design_context_response.json` → `code` field for layout structure
+INPUT: `pass3/02_token_mapping.md` → token usage patterns
+INPUT: `pass3/04b_component_architecture.md` → API shape
+INPUT: `pass1/screenshot.png` → visual reference
+
+### 4.1 Layout translation
+
+Translate Figma layout to SwiftUI:
+
+| Figma | SwiftUI |
+|-------|---------|
+| Horizontal auto-layout | `HStack(spacing:)` |
+| Vertical auto-layout | `VStack(alignment:, spacing:)` |
+| Padding (uniform) | `.padding(.Spacing.spacingN)` |
+| Padding (per-side) | `.padding(.horizontal, .Spacing.spacingN)` |
+| Border radius | `.clipShape(RoundedRectangle(cornerRadius: .Radius.radiusN))` |
+| Background fill | `.background(Color.Namespace.token)` |
+| Fixed width | `.frame(width: Constants.width)` |
+| Hug contents | No frame modifier (natural sizing) |
+| Fill container | `.frame(maxWidth: .infinity)` |
+
+### 4.2 Alignment rules
+
+Figma flex → SwiftUI alignment:
+
+| Figma | SwiftUI |
+|-------|---------|
+| `flex-start` / `left` | `.leading` |
+| `flex-end` / `right` | `.trailing` |
+| `center` | `.center` |
+| `space-between` | `Spacer()` between children |
+
+### 4.3 Token application
+
+INPUT: `pass3/02_token_mapping.md`
+
+Apply Swift tokens from the mapping. Use the exact Swift usage patterns documented:
+
+```swift
+// Typography
+Text(title)
+    .typographyStyle(.smallBold)
+
+// Colors
+.foregroundStyle(Color.Text.textPrimary)
+.background(Color.Background.background)
+
+// Spacing
+.padding(.horizontal, .Spacing.spacing4)
+HStack(spacing: .Spacing.spacing8) { ... }
+
+// Radius
+.clipShape(RoundedRectangle(cornerRadius: .Radius.radius4))
+```
+
+### 4.4 Conditional rendering
+
+For optional properties and boolean toggles:
+
+```swift
+// Optional content
+if let subtitle = configuration.subtitle {
+    Text(subtitle)
+        .typographyStyle(.captionRegular)
+}
+
+// Boolean toggle
+if configuration.showIcon, let icon = configuration.leftIcon {
+    icon
+        .resizable()
+        .frame(width: Constants.iconSize, height: Constants.iconSize)
+}
+```
+
+### 4.5 Computed properties for state-driven styling
+
+When an enum drives visual changes (colors, icons), use computed properties:
+
+```swift
+// MARK: - Computed Properties
+
+private var backgroundColor: Color {
+    switch configuration.state {
+    case .success: return .Success.n100
+    case .warning: return .Warning.n100
+    case .error: return .Error.n100
+    case .standard: return .Background.backgroundGrey
+    case .secondary: return .Badge.badgeBackgroundInfo
+    }
+}
+
+private var textColor: Color {
+    switch configuration.state {
+    case .success: return .Text.textSuccess
+    case .warning: return .Text.textWarning
+    // ...
+    }
+}
+```
+
+### 4.6 Nested component integration
+
+INPUT: `pass3/03_nested_components.md`
+INPUT: `pass3/04c_variant_config_analysis.json` → `staticProps` for boolean-gated sub-components
+
+Use EXACT init signatures from the nested components analysis:
+
+```swift
+// From analysis: TextLink(_ text: String, action: () -> Void)
+TextLink(configuration.linkText, action: configuration.action)
+
+// From analysis: LabelBadge(text: String, state: LabelBadge.State)
+LabelBadge(text: statusText, state: .success)
+```
+
+**For boolean-gated sub-components (KNOWN_SUBCOMPONENT / PAIRED_ACTION_SUBCOMPONENT):**
+
+Static props from 3H `staticProps` are hardcoded in the View body. Only dynamic props come from Configuration:
+
+```swift
+// Secondary button: title is dynamic, style/size/colorTheme are static
+if let title = configuration.secondaryButtonTitle {
+    TurkishButton { secondaryAction?() }
+        .title(title)
+        .style(.ghost)       // static — hardcoded from 3H staticProps
+        .size(.default)      // static
+        .colorTheme(.brand)  // static
+}
+```
+
+### 4.7 Layer text — static vs dynamic
+
+Texts from Figma layers are classified in `pass3/04_patterns.md` (Layer Text Classification table) as STATIC or DYNAMIC.
+
+- **DYNAMIC** texts → MUST use the corresponding Configuration property: `Text(configuration.currencyCode)`, NOT `Text("TRY")`
+- **STATIC** texts → use localization key if available (`Text(.Price.totalAmount)`), or hardcode only if truly fixed structural text (separators like "/", operators like "+")
+
+**Never hardcode text that represents variable data.** If a text looks like sample data (a price, an amount, a percentage, a currency code, a date), it MUST come from a configuration property. If no matching property exists in the architecture, HALT — the architecture is incomplete.
+
+### 4.7.1 Price pattern rendering
+
+When the architecture identifies a **price pattern** (§1.5.1 in Phase 3D), use `CurrencyTextRenderer` for rendering:
+
+```swift
+// Create a style with the component's fonts
+let style = CurrencyTextStyle(
+    currencyFont: .smallRegular,
+    amountFont: .smallBold,
+    color: .Text.textWhite
+)
+
+// Render as AttributedString — handles placement, formatting, grouping
+Text(CurrencyTextRenderer.attributedString(
+    value: amount,           // Double
+    currencyCode: currencyCode,  // String
+    style: style
+))
+```
+
+Do NOT manually place currency code left/right — `CurrencyTextRenderer` resolves placement from `CurrencyFormatProvider`. Do NOT format the amount as String — pass `Double`, the renderer formats it.
+
+### 4.7.1a Attributed text rendering (multi-font)
+
+When a text has mixed typography (§1.5.1a in Phase 3D), use `AttributedString.format()` from `UIExtensions`. The highlight value can be a dynamic prop or a localization key — use `.localized` (no args) to keep `%@` placeholders intact:
+
+```swift
+// Highlight from localization key (static but styled differently)
+var highlight = AttributedString(LocalizationStringKey.Component.highlightKey.localized)
+highlight.font = .xSmallBold
+highlight.foregroundColor = .Text.textWhite
+
+// Template with %@ placeholder
+var template = AttributedString(LocalizationStringKey.Component.templateKey.localized)
+template.font = .xSmallRegular
+template.foregroundColor = .Text.textWhite
+
+Text(template.format(highlight))
+```
+
+### 4.7.2 Image asset rendering
+
+When the architecture identifies image assets (§1.5.2 in Phase 3D):
+
+**DYNAMIC images (remote):**
+```swift
+import CoreUI
+
+// Use the remote image component from CoreUI
+RemoteImage(url: configuration.imageURL)
+    .frame(width: Constants.imageWidth, height: Constants.imageHeight)
+    .clipShape(RoundedRectangle(cornerRadius: .Radius.radius8))
+```
+
+Do NOT embed Figma placeholder photos as bundled assets — they are sample data. The component takes a `URL` and loads the real image at runtime.
+
+**STATIC images (bundled):**
+```swift
+// Use generated Image accessor from UIAssets
+Image.CategoryName.assetName
+    .resizable()
+    .frame(width: Constants.iconSize, height: Constants.iconSize)
+```
+
+Static assets are added to `Shared/UIAssets/Images/` in mobile-common and regenerated via `generate-ui-assets` plugin.
+
+### 4.7.3 Collapsible sections
+
+When a Figma component has expanded/collapsed variants (accordion, expandable card, FAQ item, disclosure group):
+
+- Use `@State private var isExpanded: Bool` (or `@Binding` if parent controls it)
+- **Arrow/chevron:** Rotate with `.rotationEffect(.degrees(isExpanded ? 180 : 0))` and animate with `.animation(.easeInOut(duration: 0.25), value: isExpanded)`
+- **Content:** Wrap in conditional with height transition:
+```swift
+if isExpanded {
+    contentView
+        .transition(.opacity.combined(with: .move(edge: .top)))
+}
+```
+- **Container:** Apply `.animation(.easeInOut(duration: 0.25), value: isExpanded)` on the outer VStack so SwiftUI animates the height change
+- **Tap:** Toggle via `.onTapGesture { withAnimation { isExpanded.toggle() } }` on the header row
+
+Do NOT use `DisclosureGroup` — it has limited styling control. Build the expand/collapse manually for pixel-perfect Figma match.
+
+### 4.8 @ViewBuilder for complex conditional views
+
+```swift
+@ViewBuilder
+private var iconView: some View {
+    if let icon = configuration.leftIcon {
+        icon
+            .resizable()
+            .frame(width: Constants.iconSize, height: Constants.iconSize)
+            .foregroundStyle(textColor)
+    }
+}
+```
+
+---
+
+## GATE 5: UTILITY_INTEGRATION
+
+INPUT: `pass3/08_utility_integration.md`
+
+Apply utility modifiers from the Element-to-Utility Mapping table.
+
+### 5.1 Testing identifiers
+
+```swift
+import UIComponentUtilities
+
+// Static identifier
+someView
+    .accessibilityIdentifier(.{ComponentName}.badge)
+
+// Dynamic identifier (list items)
+ForEach(items.indices, id: \.self) { index in
+    ItemRow(item: items[index])
+        .accessibilityIdentifier(.{ComponentName}.Item.row.with(index))
+}
+```
+
+### 5.2 Localization keys
+
+```swift
+// Static text from localization key
+Text(.{ComponentName}.title)
+
+// Format string
+Text(String(format: LocalizationStringKey.{ComponentName}.subtitle.localized, count))
+```
+
+If utility_integration says "No localization keys" → skip. Dynamic text uses caller-provided strings.
+
+### 5.3 Accessibility
+
+INPUT: `pass3/08_utility_integration.md` → Accessibility section
+
+Apply ONLY what the analysis specifies. If the analysis says 0 accessibility keys and no modifiers, add NOTHING.
+
+**CRITICAL — No unnecessary accessibility annotations:**
+- Accessibility is for vision-impaired users to **navigate and use** the app
+- Ask: "Does a vision-impaired person need this information?" — if NO, do not add it
+- Do NOT generate per-enum-variant accessibility keys for visual state the user already knows (loyalty tier, color-coded status)
+- Do NOT add `localizedAccessibilityName` computed properties on enums unless Phase 2C explicitly defined those keys
+- If any accessibility text IS needed, it MUST use `LocalizedAccessibilityStringKey` — never hardcode English strings
+
+**Before adding ANY modifier, ask: "What breaks if I remove this?"** If the answer is "nothing", do not add it.
+
+```swift
+// Decorative elements → hide from VoiceOver
+icon.accessibilityHidden(true)
+
+// Group children into single VoiceOver stop
+// SwiftUI reads visible Text automatically — do NOT add .accessibilityLabel on top
+.accessibilityElement(children: .combine)
+
+// Do NOT add .accessibilityLabel when SwiftUI reads visible text correctly
+// Do NOT add .accessibilityAddTraits(.isStaticText) to Text — SwiftUI already knows
+// Do NOT add .accessibilityRemoveTraits(.isButton) when there is no Button
+// Do NOT announce visual state (color) for non-interactive display components
+```
+
+### 5.4 Analytics
+
+```swift
+// Button tracking (from snippet in utility_integration)
+.analyticsButton(
+    id: UITestingIdentifierKey.{ComponentName}.submitButton.description,
+    label: "Submit",
+    type: .primary
+)
+```
+
+If utility_integration says "No analytics events" → skip.
+
+### 5.5 NO utilities
+
+If `pass3/08_utility_integration.md` shows all counts as 0, skip all utility modifiers.
+Do NOT invent utility modifiers that weren't specified in the analysis.
+
+---
+
+## VALIDATION CHECKLIST
+
+Before marking complete, verify:
+
+```
+[ ] File exists at {componentLocation}/{ComponentName}.swift
+[ ] Correct file header (author, date, module name)
+[ ] Correct imports (UIMacros if COMPLEX, UIAssetTokens, UIComponentUtilities if needed)
+[ ] @GenerateViewConfiguration applied (if COMPLEX)
+[ ] Custom init present with required dynamic props + required closures (if COMPLEX)
+[ ] Paired modifiers present for each PAIRED_ACTION_SUBCOMPONENT from 3H
+[ ] Every config property (including data props from paired modifiers) will get a forwarding modifier in Phase 4E
+[ ] Static sub-component props hardcoded in body (from 3H staticProps)
+[ ] Manual init present (if SIMPLE — no macro)
+[ ] SwiftDoc with Figma link above struct declaration
+[ ] Constants enum: private, nested inside View struct, no raw numbers in body (or omitted if no component-specific constants)
+[ ] ALL tokens from pass3/02_token_mapping.md applied (no hardcoded colors/spacing/fonts)
+[ ] No hardcoded sample/placeholder text — all DYNAMIC layer texts use configuration properties (per pass3/04_patterns.md classification)
+[ ] Layout matches Figma: correct stacks, spacing, alignment, padding
+[ ] State-driven styling via computed properties (not inline switch in body)
+[ ] Nested components use exact init signatures from pass3/03_nested_components.md
+[ ] Testing identifiers applied per pass3/08_utility_integration.md (or skipped if 0)
+[ ] Accessibility modifiers applied per pass3/08_utility_integration.md (or skipped if 0)
+[ ] Analytics modifiers applied per pass3/08_utility_integration.md (or skipped if 0)
+[ ] No invented utility modifiers — only what analysis specifies
+[ ] NO Preview code in this file — Phase 4D handles Preview separately
+[ ] Every IMPLEMENT property from 00_property_coverage.json has a Swift init parameter (if coverage file exists)
+[ ] ALL types nested inside View or Configuration struct — no top-level enums
+```
+
+---
+
+## SUCCESS OUTPUT
+
+```
+STATUS: COMPLETE
+PHASE: phase-4b
+GATES_PASSED: [PRE_CHECK, FILE_HEADER, CONSTANTS, VIEW_STRUCT, BODY_IMPLEMENTATION, UTILITY_INTEGRATION]
+ARTIFACTS_CREATED:
+  - {componentLocation}/{ComponentName}.swift
+SUMMARY: View implementation complete. {COMPLEXITY} component. {TOKEN_COUNT} tokens applied. {UTILITY_COUNT} utility modifiers. Preview handled by Phase 4D.
+```