claudecode-omc 5.6.6 → 5.6.7

package/.local/skills/h5-to-swiftui/assets/calibration/swiftui-twin/Sources/CalibrationScreen/CalibrationScreen.swift

@@ -0,0 +1,142 @@
+// CalibrationScreen.swift
+// Calibration Twin — SwiftUI side of the Stage 2.5 render-equivalence pair.
+//
+// IMPORTANT: every color, size, and spacing constant here derives from the
+// same design-token values in tokens.json and h5-twin/style.css.
+// Do NOT change any value without updating all three files.
+//
+// Layout target: iPhone 15 Pro logical viewport 393×852 pt,
+// with a 59 pt top safe-area inset equivalent.
+
+import SwiftUI
+
+// ── Design Tokens ────────────────────────────────────────────────────────── //
+// Hex → Color(red:green:blue:) conversions use the formula r/255, g/255, b/255
+// with sRGB color space (matching the CSS hex values in style.css).
+
+private enum Tokens {
+    // Colors
+    // #F2F2F7  →  r=0xF2/255=0.9490  g=0xF2/255=0.9490  b=0xF7/255=0.9686
+    static let colorBackground   = Color(red: 0xF2/255.0, green: 0xF2/255.0, blue: 0xF7/255.0)
+    // #4A90D9  →  r=0x4A/255=0.2902  g=0x90/255=0.5647  b=0xD9/255=0.8510
+    static let colorCard         = Color(red: 0x4A/255.0, green: 0x90/255.0, blue: 0xD9/255.0)
+    // #E8744F  →  r=0xE8/255=0.9098  g=0x74/255=0.4549  b=0x4F/255=0.3098
+    static let colorCircle       = Color(red: 0xE8/255.0, green: 0x74/255.0, blue: 0x4F/255.0)
+
+    // Card stripes — structured multi-color region (NOT a flat block) so the
+    // measured SSIM floor is meaningful.
+    // #4A90D9 blue / #7E57C2 purple / #26A69A teal / #F4B400 amber
+    static let colorStripeA      = Color(red: 0x4A/255.0, green: 0x90/255.0, blue: 0xD9/255.0)
+    static let colorStripeB      = Color(red: 0x7E/255.0, green: 0x57/255.0, blue: 0xC2/255.0)
+    static let colorStripeC      = Color(red: 0x26/255.0, green: 0xA6/255.0, blue: 0x9A/255.0)
+    static let colorStripeD      = Color(red: 0xF4/255.0, green: 0xB4/255.0, blue: 0x00/255.0)
+    // #1C1C1E  →  r=0x1C/255=0.1098  g=0x1C/255=0.1098  b=0x1E/255=0.1176
+    static let colorTextHeading  = Color(red: 0x1C/255.0, green: 0x1C/255.0, blue: 0x1E/255.0)
+    // #636366  →  r=0x63/255=0.3882  g=0x63/255=0.3882  b=0x66/255=0.4000
+    static let colorTextBody     = Color(red: 0x63/255.0, green: 0x63/255.0, blue: 0x66/255.0)
+
+    // Spacing (pt — 1 pt = 1 CSS px at 1× logical scale)
+    static let spaceSafeTop: CGFloat      = 59   // top safe-area equivalent
+    static let spacePageH: CGFloat        = 20   // horizontal page padding
+    static let spaceSectionGap: CGFloat   = 24   // gap: text block → shape block
+    static let spaceCardPadding: CGFloat  = 20   // inner card padding
+    static let spaceCardGap: CGFloat      = 16   // gap: card → circle row
+
+    // Radii
+    static let radiusCard: CGFloat        = 16
+
+    // Typography (SF System font — closest match to -apple-system CSS)
+    static let fontSizeHeading: CGFloat   = 22
+    static let fontWeightHeading: Font.Weight = .semibold  // CSS 600
+    static let fontSizeBody: CGFloat      = 15
+    static let fontWeightBody: Font.Weight    = .regular   // CSS 400
+
+    // Shape
+    static let sizeCircle: CGFloat        = 64
+
+    // Screen frame (iPhone 15 Pro logical size)
+    static let screenWidth: CGFloat       = 393
+    static let screenHeight: CGFloat      = 852
+}
+
+// ── CalibrationScreenView ─────────────────────────────────────────────────── //
+
+public struct CalibrationScreenView: View {
+
+    public init() {}
+
+    public var body: some View {
+        ZStack(alignment: .topLeading) {
+            // Background fills the entire 393×852 frame
+            Tokens.colorBackground
+                .ignoresSafeArea()
+
+            VStack(alignment: .leading, spacing: 0) {
+
+                // Safe-area top inset (59 pt) — mirrors --space-safe-top in CSS
+                Spacer()
+                    .frame(height: Tokens.spaceSafeTop)
+
+                // ── Text Block ──────────────────────────────────────────── //
+                VStack(alignment: .leading, spacing: 8) {
+                    // Heading: 22pt semibold, color #1C1C1E
+                    Text("Calibration Screen")
+                        .font(.system(size: Tokens.fontSizeHeading,
+                                      weight: Tokens.fontWeightHeading))
+                        .foregroundColor(Tokens.colorTextHeading)
+                        .lineSpacing(Tokens.fontSizeHeading * (1.27 - 1))
+                        // line-height ≈ 1.27 × 22 ≈ 28 pt — matches CSS line-height
+
+                    // Body: 15pt regular, color #636366
+                    Text("This screen is the known-correct SwiftUI twin used to measure the cross-renderer fidelity floor. It is not a conversion target.")
+                        .font(.system(size: Tokens.fontSizeBody,
+                                      weight: Tokens.fontWeightBody))
+                        .foregroundColor(Tokens.colorTextBody)
+                        .lineSpacing(Tokens.fontSizeBody * (1.47 - 1))
+                        // line-height ≈ 1.47 × 15 ≈ 22 pt — matches CSS line-height
+                        .fixedSize(horizontal: false, vertical: true)
+                }
+                .padding(.horizontal, Tokens.spacePageH)
+
+                // Gap between text block and shape block (24 pt)
+                Spacer()
+                    .frame(height: Tokens.spaceSectionGap)
+
+                // ── Shape Block ─────────────────────────────────────────── //
+                VStack(alignment: .leading, spacing: Tokens.spaceCardGap) {
+
+                    // Structured (4-stripe) rounded-rect card, radius 16pt.
+                    // Deliberately NOT a flat solid block — a flat region makes
+                    // SSIM blind to a uniform mean shift, so the measured floor
+                    // would be unreliable. Height = 2 × card padding = 40pt
+                    // (same overall card height as the original solid block).
+                    HStack(spacing: 0) {
+                        Tokens.colorStripeA
+                        Tokens.colorStripeB
+                        Tokens.colorStripeC
+                        Tokens.colorStripeD
+                    }
+                    .frame(height: Tokens.spaceCardPadding * 2)
+                    .clipShape(RoundedRectangle(cornerRadius: Tokens.radiusCard))
+                    // width = full content width (set by horizontal padding below)
+
+                    // Circle (#E8744F, 64×64 pt)
+                    Circle()
+                        .fill(Tokens.colorCircle)
+                        .frame(width: Tokens.sizeCircle, height: Tokens.sizeCircle)
+                }
+                .padding(.horizontal, Tokens.spacePageH)
+
+                Spacer()
+            }
+            .frame(width: Tokens.screenWidth, alignment: .topLeading)
+        }
+        .frame(width: Tokens.screenWidth, height: Tokens.screenHeight)
+    }
+}
+
+// ── Preview ──────────────────────────────────────────────────────────────── //
+
+#Preview("Calibration Screen — 393×852") {
+    CalibrationScreenView()
+}

package/.local/skills/h5-to-swiftui/assets/calibration/swiftui-twin-divergent/Package.swift

@@ -0,0 +1,32 @@
+// swift-tools-version: 5.9
+// Calibration DIVERGENT Twin — SwiftUI Package (NEGATIVE CONTROL)
+//
+// This package is the deliberately-WRONG SwiftUI screen used as the Stage 5
+// judge negative control. The independent judge MUST reject this vs the H5
+// twin; if it does not, its YES is voided for that run (see
+// references/visual-diff-loop-protocol.md and evaluate-convergence.mjs).
+//
+// Zero third-party dependencies. Requires Xcode 15+ / Swift 5.9+.
+
+import PackageDescription
+
+let package = Package(
+    name: "CalibrationScreenDivergent",
+    platforms: [
+        .iOS(.v17),
+        .macOS(.v14)
+    ],
+    products: [
+        .library(
+            name: "CalibrationScreenDivergent",
+            targets: ["CalibrationScreenDivergent"]
+        )
+    ],
+    targets: [
+        .target(
+            name: "CalibrationScreenDivergent",
+            dependencies: [],
+            path: "Sources/CalibrationScreenDivergent"
+        )
+    ]
+)

package/.local/skills/h5-to-swiftui/assets/calibration/swiftui-twin-divergent/Sources/CalibrationScreenDivergent/CalibrationScreenDivergent.swift

@@ -0,0 +1,122 @@
+// CalibrationScreenDivergent.swift
+// NEGATIVE CONTROL — the deliberately-WRONG SwiftUI side of the Stage 5
+// judge negative control.
+//
+// This screen is INTENTIONALLY divergent from the H5 twin
+// (assets/calibration/h5-twin/index.html):
+//   • WRONG colors    — background green not grey, card stripes recolored,
+//                        circle blue not coral, text colors inverted.
+//   • SHIFTED layout   — larger top inset, different padding, the circle is
+//                        moved to the trailing edge, the card is taller and
+//                        narrower, section gap doubled.
+//   • WRONG copy       — heading/body text differs.
+//
+// The independent judge MUST reject this pair (H5 twin vs this) under the
+// adversarial forced-difference-3 framing. If the judge fails to reject it,
+// `judge.negative_control` is recorded as "failed" and any YES verdict is
+// VOID for that run (enforced mechanically by evaluate-convergence.mjs).
+//
+// It is still TEXTURED (text + a multi-color stripe region) so the contrast
+// with the correct twin is structural, not just a flat mean shift.
+
+import SwiftUI
+
+private enum WrongTokens {
+    // WRONG colors (intentionally divergent from tokens.json)
+    static let colorBackground   = Color(red: 0x2E/255.0, green: 0x7D/255.0, blue: 0x32/255.0) // green, should be #F2F2F7
+    static let colorCircle       = Color(red: 0x15/255.0, green: 0x65/255.0, blue: 0xC0/255.0) // blue, should be #E8744F
+    static let colorTextHeading  = Color(red: 0xFF/255.0, green: 0xFF/255.0, blue: 0xFF/255.0) // white, should be #1C1C1E
+    static let colorTextBody     = Color(red: 0xFF/255.0, green: 0xEB/255.0, blue: 0x3B/255.0) // yellow, should be #636366
+
+    // WRONG stripe colors (recolored + reordered)
+    static let colorStripeA      = Color(red: 0xD3/255.0, green: 0x2F/255.0, blue: 0x2F/255.0) // red
+    static let colorStripeB      = Color(red: 0xFB/255.0, green: 0x8C/255.0, blue: 0x00/255.0) // orange
+    static let colorStripeC      = Color(red: 0x00/255.0, green: 0x00/255.0, blue: 0x00/255.0) // black
+    static let colorStripeD      = Color(red: 0xFF/255.0, green: 0xFF/255.0, blue: 0xFF/255.0) // white
+
+    // SHIFTED layout (intentionally divergent spacing)
+    static let spaceSafeTop: CGFloat      = 140  // should be 59 — large shift
+    static let spacePageH: CGFloat        = 48   // should be 20
+    static let spaceSectionGap: CGFloat   = 48   // should be 24 — doubled
+    static let spaceCardPadding: CGFloat  = 20
+    static let spaceCardGap: CGFloat      = 16
+
+    static let radiusCard: CGFloat        = 2    // should be 16 — nearly square
+    static let fontSizeHeading: CGFloat   = 34   // should be 22
+    static let fontSizeBody: CGFloat      = 11   // should be 15
+    static let sizeCircle: CGFloat        = 110  // should be 64 — much larger
+
+    static let screenWidth: CGFloat       = 393
+    static let screenHeight: CGFloat      = 852
+}
+
+// ── CalibrationScreenDivergentView ────────────────────────────────────────── //
+
+public struct CalibrationScreenDivergentView: View {
+
+    public init() {}
+
+    public var body: some View {
+        ZStack(alignment: .topLeading) {
+            WrongTokens.colorBackground
+                .ignoresSafeArea()
+
+            VStack(alignment: .leading, spacing: 0) {
+
+                Spacer()
+                    .frame(height: WrongTokens.spaceSafeTop)
+
+                // WRONG copy + WRONG type sizes + WRONG colors
+                VStack(alignment: .leading, spacing: 8) {
+                    Text("WRONG SCREEN — negative control")
+                        .font(.system(size: WrongTokens.fontSizeHeading,
+                                      weight: .bold))
+                        .foregroundColor(WrongTokens.colorTextHeading)
+
+                    Text("If a judge calls this equivalent to the H5 twin, its verdict is void.")
+                        .font(.system(size: WrongTokens.fontSizeBody,
+                                      weight: .regular))
+                        .foregroundColor(WrongTokens.colorTextBody)
+                        .fixedSize(horizontal: false, vertical: true)
+                }
+                .padding(.horizontal, WrongTokens.spacePageH)
+
+                Spacer()
+                    .frame(height: WrongTokens.spaceSectionGap)
+
+                VStack(alignment: .leading, spacing: WrongTokens.spaceCardGap) {
+
+                    // Taller, near-square, recolored stripe card
+                    HStack(spacing: 0) {
+                        WrongTokens.colorStripeA
+                        WrongTokens.colorStripeB
+                        WrongTokens.colorStripeC
+                        WrongTokens.colorStripeD
+                    }
+                    .frame(height: WrongTokens.spaceCardPadding * 5) // much taller
+                    .clipShape(RoundedRectangle(cornerRadius: WrongTokens.radiusCard))
+
+                    // Circle moved to the TRAILING edge, wrong color, much bigger
+                    HStack {
+                        Spacer()
+                        Circle()
+                            .fill(WrongTokens.colorCircle)
+                            .frame(width: WrongTokens.sizeCircle,
+                                   height: WrongTokens.sizeCircle)
+                    }
+                }
+                .padding(.horizontal, WrongTokens.spacePageH)
+
+                Spacer()
+            }
+            .frame(width: WrongTokens.screenWidth, alignment: .topLeading)
+        }
+        .frame(width: WrongTokens.screenWidth, height: WrongTokens.screenHeight)
+    }
+}
+
+// ── Preview ──────────────────────────────────────────────────────────────── //
+
+#Preview("DIVERGENT (negative control) — 393×852") {
+    CalibrationScreenDivergentView()
+}

package/.local/skills/h5-to-swiftui/assets/calibration/tokens.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "h5-to-swiftui/calibration-tokens@1",
+  "$comment": "Ground-truth design tokens for the Stage 2.5 calibration pair. Both h5-twin/style.css and swiftui-twin/Sources/CalibrationScreen/CalibrationScreen.swift MUST implement every value here exactly. Any measured rendering difference between the two sides is the irreducible cross-renderer floor.",
+
+  "color": {
+    "background":   { "$value": "#F2F2F7", "$type": "color", "$comment": "iOS systemGroupedBackground equivalent" },
+    "card":         { "$value": "#4A90D9", "$type": "color", "$comment": "blue card base; carries multi-color stripes (textured, not flat)" },
+    "circle":       { "$value": "#E8744F", "$type": "color", "$comment": "coral orange circle" },
+    "textHeading":  { "$value": "#1C1C1E", "$type": "color", "$comment": "iOS label equivalent" },
+    "textBody":     { "$value": "#636366", "$type": "color", "$comment": "iOS secondaryLabel equivalent" },
+    "stripeA":      { "$value": "#4A90D9", "$type": "color", "$comment": "card stripe 1 (blue) — structured region so SSIM is meaningful" },
+    "stripeB":      { "$value": "#7E57C2", "$type": "color", "$comment": "card stripe 2 (purple)" },
+    "stripeC":      { "$value": "#26A69A", "$type": "color", "$comment": "card stripe 3 (teal)" },
+    "stripeD":      { "$value": "#F4B400", "$type": "color", "$comment": "card stripe 4 (amber)" }
+  },
+
+  "space": {
+    "safeTop":      { "$value": 59,  "$unit": "px_pt", "$comment": "iPhone 15 Pro top safe-area inset, CSS px = Swift pt at 1× logical scale" },
+    "pageH":        { "$value": 20,  "$unit": "px_pt", "$comment": "horizontal page padding" },
+    "sectionGap":   { "$value": 24,  "$unit": "px_pt", "$comment": "vertical gap between text block and shape block" },
+    "cardPadding":  { "$value": 20,  "$unit": "px_pt", "$comment": "inner padding of the blue card" },
+    "cardGap":      { "$value": 16,  "$unit": "px_pt", "$comment": "gap between card and circle row" }
+  },
+
+  "radius": {
+    "card":         { "$value": 16,  "$unit": "px_pt", "$comment": "border-radius of the blue card" }
+  },
+
+  "font": {
+    "family":           { "$value": "-apple-system",  "$type": "fontFamily", "$comment": "CSS: -apple-system / system-ui; Swift: .system(size:weight:)" },
+    "sizeHeading":      { "$value": 22,               "$unit": "px_pt" },
+    "weightHeading":    { "$value": 600,              "$comment": "CSS 600 = semibold; Swift .semibold" },
+    "lineHeightHeading":{ "$value": 1.27,             "$unit": "multiplier", "$comment": "unitless multiplier; 22 × 1.27 ≈ 28 pt" },
+    "sizeBody":         { "$value": 15,               "$unit": "px_pt" },
+    "weightBody":       { "$value": 400,              "$comment": "CSS 400 = regular; Swift .regular" },
+    "lineHeightBody":   { "$value": 1.47,             "$unit": "multiplier", "$comment": "unitless multiplier; 15 × 1.47 ≈ 22 pt" }
+  },
+
+  "shape": {
+    "circleSize":   { "$value": 64, "$unit": "px_pt", "$comment": "diameter of the coral circle" }
+  }
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chronicle Feed</title>
+    <link rel="stylesheet" href="/src/styles/tokens.css" />
+    <link rel="stylesheet" href="/src/styles/global.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "chronicle-feed",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.2"
+  }
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/public/api/articles/001.json

@@ -0,0 +1,96 @@
+{
+  "id": "001",
+  "title": "SwiftUI Custom Layouts: A Complete Guide",
+  "subtitle": "How the Layout protocol changes everything you thought you knew about view composition",
+  "tag": "SwiftUI",
+  "author": {
+    "name": "Elena Vasquez",
+    "role": "Senior iOS Engineer",
+    "bio": "Elena writes about Swift, SwiftUI, and the craft of building beautiful iOS apps. Previously at Apple UIKit team."
+  },
+  "publishedAt": "2026-05-12T08:00:00Z",
+  "readingTime": 9,
+  "body": [
+    {
+      "type": "paragraph",
+      "text": "Before iOS 16, building a tag cloud in SwiftUI required creative workarounds: measuring text with a hidden Text view, storing widths in a preference key, and recomputing rows in a second pass. The result was fragile, verbose, and broke Dynamic Type. The Layout protocol changes all of that."
+    },
+    {
+      "type": "heading",
+      "text": "What the Layout Protocol Actually Does"
+    },
+    {
+      "type": "paragraph",
+      "text": "The Layout protocol exposes two methods: sizeThatFits and placeSubviews. Together they replicate the two-pass layout model that UIKit's layoutSubviews always had, but in a pure-Swift, declarative API that composes naturally with other SwiftUI views."
+    },
+    {
+      "type": "paragraph",
+      "text": "The key insight is that a Layout conformer does not manage a view hierarchy — it manages geometry. Your subviews remain ordinary SwiftUI views with all their modifiers and state intact. The Layout only decides where they go and how much space they claim."
+    },
+    {
+      "type": "pullquote",
+      "text": "A Layout conformer does not manage a view hierarchy. It manages geometry. The distinction matters more than it seems.",
+      "attribution": "Apple WWDC22-10056, Compose custom layouts with SwiftUI"
+    },
+    {
+      "type": "heading",
+      "text": "The FlowLayout Pattern"
+    },
+    {
+      "type": "paragraph",
+      "text": "The most common use case is a flow layout — the direct equivalent of CSS flex-wrap: wrap. Items line up horizontally until they would overflow, then wrap to the next row. Each row height is determined by the tallest item in that row."
+    },
+    {
+      "type": "subheading",
+      "text": "sizeThatFits: Measure First"
+    },
+    {
+      "type": "paragraph",
+      "text": "The sizeThatFits pass walks through subviews, asking each one for its ideal size via sizeThatFits(.unspecified). It tracks the current x offset and wraps to a new row whenever adding the next item would exceed the proposed width. The total height is the sum of all row heights plus spacing between rows."
+    },
+    {
+      "type": "code",
+      "caption": "FlowLayout.swift — sizeThatFits",
+      "text": "func sizeThatFits(\n    proposal: ProposedViewSize,\n    subviews: Subviews,\n    cache: inout ()\n) -> CGSize {\n    let maxWidth = proposal.width ?? .infinity\n    var x: CGFloat = 0\n    var y: CGFloat = 0\n    var rowHeight: CGFloat = 0\n\n    for view in subviews {\n        let size = view.sizeThatFits(.unspecified)\n        if x + size.width > maxWidth, x > 0 {\n            y += rowHeight + spacing\n            x = 0\n            rowHeight = 0\n        }\n        x += size.width + spacing\n        rowHeight = max(rowHeight, size.height)\n    }\n    return CGSize(width: maxWidth, height: y + rowHeight)\n}"
+    },
+    {
+      "type": "subheading",
+      "text": "placeSubviews: Commit the Geometry"
+    },
+    {
+      "type": "paragraph",
+      "text": "The placeSubviews pass repeats the same walk — you cannot cache positions between the two passes in the void-cache form — and calls place(at:proposal:) on each subview. The coordinates are in the container's local coordinate space, with origin at the top-left of the bounds rect."
+    },
+    {
+      "type": "caption",
+      "text": "Note: add a struct Cache type to avoid measuring subviews twice when measurement is expensive."
+    },
+    {
+      "type": "divider"
+    },
+    {
+      "type": "heading",
+      "text": "When to Reach for Custom Layout"
+    },
+    {
+      "type": "paragraph",
+      "text": "Not every complex layout needs a custom Layout conformer. LazyVGrid with GridItem(.adaptive(minimum:)) handles the vast majority of responsive card grids. HStack and VStack with Spacer handle nearly all flex-direction use cases. Reserve custom Layout for four specific patterns: flex-wrap, non-uniform flex-grow ratios, non-uniform fr ratios, and radial placement."
+    },
+    {
+      "type": "paragraph",
+      "text": "The cost of a custom Layout is measured in code, not performance. The layout engine is highly optimized — a properly implemented FlowLayout is not measurably slower than LazyVGrid. The cost is the additional code surface to maintain and test. Write it once, test it, package it, and reuse it."
+    },
+    {
+      "type": "heading",
+      "text": "Dynamic Type and the Layout Protocol"
+    },
+    {
+      "type": "paragraph",
+      "text": "One of the best properties of a Layout-based flow is that it handles Dynamic Type correctly with zero extra work. Because each subview measures itself at its natural size — including any text scaling from the environment — the flow layout automatically reflows items when the user changes their preferred text size. Compare this to a hardcoded UICollectionViewFlowLayout with itemSize: there is no equivalent automatic reflow."
+    },
+    {
+      "type": "paragraph",
+      "text": "This composability — layout logic fully decoupled from content — is the deepest benefit of the Layout protocol. Build the geometry algorithm once. Apply it to any content. The content takes care of itself."
+    }
+  ]
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/public/api/articles/index.json

@@ -0,0 +1,89 @@
+{
+  "articles": [
+    {
+      "id": "001",
+      "title": "SwiftUI Custom Layouts: A Complete Guide",
+      "subtitle": "How the Layout protocol changes everything you thought you knew about view composition",
+      "summary": "Apple's Layout protocol, introduced in iOS 16, fills the last major gap between CSS Flexbox and SwiftUI. Here is how to use it without rewriting your entire view hierarchy.",
+      "tag": "SwiftUI",
+      "author": {
+        "name": "Elena Vasquez",
+        "role": "Senior iOS Engineer",
+        "bio": "Elena writes about Swift, SwiftUI, and the craft of building beautiful iOS apps. Previously at Apple UIKit team."
+      },
+      "publishedAt": "2026-05-12T08:00:00Z",
+      "readingTime": 9,
+      "imageAlt": "Diagram showing SwiftUI layout protocol flow"
+    },
+    {
+      "id": "002",
+      "title": "CSS-to-SwiftUI: The Mapping Table You Actually Need",
+      "subtitle": "Every flex and grid property mapped — with the caveats that break your layout",
+      "summary": "Mechanical transpilation from CSS to SwiftUI fails at six structural boundaries. This guide documents every mapping that matters for pixel-level parity and the exact divergences you need to handle manually.",
+      "tag": "Design",
+      "author": {
+        "name": "Marcus Liu",
+        "role": "Design Engineer"
+      },
+      "publishedAt": "2026-05-08T10:30:00Z",
+      "readingTime": 12,
+      "imageAlt": "Side-by-side CSS and SwiftUI code comparison"
+    },
+    {
+      "id": "003",
+      "title": "WebGL on iOS: When to Keep It and When to Rewrite",
+      "subtitle": "A practical triage guide for GPU-heavy web content in a native app migration",
+      "summary": "Not every canvas element should become a Metal view. Understanding the performance ceiling and fidelity trade-offs helps you make the right call on each surface — and avoid shipping a half-native app.",
+      "tag": "Engineering",
+      "author": {
+        "name": "Priya Nair",
+        "role": "Platform Engineer"
+      },
+      "publishedAt": "2026-05-01T09:15:00Z",
+      "readingTime": 7,
+      "imageAlt": "GPU pipeline diagram"
+    },
+    {
+      "id": "004",
+      "title": "Typography at the iOS Scale: CoreText vs WebKit",
+      "subtitle": "Why identical font declarations produce different layouts — and how to fix them",
+      "summary": "line-height: 1.5 means something different in every rendering engine. This deep-dive explains WebKit's half-leading, CoreText's font metrics, and the exact formula to convert between them without visual drift.",
+      "tag": "Design",
+      "author": {
+        "name": "Sofia Andersson",
+        "role": "Type Systems Lead"
+      },
+      "publishedAt": "2026-04-28T07:45:00Z",
+      "readingTime": 11,
+      "imageAlt": "Typography baseline grid comparison"
+    },
+    {
+      "id": "005",
+      "title": "Accessibility Tokens: Building a Design System for Both Web and iOS",
+      "subtitle": "One token source of truth, two rendering targets, zero compromises",
+      "summary": "Design tokens are the bridge between your CSS custom properties and SwiftUI's Color and Font extensions. When you get the extraction pipeline right, dark mode and Dynamic Type come for free on both platforms.",
+      "tag": "Accessibility",
+      "author": {
+        "name": "Elena Vasquez",
+        "role": "Senior iOS Engineer"
+      },
+      "publishedAt": "2026-04-20T11:00:00Z",
+      "readingTime": 8,
+      "imageAlt": "Design token pipeline diagram"
+    },
+    {
+      "id": "006",
+      "title": "Machine Learning at the Edge: Core ML vs WebAssembly",
+      "subtitle": "How on-device inference differs between iOS and modern browsers",
+      "summary": "WebAssembly SIMD can achieve near-native throughput for small models, but Core ML's neural engine offers a 10x power efficiency advantage. Here is when each approach wins.",
+      "tag": "Machine Learning",
+      "author": {
+        "name": "James Park",
+        "role": "ML Platform Lead"
+      },
+      "publishedAt": "2026-04-15T14:00:00Z",
+      "readingTime": 14,
+      "imageAlt": "Core ML vs WASM inference benchmark chart"
+    }
+  ]
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/src/App.jsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { Routes, Route, useNavigate } from 'react-router-dom';
+import FeedScreen from './screens/FeedScreen.jsx';
+import ArticleScreen from './screens/ArticleScreen.jsx';
+import NavBar from './components/NavBar.jsx';
+import styles from './App.module.css';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('feed');
+
+  return (
+    <div className={styles.appRoot}>
+      <NavBar activeTab={activeTab} onTabChange={setActiveTab} />
+      <main className={styles.main}>
+        <Routes>
+          <Route path="/" element={<FeedScreen />} />
+          <Route path="/article/:id" element={<ArticleScreen />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/src/App.module.css

@@ -0,0 +1,11 @@
+.appRoot {
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+}
+
+.main {
+  flex: 1;
+  overflow-y: auto;
+  background-color: var(--color-bg-secondary);
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/src/components/ArticleCard.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import styles from './ArticleCard.module.css';
+
+export default function ArticleCard({ article }) {
+  const navigate = useNavigate();
+  const { id, title, summary, author, publishedAt, readingTime, tag, imageAlt } = article;
+
+  const formattedDate = new Date(publishedAt).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+  return (
+    <article
+      className={styles.card}
+      onClick={() => navigate(`/article/${id}`)}
+      role="button"
+      tabIndex={0}
+      onKeyDown={e => e.key === 'Enter' && navigate(`/article/${id}`)}
+    >
+      <div className={styles.imagePlaceholder} aria-label={imageAlt}>
+        <span className={styles.imagePlaceholderText}>{imageAlt}</span>
+      </div>
+
+      <div className={styles.body}>
+        <div className={styles.meta}>
+          <span className={styles.tag}>{tag}</span>
+          <span className={styles.readingTime}>{readingTime} min read</span>
+        </div>
+
+        <h2 className={styles.title}>{title}</h2>
+        <p className={styles.summary}>{summary}</p>
+
+        <div className={styles.footer}>
+          <div className={styles.authorArea}>
+            <div className={styles.avatar} aria-hidden="true">
+              {author.name.slice(0, 1)}
+            </div>
+            <div className={styles.authorInfo}>
+              <span className={styles.authorName}>{author.name}</span>
+              <span className={styles.authorRole}>{author.role}</span>
+            </div>
+          </div>
+          <time className={styles.date} dateTime={publishedAt}>
+            {formattedDate}
+          </time>
+        </div>
+      </div>
+    </article>
+  );
+}