npm - claudecode-omc - Versions diffs - 5.6.5 → 5.6.7 - Mend

claudecode-omc 5.6.5 → 5.6.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (434) hide show

package/.local/skills/h5-to-swiftui/assets/calibration/h5-twin/index.html ADDED Viewed

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+  Calibration Twin — h5-twin/index.html
+  Known-correct H5 side of the Stage 2.5 render-equivalence calibration pair.
+  Open directly as a static file — zero JS framework, zero build step.
+  IMPORTANT: every color, size, and spacing value here is driven by the CSS
+  custom properties in style.css, which must remain in sync with
+  tokens.json and swiftui-twin/Sources/CalibrationScreen/CalibrationScreen.swift.
+-->
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <!--
+    Viewport: fixed 393px logical width, no user scaling.
+    Matches iPhone 15 Pro logical resolution used in the SwiftUI twin.
+  -->
+  <meta name="viewport" content="width=393, initial-scale=1.0, user-scalable=no" />
+  <title>Calibration Twin</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="screen">
+    <!-- TEXT BLOCK: heading + body paragraph -->
+    <section class="text-block" aria-label="text-block">
+      <h1 class="text-block__heading">Calibration Screen</h1>
+      <p  class="text-block__body">
+        This screen is the known-correct H5 twin used to measure the
+        cross-renderer fidelity floor. It is not a conversion target.
+      </p>
+    </section>
+    <!-- SHAPE BLOCK: structured (multi-color stripes) card + circle.
+         Deliberately NOT a flat solid block — SSIM is insensitive to a
+         uniform mean shift on flat content, so the calibration region must
+         carry structure for the floor to be meaningful. -->
+    <section class="shape-block" aria-label="shape-block">
+      <div class="shape-block__card" aria-label="card">
+        <div class="shape-block__stripe shape-block__stripe--a"></div>
+        <div class="shape-block__stripe shape-block__stripe--b"></div>
+        <div class="shape-block__stripe shape-block__stripe--c"></div>
+        <div class="shape-block__stripe shape-block__stripe--d"></div>
+      </div>
+      <div class="shape-block__circle-row">
+        <div class="shape-block__circle" aria-label="circle"></div>
+      </div>
+    </section>
+  </div>
+</body>
+</html>

package/.local/skills/h5-to-swiftui/assets/calibration/h5-twin/style.css ADDED Viewed

@@ -0,0 +1,133 @@
+/* Calibration Twin — style.css
+   Design tokens as CSS custom properties.
+   Every value here MUST match tokens.json and CalibrationScreen.swift exactly.
+   Do NOT add, remove, or change values without updating all three files.
+*/
+/* ── Design Tokens ──────────────────────────────────────────────── */
+:root {
+  /* colors */
+  --color-background:    #F2F2F7;
+  --color-card:          #4A90D9;
+  --color-circle:        #E8744F;
+  --color-text-heading:  #1C1C1E;
+  --color-text-body:     #636366;
+  /* card stripes — structured multi-color region (NOT a flat block) so the
+     measured SSIM floor is meaningful (flat content makes SSIM blind to a
+     uniform mean shift). */
+  --color-stripe-a:      #4A90D9;   /* blue   */
+  --color-stripe-b:      #7E57C2;   /* purple */
+  --color-stripe-c:      #26A69A;   /* teal   */
+  --color-stripe-d:      #F4B400;   /* amber  */
+  /* spacing */
+  --space-safe-top:      59px;   /* iPhone 15 Pro top safe-area inset */
+  --space-page-h:        20px;   /* horizontal page padding */
+  --space-section-gap:   24px;   /* gap between text block and shape block */
+  --space-card-padding:  20px;   /* inner padding of the blue card */
+  --space-card-gap:      16px;   /* gap between card and circle row */
+  /* radii */
+  --radius-card:         16px;
+  /* typography */
+  --font-family:         -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
+  --font-size-heading:   22px;
+  --font-weight-heading: 600;    /* semibold */
+  --line-height-heading: 1.27;   /* ~28px → matches SF heading leading */
+  --font-size-body:      15px;
+  --font-weight-body:    400;    /* regular */
+  --line-height-body:    1.47;   /* ~22px → matches SF body leading */
+  /* shape */
+  --size-circle:         64px;
+}
+/* ── Reset / Base ───────────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html, body {
+  width: 393px;          /* iPhone 15 Pro logical width */
+  min-height: 852px;     /* iPhone 15 Pro logical height */
+  background-color: var(--color-background);
+  font-family: var(--font-family);
+  -webkit-font-smoothing: antialiased;
+}
+/* ── Screen container ───────────────────────────────────────────── */
+.screen {
+  width: 393px;
+  min-height: 852px;
+  background-color: var(--color-background);
+  padding-top: var(--space-safe-top);
+  padding-left: var(--space-page-h);
+  padding-right: var(--space-page-h);
+}
+/* ── Text block ─────────────────────────────────────────────────── */
+.text-block {
+  /* sits immediately below safe-area inset, no extra top margin */
+}
+.text-block__heading {
+  font-family: var(--font-family);
+  font-size: var(--font-size-heading);
+  font-weight: var(--font-weight-heading);
+  line-height: var(--line-height-heading);
+  color: var(--color-text-heading);
+}
+.text-block__body {
+  margin-top: 8px;
+  font-family: var(--font-family);
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-body);
+  line-height: var(--line-height-body);
+  color: var(--color-text-body);
+}
+/* ── Shape block ────────────────────────────────────────────────── */
+.shape-block {
+  margin-top: var(--space-section-gap);
+}
+.shape-block__card {
+  background-color: var(--color-card);
+  border-radius: var(--radius-card);
+  /* fixed height instead of padding-only so the stripes have a stable box;
+     2 × card padding (40px) keeps the same overall card height as before. */
+  height: calc(var(--space-card-padding) * 2);
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+}
+/* 4 equal-width vertical stripes — a structured, multi-color region. */
+.shape-block__stripe {
+  flex: 1 1 25%;
+  height: 100%;
+}
+.shape-block__stripe--a { background-color: var(--color-stripe-a); }
+.shape-block__stripe--b { background-color: var(--color-stripe-b); }
+.shape-block__stripe--c { background-color: var(--color-stripe-c); }
+.shape-block__stripe--d { background-color: var(--color-stripe-d); }
+.shape-block__circle-row {
+  margin-top: var(--space-card-gap);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.shape-block__circle {
+  width: var(--size-circle);
+  height: var(--size-circle);
+  border-radius: 50%;
+  background-color: var(--color-circle);
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,26 @@
+// swift-tools-version: 5.9
+// Calibration Twin — SwiftUI Package
+// Zero third-party dependencies. Requires Xcode 15+ / Swift 5.9+.
+import PackageDescription
+let package = Package(
+    name: "CalibrationScreen",
+    platforms: [
+        .iOS(.v17),
+        .macOS(.v14)
+    ],
+    products: [
+        .library(
+            name: "CalibrationScreen",
+            targets: ["CalibrationScreen"]
+        )
+    ],
+    targets: [
+        .target(
+            name: "CalibrationScreen",
+            dependencies: [],
+            path: "Sources/CalibrationScreen"
+        )
+    ]
+)

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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"
+  }
+}