claudecode-omc 5.6.5 → 5.6.7

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>
+  );
+}

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

@@ -0,0 +1,139 @@
+.card {
+  background-color: var(--color-bg-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  cursor: pointer;
+  transition: box-shadow var(--duration-normal) var(--easing-default),
+              transform var(--duration-normal) var(--easing-default);
+  display: flex;
+  flex-direction: column;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-elevated);
+  transform: translateY(-2px);
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.imagePlaceholder {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background-color: var(--color-bg-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.imagePlaceholderText {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-caption);
+  text-align: center;
+  padding: var(--space-2);
+}
+
+.body {
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  flex-grow: 1;
+}
+
+.meta {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tag {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+
+.readingTime {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-caption);
+}
+
+.title {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-subhead);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-tight);
+  letter-spacing: -0.3px;
+}
+
+.summary {
+  font-size: var(--font-size-body);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-divider);
+}
+
+.authorArea {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-accent);
+  color: var(--color-text-on-accent);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.authorInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.authorName {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.authorRole {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-caption);
+}
+
+.date {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-caption);
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import styles from './NavBar.module.css';
+
+const TABS = [
+  { id: 'feed', label: 'Feed', path: '/' },
+];
+
+export default function NavBar({ activeTab, onTabChange }) {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  function handleTab(tab) {
+    onTabChange(tab.id);
+    navigate(tab.path);
+  }
+
+  return (
+    <header className={styles.navbar}>
+      <div className={styles.logoArea}>
+        <span className={styles.logoMark}>C</span>
+        <span className={styles.logoText}>Chronicle</span>
+      </div>
+      <nav className={styles.tabs}>
+        {TABS.map(tab => (
+          <button
+            key={tab.id}
+            className={`${styles.tab} ${location.pathname === tab.path ? styles.tabActive : ''}`}
+            onClick={() => handleTab(tab)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+    </header>
+  );
+}

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

@@ -0,0 +1,72 @@
+.navbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-6);
+  background-color: var(--color-bg-primary);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.logoArea {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.logoMark {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  background-color: var(--color-accent);
+  color: var(--color-text-on-accent);
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logoText {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-headline);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  letter-spacing: -0.5px;
+}
+
+.tabs {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-1);
+}
+
+.tab {
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  transition: background-color var(--duration-fast) var(--easing-default),
+              color var(--duration-fast) var(--easing-default);
+}
+
+.tab:hover {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+}
+
+.tabActive {
+  background-color: var(--color-accent);
+  color: var(--color-text-on-accent);
+}
+
+.tabActive:hover {
+  background-color: var(--color-accent-hover);
+  color: var(--color-text-on-accent);
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './TagCloud.module.css';
+
+/**
+ * TagCloud — a flex-wrap tag gallery with non-uniform item widths.
+ *
+ * CSS uses `flex-wrap: wrap` with variable-length tag labels.
+ * This pattern has NO stock SwiftUI equivalent:
+ *   "flex-wrap: wrap → HStack never wraps; LazyHGrid/LazyVGrid are scroll
+ *    containers, not inline wrapping layouts" (css-to-swiftui-map.md)
+ *
+ * CUSTOM-LAYOUT: flex-wrap:wrap — the variable-width tags must reflow onto
+ * multiple rows at arbitrary breakpoints determined by available width, which
+ * HStack cannot do. SwiftUI port requires the FlowLayout custom Layout protocol.
+ */
+export default function TagCloud({ tags, onTagClick, selectedTag }) {
+  return (
+    <div className={styles.cloud}>
+      {tags.map(tag => (
+        <button
+          key={tag}
+          className={`${styles.tag} ${selectedTag === tag ? styles.tagSelected : ''}`}
+          onClick={() => onTagClick(tag === selectedTag ? null : tag)}
+        >
+          {tag}
+        </button>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+/* CUSTOM-LAYOUT: flex-wrap:wrap
+ *
+ * flex-wrap: wrap causes tags with non-uniform widths to reflow onto multiple
+ * rows. The break points are data-driven (label length) and width-driven
+ * (viewport). HStack in SwiftUI never wraps — this MUST use a custom Layout
+ * (FlowLayout) implementing the Layout protocol (iOS 16+).
+ *
+ * Trigger quote from css-to-swiftui-map.md:
+ *   "flex-wrap: wrap → Custom Layout protocol (iOS 16+) — FlowLayout
+ *    No LazyHGrid/LazyVGrid equivalent for true wrapping"
+ */
+.cloud {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap; /* CUSTOM-LAYOUT: flex-wrap:wrap */
+  gap: var(--space-2) var(--space-2);
+  padding: var(--space-4) 0;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-tag);
+  color: var(--color-text-accent);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  border: 1px solid transparent;
+  transition: background-color var(--duration-fast) var(--easing-default),
+              border-color var(--duration-fast) var(--easing-default);
+  cursor: pointer;
+}
+
+.tag:hover {
+  background-color: var(--color-bg-secondary);
+  border-color: var(--color-border);
+}
+
+.tagSelected {
+  background-color: var(--color-accent);
+  color: var(--color-text-on-accent);
+  border-color: var(--color-accent);
+}
+
+.tagSelected:hover {
+  background-color: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+}