claudecode-omc 5.6.6 → 5.6.7

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

@@ -0,0 +1,103 @@
+/* Design tokens — harvested by extract-tokens.mjs */
+
+:root {
+  /* ── Color: Light theme ─────────────────────────────────────── */
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f5f5f7;
+  --color-bg-card: #ffffff;
+  --color-bg-tag: #e8f0fe;
+
+  --color-text-primary: #1d1d1f;
+  --color-text-secondary: #6e6e73;
+  --color-text-caption: #9a9a9f;
+  --color-text-accent: #0071e3;
+  --color-text-on-accent: #ffffff;
+
+  --color-border: #d2d2d7;
+  --color-divider: #e5e5ea;
+
+  --color-accent: #0071e3;
+  --color-accent-hover: #0077ed;
+  --color-danger: #ff3b30;
+  --color-success: #34c759;
+  --color-warning: #ff9f0a;
+
+  /* ── Typography ─────────────────────────────────────────────── */
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
+  --font-family-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
+  --font-family-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+
+  --font-size-xs: 11px;
+  --font-size-sm: 13px;
+  --font-size-body: 16px;
+  --font-size-body-lg: 17px;
+  --font-size-subhead: 19px;
+  --font-size-headline: 22px;
+  --font-size-title: 28px;
+  --font-size-display: 40px;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-heavy: 800;
+
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* ── Spacing ─────────────────────────────────────────────────── */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+
+  /* ── Radius ──────────────────────────────────────────────────── */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-full: 9999px;
+
+  /* ── Shadow ──────────────────────────────────────────────────── */
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
+  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* ── Transitions ─────────────────────────────────────────────── */
+  --duration-fast: 120ms;
+  --duration-normal: 220ms;
+  --duration-slow: 400ms;
+  --easing-default: cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+/* ── Dark theme ───────────────────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg-primary: #000000;
+    --color-bg-secondary: #1c1c1e;
+    --color-bg-card: #1c1c1e;
+    --color-bg-tag: #1a2744;
+
+    --color-text-primary: #f5f5f7;
+    --color-text-secondary: #aeaeb2;
+    --color-text-caption: #636366;
+    --color-text-accent: #2997ff;
+    --color-text-on-accent: #ffffff;
+
+    --color-border: #38383a;
+    --color-divider: #2c2c2e;
+
+    --color-accent: #2997ff;
+    --color-accent-hover: #409cff;
+    --color-danger: #ff453a;
+    --color-success: #32d74b;
+    --color-warning: #ffd60a;
+
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
+    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4);
+  }
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-react/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/.local/skills/h5-to-swiftui/assets/sample-h5-vanilla/data/tasks.js

@@ -0,0 +1,67 @@
+/* ── Task data store ─────────────────────────────────────────────────────── *
+ * In-file JS array — no network fetch required.
+ * Stage 6 behavioral-parity will port this to a Swift @State array.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+window.TASKS = [
+  {
+    id: 1,
+    title: 'Design system tokens',
+    description: 'Define all color, spacing, and typography tokens as CSS custom properties so they can be extracted by automated tooling and mapped to SwiftUI theme values.',
+    category: 'Design',
+    priority: 'high',
+    done: false,
+    dueDate: '2026-05-22',
+    progress: [40, 55, 60, 72, 85, 90, 88, 95],
+  },
+  {
+    id: 2,
+    title: 'Implement hash router',
+    description: 'Build a minimal client-side router using the hashchange event. Supports three routes: home, list, and detail. No library dependencies.',
+    category: 'Engineering',
+    priority: 'high',
+    done: false,
+    dueDate: '2026-05-23',
+    progress: [10, 25, 45, 68, 80, 90, 95, 100],
+  },
+  {
+    id: 3,
+    title: 'Write unit tests for router',
+    description: 'Cover route matching, missing routes, and the detail screen id extraction from the URL hash fragment.',
+    category: 'QA',
+    priority: 'medium',
+    done: true,
+    dueDate: '2026-05-20',
+    progress: [20, 40, 60, 80, 100, 100, 100, 100],
+  },
+  {
+    id: 4,
+    title: 'Canvas sparkline Tier-3 spike',
+    description: 'Prototype the canvas-based sparkline widget on the detail screen. This surface is explicitly Tier-3 (high risk) and will require human review before SwiftUI porting.',
+    category: 'Research',
+    priority: 'medium',
+    done: false,
+    dueDate: '2026-05-28',
+    progress: [5, 10, 15, 20, 30, 35, 42, 50],
+  },
+  {
+    id: 5,
+    title: 'Accessibility audit',
+    description: 'Check all screens for WCAG 2.2 AA compliance: color contrast ratios, focus management, ARIA labels, and keyboard navigation.',
+    category: 'Accessibility',
+    priority: 'low',
+    done: false,
+    dueDate: '2026-06-01',
+    progress: [0, 0, 5, 5, 10, 15, 20, 28],
+  },
+  {
+    id: 6,
+    title: 'Dark mode tokens',
+    description: 'Add @media (prefers-color-scheme: dark) overrides for every CSS custom property in tokens.css.',
+    category: 'Design',
+    priority: 'low',
+    done: true,
+    dueDate: '2026-05-19',
+    progress: [30, 55, 70, 85, 90, 95, 98, 100],
+  },
+];

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

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>TaskFlow</title>
+  <link rel="stylesheet" href="styles/tokens.css" />
+  <link rel="stylesheet" href="styles/app.css" />
+</head>
+<body>
+  <!-- Root shell — screens are injected here by router.js -->
+  <div id="app">
+    <nav id="nav-bar">
+      <a href="#/home" class="nav-link" data-route="home">Home</a>
+      <a href="#/list" class="nav-link" data-route="list">Tasks</a>
+    </nav>
+    <main id="screen-root"></main>
+  </div>
+
+  <script src="data/tasks.js"></script>
+  <script src="screens/home.js"></script>
+  <script src="screens/list.js"></script>
+  <script src="screens/detail.js"></script>
+  <script src="router.js"></script>
+</body>
+</html>

package/.local/skills/h5-to-swiftui/assets/sample-h5-vanilla/router.js

@@ -0,0 +1,73 @@
+/* ── Client-side hash router ─────────────────────────────────────────────── *
+ * Routes:
+ *   #/home           → HomeScreen
+ *   #/list           → ListScreen
+ *   #/detail?id=<N>  → DetailScreen
+ *
+ * Plain DOM addEventListener — no library, no framework.
+ * Stage 1 will inventory these routes for NavigationStack mapping.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+(function () {
+  'use strict';
+
+  /** @type {HTMLElement} */
+  const screenRoot = document.getElementById('screen-root');
+
+  // Route table: path prefix → screen factory function
+  const routes = {
+    '/home':   renderHome,
+    '/list':   renderList,
+    '/detail': renderDetail,
+  };
+
+  /**
+   * Parse the current window.location.hash into { path, params }.
+   * Hash format: #/path?key=value&key2=value2
+   */
+  function parseHash() {
+    const raw = window.location.hash.replace(/^#/, '') || '/home';
+    const [path, qs] = raw.split('?');
+    const params = {};
+    if (qs) {
+      qs.split('&').forEach(pair => {
+        const [k, v] = pair.split('=');
+        if (k) params[decodeURIComponent(k)] = decodeURIComponent(v ?? '');
+      });
+    }
+    return { path: path || '/home', params };
+  }
+
+  /** Update nav link active state */
+  function syncNav(path) {
+    document.querySelectorAll('.nav-link').forEach(link => {
+      const route = link.dataset.route;
+      const active = path.startsWith('/' + route);
+      link.classList.toggle('active', active);
+    });
+  }
+
+  /** Dispatch to the correct screen factory */
+  function navigate() {
+    const { path, params } = parseHash();
+    syncNav(path);
+
+    // Find the matching route (longest prefix wins)
+    const match = Object.keys(routes).find(r => path === r || path.startsWith(r));
+    const factory = match ? routes[match] : null;
+
+    if (!factory) {
+      screenRoot.innerHTML = `<div class="empty-state"><p>404 — route not found: <code>${path}</code></p></div>`;
+      return;
+    }
+
+    // Clear previous content, then render
+    screenRoot.innerHTML = '';
+    const node = factory(params);
+    if (node) screenRoot.appendChild(node);
+  }
+
+  // Trigger on hash change and on first load
+  window.addEventListener('hashchange', navigate);
+  window.addEventListener('DOMContentLoaded', navigate);
+}());

package/.local/skills/h5-to-swiftui/assets/sample-h5-vanilla/screens/detail.js

@@ -0,0 +1,164 @@
+/* ── Detail screen ───────────────────────────────────────────────────────── *
+ * Route: #/detail?id=<N>
+ * Shows: task card with image placeholder, metadata chips, description,
+ *        and a canvas-based progress sparkline (Tier-3 surface).
+ *
+ * The sparkline uses <canvas> with plain 2D context drawing.
+ * Stage 1 route inventory will capture this screen.
+ * Stage 3 NavigationStack will map it as a pushed detail view.
+ * Stage risk-triage.json will flag the canvas section as Tier-3.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+/* global TASKS */
+
+function renderDetail(params) {
+  'use strict';
+
+  const id   = parseInt(params.id, 10);
+  const task = TASKS.find(t => t.id === id);
+
+  const screen = document.createElement('section');
+  screen.className = 'screen';
+  screen.setAttribute('aria-label', 'Task detail');
+
+  if (!task) {
+    screen.innerHTML = `
+      <a href="#/list" class="detail-back">← Back to list</a>
+      <div class="empty-state">
+        <p>Task #${id} not found.</p>
+        <a href="#/list" class="btn btn-secondary">Go to list</a>
+      </div>
+    `;
+    return screen;
+  }
+
+  // ── Static markup for Tier-1 surfaces ──
+  screen.innerHTML = `
+    <a href="#/list" class="detail-back">← Back to list</a>
+
+    <article class="detail-card">
+      <!-- Image placeholder — maps to AsyncImage in SwiftUI -->
+      <div class="detail-image-placeholder" aria-label="Task cover image placeholder">
+        Cover image
+      </div>
+
+      <div class="detail-body">
+        <h1 class="detail-title">${task.title}</h1>
+
+        <div class="detail-meta-row">
+          <span class="detail-chip">${task.category}</span>
+          <span class="detail-chip priority-chip" data-priority="${task.priority}">${task.priority} priority</span>
+          <span class="detail-chip">${task.done ? '✓ Done' : 'Pending'}</span>
+          <span class="detail-chip">Due ${task.dueDate}</span>
+        </div>
+
+        <p class="detail-desc">${task.description}</p>
+      </div>
+    </article>
+
+    <!-- TIER3: canvas custom drawing -->
+    <div class="sparkline-section">
+      <h3>Progress history (last 8 entries)</h3>
+      <canvas id="sparkline-canvas"
+              width="600"
+              height="80"
+              aria-label="Progress sparkline chart"
+              role="img">
+        Progress values: ${task.progress.join(', ')}
+      </canvas>
+    </div>
+
+    <div style="display:flex; gap:var(--space-3); flex-wrap:wrap;">
+      <a href="#/list" class="btn btn-secondary">← All tasks</a>
+      <a href="#/home" class="btn btn-secondary">Home</a>
+    </div>
+  `;
+
+  // ── Canvas sparkline — Tier-3 surface ─────────────────────────────────────
+  // This tiny canvas draw is the explicit Tier-3 region.
+  // risk-triage.json should flag #sparkline-canvas as requiring human review
+  // before any SwiftUI port attempt (Charts.framework vs custom Path).
+  // <!-- TIER3: canvas custom drawing -->
+  drawSparkline(screen.querySelector('#sparkline-canvas'), task.progress);
+
+  return screen;
+}
+
+/**
+ * Draw a minimal line sparkline onto the given canvas element.
+ * Uses only the 2D canvas API — no library.
+ *
+ * @param {HTMLCanvasElement} canvas
+ * @param {number[]} values  Array of progress percentages (0–100)
+ */
+function drawSparkline(canvas, values) {
+  'use strict';
+
+  if (!canvas || !canvas.getContext) return;
+
+  const ctx    = canvas.getContext('2d');
+  const dpr    = window.devicePixelRatio || 1;
+  const w      = canvas.clientWidth  || 600;
+  const h      = canvas.clientHeight || 80;
+
+  // Resize for device pixel ratio
+  canvas.width  = w * dpr;
+  canvas.height = h * dpr;
+  ctx.scale(dpr, dpr);
+
+  const pad    = 12;
+  const min    = 0;
+  const max    = 100;
+  const rangeX = w - pad * 2;
+  const rangeY = h - pad * 2;
+
+  // Map a value to canvas coordinates
+  function xAt(i) { return pad + (i / (values.length - 1)) * rangeX; }
+  function yAt(v) { return pad + (1 - (v - min) / (max - min)) * rangeY; }
+
+  // Detect dark mode for color
+  const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const lineColor = dark ? '#0a84ff' : '#007aff';
+  const fillFrom  = dark ? 'rgba(10,132,255,0.25)' : 'rgba(0,122,255,0.12)';
+  const dotColor  = dark ? '#ffffff' : '#007aff';
+
+  // Area fill
+  ctx.beginPath();
+  ctx.moveTo(xAt(0), yAt(values[0]));
+  for (let i = 1; i < values.length; i++) {
+    ctx.lineTo(xAt(i), yAt(values[i]));
+  }
+  ctx.lineTo(xAt(values.length - 1), h - pad);
+  ctx.lineTo(xAt(0), h - pad);
+  ctx.closePath();
+  ctx.fillStyle = fillFrom;
+  ctx.fill();
+
+  // Line stroke
+  ctx.beginPath();
+  ctx.moveTo(xAt(0), yAt(values[0]));
+  for (let i = 1; i < values.length; i++) {
+    ctx.lineTo(xAt(i), yAt(values[i]));
+  }
+  ctx.strokeStyle = lineColor;
+  ctx.lineWidth   = 2;
+  ctx.lineJoin    = 'round';
+  ctx.stroke();
+
+  // Data point dots
+  ctx.fillStyle = dotColor;
+  values.forEach((v, i) => {
+    ctx.beginPath();
+    ctx.arc(xAt(i), yAt(v), 3, 0, Math.PI * 2);
+    ctx.fill();
+  });
+
+  // Last value label
+  const lastX = xAt(values.length - 1);
+  const lastY = yAt(values[values.length - 1]);
+  ctx.fillStyle   = lineColor;
+  ctx.font        = `bold ${11 * dpr / dpr}px -apple-system, sans-serif`;
+  ctx.textAlign   = 'right';
+  ctx.textBaseline = 'bottom';
+  ctx.fillText(`${values[values.length - 1]}%`, lastX - 4, lastY - 4);
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-vanilla/screens/home.js

@@ -0,0 +1,53 @@
+/* ── Home screen ─────────────────────────────────────────────────────────── *
+ * Route: #/home
+ * Shows: hero text, summary stats derived from TASKS, two CTA buttons.
+ * Tier-1 surface: text, buttons, stat cards, flex layout.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+/* global TASKS */
+
+function renderHome(/* params */) {
+  'use strict';
+
+  const total    = TASKS.length;
+  const done     = TASKS.filter(t => t.done).length;
+  const pending  = total - done;
+  const highPri  = TASKS.filter(t => t.priority === 'high' && !t.done).length;
+
+  const screen = document.createElement('section');
+  screen.className = 'screen';
+  screen.setAttribute('aria-label', 'Home');
+
+  screen.innerHTML = `
+    <div class="home-hero">
+      <h1>TaskFlow</h1>
+      <p>A simple task manager — open <code>index.html</code> directly, no build required.</p>
+    </div>
+
+    <div class="home-stats" role="list" aria-label="Summary stats">
+      <div class="stat-card" role="listitem">
+        <span class="stat-value">${total}</span>
+        <span class="stat-label">Total</span>
+      </div>
+      <div class="stat-card" role="listitem">
+        <span class="stat-value">${pending}</span>
+        <span class="stat-label">Pending</span>
+      </div>
+      <div class="stat-card" role="listitem">
+        <span class="stat-value">${done}</span>
+        <span class="stat-label">Done</span>
+      </div>
+      <div class="stat-card" role="listitem">
+        <span class="stat-value">${highPri}</span>
+        <span class="stat-label">High priority</span>
+      </div>
+    </div>
+
+    <div class="home-cta">
+      <a href="#/list" class="btn btn-primary">View Tasks</a>
+      <a href="#/detail?id=1" class="btn btn-secondary">Sample Detail</a>
+    </div>
+  `;
+
+  return screen;
+}

package/.local/skills/h5-to-swiftui/assets/sample-h5-vanilla/screens/list.js

@@ -0,0 +1,87 @@
+/* ── List screen ─────────────────────────────────────────────────────────── *
+ * Route: #/list
+ * Shows: filterable task list loaded from window.TASKS (in-file JS array).
+ * Tier-1 surface: list rows, badges, flex layout, text.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+/* global TASKS */
+
+function renderList(/* params */) {
+  'use strict';
+
+  const screen = document.createElement('section');
+  screen.className = 'screen';
+  screen.setAttribute('aria-label', 'Task list');
+
+  // ── State ──
+  let filter = 'all'; // 'all' | 'pending' | 'done'
+
+  function filteredTasks() {
+    if (filter === 'pending') return TASKS.filter(t => !t.done);
+    if (filter === 'done')    return TASKS.filter(t => t.done);
+    return TASKS;
+  }
+
+  // ── Render task rows ──
+  function buildTaskList() {
+    const tasks = filteredTasks();
+
+    if (tasks.length === 0) {
+      return `<div class="empty-state"><p>No tasks in this filter.</p></div>`;
+    }
+
+    const rows = tasks.map(task => `
+      <li class="task-row ${task.done ? 'task-done' : ''}"
+          data-id="${task.id}"
+          role="button"
+          tabindex="0"
+          aria-label="${task.title}, ${task.priority} priority, ${task.done ? 'done' : 'pending'}">
+        <span class="task-dot priority-${task.priority}" aria-hidden="true"></span>
+        <div class="task-info">
+          <span class="task-title">${task.title}</span>
+          <span class="task-meta">${task.category} · Due ${task.dueDate}</span>
+        </div>
+        <span class="task-badge">${task.priority}</span>
+      </li>
+    `).join('');
+
+    return `<ul class="task-list" aria-label="Tasks">${rows}</ul>`;
+  }
+
+  // ── Full render ──
+  function render() {
+    screen.innerHTML = `
+      <div class="list-header">
+        <h2>Tasks</h2>
+        <div style="display:flex; gap:var(--space-2)">
+          <button class="btn btn-secondary ${filter === 'all'     ? 'active' : ''}" data-filter="all">All</button>
+          <button class="btn btn-secondary ${filter === 'pending' ? 'active' : ''}" data-filter="pending">Pending</button>
+          <button class="btn btn-secondary ${filter === 'done'    ? 'active' : ''}" data-filter="done">Done</button>
+        </div>
+      </div>
+      ${buildTaskList()}
+    `;
+
+    // Bind filter buttons
+    screen.querySelectorAll('[data-filter]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        filter = btn.dataset.filter;
+        render();
+      });
+    });
+
+    // Bind task rows → navigate to detail
+    screen.querySelectorAll('.task-row').forEach(row => {
+      function goDetail() {
+        window.location.hash = `#/detail?id=${row.dataset.id}`;
+      }
+      row.addEventListener('click', goDetail);
+      row.addEventListener('keydown', e => {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); goDetail(); }
+      });
+    });
+  }
+
+  render();
+  return screen;
+}