claudecode-omc 5.6.5 → 5.6.7

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

@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import ArticleCard from '../components/ArticleCard.jsx';
+import TagCloud from '../components/TagCloud.jsx';
+import TrendChart from '../components/TrendChart.jsx';
+import styles from './FeedScreen.module.css';
+
+const ALL_TAGS = [
+  'Technology',
+  'Design',
+  'Engineering',
+  'Swift',
+  'SwiftUI',
+  'Machine Learning',
+  'Web Performance',
+  'Accessibility',
+  'Open Source',
+  'Developer Experience',
+  'iOS 18',
+  'WWDC',
+];
+
+const TREND_DATA = [12, 19, 8, 24, 17, 31, 28, 35, 22, 40, 38, 45];
+
+export default function FeedScreen() {
+  const [articles, setArticles] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [selectedTag, setSelectedTag] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadFeed() {
+      setLoading(true);
+      setError(null);
+      try {
+        // Fetch from mock API endpoint (relative URL; real server returns JSON)
+        const res = await fetch('/api/articles');
+        if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        const data = await res.json();
+        if (!cancelled) setArticles(data.articles ?? []);
+      } catch (err) {
+        if (!cancelled) setError(err.message);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    loadFeed();
+    return () => { cancelled = true; };
+  }, []);
+
+  const filtered = selectedTag
+    ? articles.filter(a => a.tag === selectedTag)
+    : articles;
+
+  return (
+    <div className={styles.screen}>
+      {/* ── Hero header ───────────────────────────────────────── */}
+      <section className={styles.hero}>
+        <div className={styles.heroInner}>
+          <p className={styles.heroEyebrow}>Daily Edition — May 2026</p>
+          <h1 className={styles.heroTitle}>The Chronicle</h1>
+          <p className={styles.heroSubtitle}>
+            Thoughtful writing on technology, design, and the craft of building software.
+          </p>
+        </div>
+      </section>
+
+      <div className={styles.content}>
+        {/* ── Trend chart — TIER3 surface ───────────────────── */}
+        {/* TIER3: WebGL canvas chart via TrendChart component.
+            This component uses WebGLRenderingContext (GLSL shaders) for
+            GPU-accelerated sparkline rendering. It cannot be transpiled to
+            SwiftUI; must be replaced with Swift Charts LineChart or WKWebView.
+            See TrendChart.jsx for full TIER3 annotation. */}
+        <section className={styles.trendSection}>
+          <TrendChart
+            data={TREND_DATA}
+            label="Reader engagement — last 12 weeks"
+            color="var(--color-accent)"
+          />
+        </section>
+
+        {/* ── Tag filter ────────────────────────────────────── */}
+        <section className={styles.tagsSection}>
+          <h2 className={styles.sectionHeading}>Topics</h2>
+          {/* CUSTOM-LAYOUT: flex-wrap:wrap (see TagCloud.module.css) */}
+          <TagCloud
+            tags={ALL_TAGS}
+            selectedTag={selectedTag}
+            onTagClick={setSelectedTag}
+          />
+        </section>
+
+        {/* ── Articles grid ─────────────────────────────────── */}
+        <section className={styles.feedSection}>
+          <div className={styles.feedHeader}>
+            <h2 className={styles.sectionHeading}>
+              {selectedTag ? `#${selectedTag}` : 'Latest'}
+            </h2>
+            {selectedTag && (
+              <button
+                className={styles.clearFilter}
+                onClick={() => setSelectedTag(null)}
+              >
+                Clear filter
+              </button>
+            )}
+          </div>
+
+          {loading && (
+            <div className={styles.stateContainer}>
+              <div className={styles.spinner} aria-label="Loading articles" />
+              <p className={styles.stateText}>Loading articles…</p>
+            </div>
+          )}
+
+          {error && !loading && (
+            <div className={styles.stateContainer} role="alert">
+              <p className={styles.errorHeading}>Failed to load feed</p>
+              <p className={styles.stateText}>{error}</p>
+            </div>
+          )}
+
+          {!loading && !error && filtered.length === 0 && (
+            <div className={styles.stateContainer}>
+              <p className={styles.stateText}>
+                {selectedTag
+                  ? `No articles tagged "${selectedTag}" yet.`
+                  : 'No articles found.'}
+              </p>
+            </div>
+          )}
+
+          {!loading && !error && filtered.length > 0 && (
+            <div className={styles.grid}>
+              {filtered.map(article => (
+                <ArticleCard key={article.id} article={article} />
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,161 @@
+.screen {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Hero ─────────────────────────────────────────────────────── */
+.hero {
+  background: linear-gradient(
+    160deg,
+    var(--color-bg-primary) 0%,
+    var(--color-bg-secondary) 100%
+  );
+  border-bottom: 1px solid var(--color-border);
+  padding: var(--space-12) var(--space-6) var(--space-10);
+}
+
+.heroInner {
+  max-width: 680px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.heroEyebrow {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-accent);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.heroTitle {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-display);
+  font-weight: var(--font-weight-heavy);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-tight);
+  letter-spacing: -1.5px;
+}
+
+.heroSubtitle {
+  font-size: var(--font-size-body-lg);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+  max-width: 520px;
+}
+
+/* ── Content container ────────────────────────────────────────── */
+.content {
+  max-width: 1100px;
+  margin: 0 auto;
+  width: 100%;
+  padding: var(--space-8) var(--space-6) var(--space-12);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+/* ── Trend chart section ──────────────────────────────────────── */
+.trendSection {
+  padding: var(--space-5);
+  background-color: var(--color-bg-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  border: 1px solid var(--color-border);
+}
+
+/* ── Tags section ─────────────────────────────────────────────── */
+.tagsSection {
+  display: flex;
+  flex-direction: column;
+}
+
+.sectionHeading {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-headline);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  letter-spacing: -0.4px;
+}
+
+/* ── Feed section ─────────────────────────────────────────────── */
+.feedSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.feedHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.clearFilter {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-accent);
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-border);
+  transition: background-color var(--duration-fast) var(--easing-default);
+}
+
+.clearFilter:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+/* ── Article grid ─────────────────────────────────────────────── */
+/*
+ * Responsive masonry-ish grid with auto-fill columns.
+ * grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) creates a
+ * flexible grid where column count adapts to viewport width and column widths
+ * are non-uniform when items don't fill the row exactly.
+ *
+ * This maps to LazyVGrid with GridItem(.adaptive(minimum: 320)) in SwiftUI —
+ * which is the closest approximation. However if the design requires
+ * exact column-span or row-span overrides, a custom Layout is needed.
+ */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: var(--space-5);
+  align-items: start;
+}
+
+/* ── Loading / error / empty states ──────────────────────────── */
+.stateContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-12) var(--space-6);
+}
+
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-accent);
+  border-radius: var(--radius-full);
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.stateText {
+  font-size: var(--font-size-body);
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
+.errorHeading {
+  font-size: var(--font-size-headline);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-danger);
+}

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

@@ -0,0 +1,50 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-primary);
+  line-height: var(--line-height-normal);
+  min-height: 100dvh;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+}
+
+a {
+  color: var(--color-text-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+}

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