claudecode-omc 5.6.6 → 5.6.7

package/.local/skills/h5-to-swiftui/assets/sample-h5-vanilla/styles/app.css

@@ -0,0 +1,342 @@
+/* ── Global reset & base ─────────────────────────────────────────────────── */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-normal);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  min-height: 100vh;
+}
+
+/* ── Nav bar ─────────────────────────────────────────────────────────────── */
+
+#nav-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: 0 var(--space-6);
+  height: var(--nav-height);
+  background-color: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.nav-link {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.nav-link:hover {
+  color: var(--color-primary);
+  background-color: var(--color-surface-alt);
+}
+
+.nav-link.active {
+  color: var(--color-primary);
+  font-weight: var(--font-weight-bold);
+}
+
+/* ── Screen root ─────────────────────────────────────────────────────────── */
+
+#screen-root {
+  padding: var(--space-6);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+/* ── Screen transition (simple fade) ────────────────────────────────────── */
+
+.screen {
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Home screen ─────────────────────────────────────────────────────────── */
+
+.home-hero {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin-bottom: var(--space-8);
+}
+
+.home-hero h1 {
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+}
+
+.home-hero p {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-body);
+}
+
+.home-stats {
+  display: flex;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-8);
+}
+
+.stat-card {
+  flex: 1 1 120px;
+  background-color: var(--color-surface);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-card);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.stat-card .stat-value {
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
+}
+
+.stat-card .stat-label {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.home-cta {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+/* ── Buttons ─────────────────────────────────────────────────────────────── */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3) var(--space-5);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+  transition: opacity 0.15s, transform 0.1s;
+}
+
+.btn:active { transform: scale(0.97); }
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: #ffffff;
+}
+
+.btn-primary:hover { background-color: var(--color-primary-dark); }
+
+.btn-secondary {
+  background-color: var(--color-surface-alt);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover { background-color: var(--color-border); }
+
+/* ── List screen ─────────────────────────────────────────────────────────── */
+
+.list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-6);
+}
+
+.list-header h2 {
+  font-size: var(--font-size-heading);
+  font-weight: var(--font-weight-bold);
+}
+
+.task-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  list-style: none;
+}
+
+.task-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  background-color: var(--color-surface);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-card);
+  cursor: pointer;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.task-row:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
+}
+
+.task-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.task-dot.priority-high   { background-color: var(--color-danger); }
+.task-dot.priority-medium { background-color: #ff9f0a; }
+.task-dot.priority-low    { background-color: var(--color-success); }
+
+.task-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.task-title {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+}
+
+.task-meta {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+}
+
+.task-done .task-title {
+  text-decoration: line-through;
+  color: var(--color-text-secondary);
+}
+
+.task-badge {
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-full);
+  background-color: var(--color-surface-alt);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+/* ── Detail screen ───────────────────────────────────────────────────────── */
+
+.detail-back {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-primary);
+  font-size: var(--font-size-body);
+  text-decoration: none;
+  margin-bottom: var(--space-6);
+}
+
+.detail-card {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-card);
+  margin-bottom: var(--space-6);
+}
+
+.detail-image-placeholder {
+  width: 100%;
+  height: 180px;
+  background-color: var(--color-surface-alt);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-caption);
+}
+
+.detail-body {
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.detail-title {
+  font-size: var(--font-size-heading);
+  font-weight: var(--font-weight-bold);
+}
+
+.detail-desc {
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+}
+
+.detail-meta-row {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.detail-chip {
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-full);
+  background-color: var(--color-surface-alt);
+  color: var(--color-text);
+}
+
+/* ── Canvas sparkline section ────────────────────────────────────────────── */
+
+.sparkline-section {
+  margin-bottom: var(--space-6);
+}
+
+.sparkline-section h3 {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--space-3);
+  color: var(--color-text-secondary);
+}
+
+/* TIER3: canvas custom drawing */
+#sparkline-canvas {
+  display: block;
+  width: 100%;
+  height: 80px;
+  border-radius: var(--radius-md);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+}
+
+/* ── Empty state ─────────────────────────────────────────────────────────── */
+
+.empty-state {
+  text-align: center;
+  padding: var(--space-12) var(--space-6);
+  color: var(--color-text-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.empty-state p {
+  font-size: var(--font-size-body);
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-vanilla/styles/tokens.css

@@ -0,0 +1,68 @@
+/* ── Design Tokens ───────────────────────────────────────────────────────────
+   All visual values are defined here as CSS custom properties so that
+   extract-tokens.mjs can harvest them in Stage 1.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Colors */
+  --color-bg:            #f5f5f7;
+  --color-surface:       #ffffff;
+  --color-surface-alt:   #f0f0f5;
+  --color-primary:       #007aff;
+  --color-primary-dark:  #0055cc;
+  --color-text:          #1c1c1e;
+  --color-text-secondary:#6e6e73;
+  --color-border:        #d1d1d6;
+  --color-danger:        #ff3b30;
+  --color-success:       #34c759;
+
+  /* Typography */
+  --font-size-title:     1.75rem;
+  --font-size-heading:   1.25rem;
+  --font-size-body:      1rem;
+  --font-size-caption:   0.75rem;
+  --font-weight-regular: 400;
+  --font-weight-medium:  500;
+  --font-weight-bold:    700;
+  --line-height-tight:   1.2;
+  --line-height-normal:  1.5;
+
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-12: 3rem;
+
+  /* Radii */
+  --radius-sm:   4px;
+  --radius-md:   8px;
+  --radius-lg:   16px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+  /* Nav */
+  --nav-height: 3rem;
+}
+
+/* ── Dark scheme ─────────────────────────────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg:            #000000;
+    --color-surface:       #1c1c1e;
+    --color-surface-alt:   #2c2c2e;
+    --color-primary:       #0a84ff;
+    --color-primary-dark:  #409cff;
+    --color-text:          #ffffff;
+    --color-text-secondary:#aeaeb2;
+    --color-border:        #38383a;
+    --color-danger:        #ff453a;
+    --color-success:       #30d158;
+    --shadow-card:         0 2px 8px rgba(0, 0, 0, 0.4);
+  }
+}

package/.local/skills/h5-to-swiftui/references/css-to-swiftui-map.md

@@ -0,0 +1,205 @@
+# CSS → SwiftUI Mapping Reference — Stage 4
+
+This is the lookup table used by the Stage 4 LLM prompt and the idiomatic-lint
+checker. Accuracy is critical — this directly drives code generation. Every row
+includes a caveat column because a mapping without its caveat is incomplete.
+
+Source: findings.md RQ5 (kean.blog; Hacking with Swift; Swift with Majid;
+swiftuifieldguide; Apple WWDC22-10056; tonsky.me; fatbobman).
+
+---
+
+## Flexbox → SwiftUI
+
+| CSS property / value | SwiftUI equivalent | Caveat |
+|---|---|---|
+| `display: flex; flex-direction: row` | `HStack(alignment:, spacing:)` | Default `HStack()` spacing is non-zero (system-defined); **always pass `spacing: 0`** then add explicit spacing between children |
+| `display: flex; flex-direction: column` | `VStack(alignment:, spacing:)` | Same spacing caveat — pass `spacing: 0` |
+| `flex-direction: row-reverse` | `HStack` + `.environment(\.layoutDirection, .rightToLeft)` or reverse the child array | Prefer reversing child array when order is data-driven |
+| `flex-direction: column-reverse` | `VStack` + reversed child array | No native reverse stack; reversing in data source is cleanest |
+| `justify-content: flex-start` | Default (leading) | No modifier needed |
+| `justify-content: flex-end` | `Spacer()` before first child | `Spacer()` expands to fill available space |
+| `justify-content: center` | `Spacer()` + children + `Spacer()` | Or `.frame(maxWidth: .infinity, alignment: .center)` on the container |
+| `justify-content: space-between` | `Spacer()` between each pair of children | Must insert N−1 spacers manually |
+| `justify-content: space-around` | `Spacer()` before first, between each, after last | Each spacer gets equal weight; use `Spacer(minLength: 0)` |
+| `justify-content: space-evenly` | `Spacer()` at all gaps including edges | Same as `space-around` implementation in SwiftUI |
+| `align-items: flex-start` | `HStack(alignment: .top)` / `VStack(alignment: .leading)` | |
+| `align-items: center` | `HStack(alignment: .center)` / `VStack(alignment: .center)` | `.center` is the default for HStack |
+| `align-items: flex-end` | `HStack(alignment: .bottom)` / `VStack(alignment: .trailing)` | |
+| `align-items: stretch` | Default HStack/VStack behavior for views with no explicit frame | Add `.frame(maxWidth: .infinity)` on children that need to stretch |
+| `align-items: baseline` | `HStack(alignment: .firstTextBaseline)` | Also `.lastTextBaseline`; applies only to text-bearing children |
+| `align-self: <value>` | `.alignmentGuide(alignment, computeValue:)` on the individual child | No direct `align-self` equivalent; alignment guides are complex — use only when necessary |
+| `flex-grow: 1` (uniform on all siblings) | `.frame(maxWidth: .infinity)` (in HStack) or `.frame(maxHeight: .infinity)` (in VStack) | Only correct when all siblings have the same grow ratio |
+| `flex-grow` (non-uniform ratios) | **Custom `Layout` protocol (iOS 16+)** | See "When you MUST use custom Layout" section below |
+| `flex-shrink: 0` | `.fixedSize()` or explicit `.frame(width:, height:)` | Prevents the view from shrinking below its ideal size |
+| `flex-shrink: 1` (default) | Default SwiftUI behavior | SwiftUI views compress by default when space is tight |
+| `flex-basis: <value>` | `.frame(width: value)` / `.frame(height: value)` | Approximate only; no exact CSS `flex-basis` semantics in SwiftUI |
+| `flex-wrap: wrap` | **Custom `Layout` protocol (iOS 16+)** — `FlowLayout` | No `LazyHGrid`/`LazyVGrid` equivalent for true wrapping; see FlowLayout sketch below |
+| `flex-wrap: nowrap` | Default HStack/VStack (no wrapping) | |
+| `gap: <value>` | `spacing: value` parameter on HStack/VStack | Both row-gap and column-gap map to the same `spacing` param — if they differ, use custom Layout |
+| `row-gap: <value>` | `spacing: value` on VStack | |
+| `column-gap: <value>` | `spacing: value` on HStack | |
+| `order: <n>` | Reorder child array in data source | SwiftUI renders children in declaration order; no runtime reorder modifier exists |
+
+---
+
+## CSS Grid → SwiftUI
+
+SwiftUI's grid support is intentionally limited. Know the ceiling.
+
+| CSS Grid construct | SwiftUI equivalent | Caveat |
+|---|---|---|
+| `grid-template-columns: repeat(N, 1fr)` | `LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: N))` | Only works for uniform fraction columns; not for mixed units |
+| `grid-template-columns: auto-fill minmax(min, max)` | `LazyVGrid(columns: [GridItem(.adaptive(minimum: min, maximum: max))])` | `.adaptive` fills available width automatically |
+| `fr` ratios (non-uniform, e.g. `1fr 2fr 1fr`) | **Custom `Layout` protocol (iOS 16+)** | No `LazyVGrid` equivalent; fr ratios require measuring total space and distributing proportionally |
+| `grid-template-areas` | Not supported in LazyVGrid/Grid | Use `ZStack` + `.position` for named-area layouts, or custom Layout |
+| `grid-column: span N` (eager Grid) | `.gridCellColumns(N)` on the child | Only works inside `Grid` (eager), not `LazyVGrid` |
+| `grid-row: span N` | Not supported in LazyVGrid | Requires `Grid` (eager) or custom Layout |
+| Explicit line placement (`grid-column: 2 / 4`) | Not supported natively | Custom Layout required |
+| Auto-placement (dense) | LazyVGrid default | LazyVGrid uses source order auto-placement; no `grid-auto-flow: dense` |
+| `gap` / `column-gap` / `row-gap` | `spacing` on `LazyVGrid` or `Grid` | Sets both axes uniformly; split-axis gap requires custom Layout |
+| `Grid` (eager, iOS 16+) | `Grid { GridRow { … } }` | Full alignment control; use for small, known-count grids |
+| `LazyVGrid` | `LazyVGrid(columns:, spacing:)` | For large/dynamic lists; less alignment control than `Grid` |
+
+---
+
+## Positioning → SwiftUI
+
+| CSS value | SwiftUI equivalent | Caveat |
+|---|---|---|
+| `position: static` (default) | Default SwiftUI layout flow | No modifier needed |
+| `position: relative` + `top/left/right/bottom` | `.offset(x:, y:)` | `.offset` shifts visually but preserves the layout space — the element still occupies its original slot; this matches CSS `relative` semantics |
+| `position: absolute` + `top/left/width/height` | `ZStack` + `.position(x: left + width/2, y: top + height/2)` | **`.position()` takes CENTER coordinates, not top-left.** Compute: `cx = left + width/2`, `cy = top + height/2`. Must be inside a `ZStack` or the position is relative to the parent frame |
+| `position: fixed` | `.overlay(alignment:)` on the root view, or `.safeAreaInset(edge:)` | Fixed elements must be moved outside the scrollable content entirely; common for navbars and tab bars |
+| `position: sticky` | Manual: `onScrollGeometryChange` (iOS 18+) or `ScrollViewReader` + preference key | No built-in sticky modifier before iOS 18 |
+| `z-index: <n>` | `.zIndex(n)` | **Only affects sibling ordering within the same `ZStack`.** A `zIndex` on a view nested inside a VStack has no effect relative to views outside that VStack |
+| `inset: 0` (fill parent) | `.frame(maxWidth: .infinity, maxHeight: .infinity)` inside a ZStack | |
+| `transform: translate(x, y)` | `.offset(x:, y:)` | |
+| `transform: scale(n)` | `.scaleEffect(n)` | Scales visually; does not affect layout space |
+| `transform: rotate(deg)` | `.rotationEffect(.degrees(deg))` | |
+
+---
+
+## Box-model drift — the four sources of invisible divergence
+
+These are not missing mappings — they are cases where the CSS and SwiftUI
+constructs look equivalent but behave differently. Each one causes layout
+divergence that passes code review.
+
+### 1. Margin collapse
+**CSS:** Adjacent vertical margins collapse to `max(m1, m2)`.
+**SwiftUI:** `VStack(spacing:)` accumulates; two views each with `.padding(.bottom, 16)` produce 32 pt gap, not 16.
+**Fix:** Use `VStack(spacing: max(m1, m2))` and remove per-child bottom padding, or set `spacing: 0` and add padding only to one side of each separator pair.
+
+### 2. Border draws inside (not outside)
+**CSS default (`content-box`):** `border` expands the element's visible size outward. The content area stays at declared width.
+**SwiftUI `.border()`:** draws _inside_ the frame, equivalent to CSS `outline`. The frame size does not change.
+**Fix:** Add `.padding(borderWidth)` before `.border()` to match CSS border-box behavior, or use `.overlay(RoundedRectangle(...).stroke(...))` which also draws inside.
+
+### 3. No native percentage sizing
+**CSS:** `width: 50%` is resolved by the containing block.
+**SwiftUI:** No `%` sizing modifier exists.
+**Fix:** Use `GeometryReader` — but **only in `.background{}` or `.overlay{}`**, never as a layout container. `GeometryReader` is greedy (takes all proposed space); using it as a primary layout view breaks parent constraints.
+
+```swift
+// Correct pattern for percentage width:
+Color.clear
+    .frame(maxWidth: .infinity)
+    .overlay(
+        GeometryReader { geo in
+            Rectangle()
+                .frame(width: geo.size.width * 0.5)
+        }
+    )
+```
+
+### 4. `line-height` vs `.lineSpacing` differ
+**CSS `line-height: 1.5` on 16px font:** applies half-leading (equal space above and below each line). Total line height = 24 px; each side gets 4 px extra.
+**SwiftUI `.lineSpacing(n)`:** adds `n` points of space _below_ each line only (no leading above the first line).
+**Conversion formula:** `lineSpacing = (cssLineHeight_px − coreTextLineHeight_px)` — i.e., the extra space only, applied as below-line gap.
+**iOS 26+:** `.lineHeight(.exact: value)` sets exact line height matching CSS semantics. Use this when `--ios-floor >= 26`.
+
+---
+
+## When you MUST use the custom `Layout` protocol (iOS 16+)
+
+These CSS patterns have **no stock SwiftUI equivalent**. Attempting to approximate
+them with HStack/VStack produces incorrect layout. Use `Layout` protocol.
+
+| CSS pattern | Why stock views fail |
+|---|---|
+| `flex-wrap: wrap` | HStack never wraps; LazyHGrid/LazyVGrid are scroll containers, not inline wrapping layouts |
+| Non-uniform `flex-grow` ratios (e.g. `flex-grow: 2` on one child, `flex-grow: 1` on others) | `.frame(maxWidth: .infinity)` distributes equally; no per-child weight |
+| Non-uniform `fr` ratios (e.g. `1fr 2fr`) | `GridItem(.flexible())` is always equal weight |
+| Radial / circular layouts | No stock radial container exists |
+
+### Minimal correct FlowLayout sketch (iOS 16+)
+
+```swift
+struct FlowLayout: Layout {
+    var spacing: CGFloat = 8
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+        let maxWidth = proposal.width ?? .infinity
+        var x: CGFloat = 0
+        var y: CGFloat = 0
+        var rowHeight: CGFloat = 0
+
+        for view in subviews {
+            let size = view.sizeThatFits(.unspecified)
+            if x + size.width > maxWidth, x > 0 {
+                y += rowHeight + spacing
+                x = 0
+                rowHeight = 0
+            }
+            x += size.width + spacing
+            rowHeight = max(rowHeight, size.height)
+        }
+        return CGSize(width: maxWidth, height: y + rowHeight)
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+        let maxWidth = bounds.maxX
+        var x = bounds.minX
+        var y = bounds.minY
+        var rowHeight: CGFloat = 0
+
+        for view in subviews {
+            let size = view.sizeThatFits(.unspecified)
+            if x + size.width > maxWidth, x > bounds.minX {
+                y += rowHeight + spacing
+                x = bounds.minX
+                rowHeight = 0
+            }
+            view.place(at: CGPoint(x: x, y: y), proposal: ProposedViewSize(size))
+            x += size.width + spacing
+            rowHeight = max(rowHeight, size.height)
+        }
+    }
+}
+```
+
+This is a production-usable starting point. Add `alignment` and RTL support as
+needed. The `cache` type is `Void` (no measurement caching) — add a `Cache` type
+when subview measurement is expensive.
+
+---
+
+## Quick-reference: CSS visual properties → SwiftUI modifiers
+
+| CSS | SwiftUI | Note |
+|---|---|---|
+| `border-radius: N` | `.cornerRadius(N)` or `.clipShape(RoundedRectangle(cornerRadius: N))` | `.cornerRadius` is deprecated in iOS 17+ for `.clipShape` |
+| `box-shadow: x y blur spread color` | `.shadow(color:, radius:, x:, y:)` | No `spread` equivalent; `radius` ≈ CSS `blur / 2` |
+| `opacity: N` | `.opacity(N)` | |
+| `background-color` | `.background(Color.token)` | Use token, not hex |
+| `color` | `.foregroundStyle(Color.token)` | `.foregroundColor` deprecated iOS 17+ |
+| `font-size` / `font-weight` | `.font(DesignTokens.Typography.body)` | Use extracted token; never hardcode `Font.system(size: 16)` |
+| `letter-spacing: N` | `.kerning(N)` | Units: CSS `em`-based vs SwiftUI `pt`-based; convert |
+| `text-transform: uppercase` | `.textCase(.uppercase)` | |
+| `text-decoration: underline` | `.underline()` | |
+| `overflow: hidden` | `.clipped()` | |
+| `border: N solid color` | `.overlay(Rectangle().stroke(color, lineWidth: N))` | Draws inside frame |
+| `pointer-events: none` | `.allowsHitTesting(false)` | |
+| `cursor: pointer` | No equivalent; tap gesture implied by `Button` | |
+| `display: none` / `visibility: hidden` | `if condition { view }` or `.opacity(0)` | `if` removes from layout; `.opacity(0)` preserves layout space — choose by CSS analogue |