claudecode-omc 5.6.6 → 5.6.7

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

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

@@ -0,0 +1,159 @@
+import React, { useRef, useEffect } from 'react';
+import styles from './TrendChart.module.css';
+
+/**
+ * TrendChart — WebGL sparkline chart rendered on a <canvas> element.
+ *
+ * {/* TIER3: WebGL canvas — uses WebGLRenderingContext to draw a sparkline.
+ *    The rendering pipeline is entirely GPU-driven via custom GLSL shaders.
+ *    There is NO SwiftUI equivalent for arbitrary WebGL content.
+ *    SwiftUI port options:
+ *      (a) Replace with a native Swift Charts (iOS 16+) line mark — preferred
+ *          if data semantics are equivalent.
+ *      (b) Wrap in WKWebView if exact visual must be preserved (accepts
+ *          partial fidelity loss: no ProMotion, extra process, no Dynamic Type).
+ *    Risk triage MUST flag this surface and NOT silently generate wrong code.
+ * */
+export default function TrendChart({ data, label, color = '#0071e3' }) {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    // Attempt WebGL; fall back to 2D canvas if unavailable (e.g. jsdom in tests)
+    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+
+    if (!gl) {
+      // Graceful 2D fallback (no WebGL in test env)
+      const ctx = canvas.getContext('2d');
+      if (!ctx || !data?.length) return;
+      drawFallback2D(ctx, canvas, data, color);
+      return;
+    }
+
+    // WebGL sparkline — minimal shader pair
+    const vsSource = `
+      attribute vec2 a_position;
+      uniform vec2 u_resolution;
+      void main() {
+        vec2 clip = (a_position / u_resolution) * 2.0 - 1.0;
+        gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+      }
+    `;
+
+    const fsSource = `
+      precision mediump float;
+      uniform vec4 u_color;
+      void main() {
+        gl_FragColor = u_color;
+      }
+    `;
+
+    const vs = compileShader(gl, gl.VERTEX_SHADER, vsSource);
+    const fs = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
+    if (!vs || !fs) return;
+
+    const program = gl.createProgram();
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
+
+    gl.useProgram(program);
+
+    // Map data to canvas coordinates
+    const w = canvas.width;
+    const h = canvas.height;
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const pad = 8;
+
+    const vertices = new Float32Array(data.length * 2);
+    data.forEach((v, i) => {
+      vertices[i * 2] = pad + (i / (data.length - 1)) * (w - pad * 2);
+      vertices[i * 2 + 1] = h - pad - ((v - min) / range) * (h - pad * 2);
+    });
+
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+    const posLoc = gl.getAttribLocation(program, 'a_position');
+    gl.enableVertexAttribArray(posLoc);
+    gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+
+    const resLoc = gl.getUniformLocation(program, 'u_resolution');
+    gl.uniform2f(resLoc, w, h);
+
+    const colLoc = gl.getUniformLocation(program, 'u_color');
+    const [r, g, b] = hexToRgb(color);
+    gl.uniform4f(colLoc, r, g, b, 1.0);
+
+    gl.viewport(0, 0, w, h);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.lineWidth(2);
+    gl.drawArrays(gl.LINE_STRIP, 0, data.length);
+
+    return () => {
+      gl.deleteProgram(program);
+      gl.deleteBuffer(buf);
+    };
+  }, [data, color]);
+
+  return (
+    <div className={styles.chartWrapper}>
+      {label && <span className={styles.chartLabel}>{label}</span>}
+      <canvas
+        ref={canvasRef}
+        width={280}
+        height={80}
+        className={styles.canvas}
+        aria-label={`Trend chart: ${label}`}
+        role="img"
+      />
+    </div>
+  );
+}
+
+// ── helpers ──────────────────────────────────────────────────────────────────
+
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? [parseInt(result[1], 16) / 255, parseInt(result[2], 16) / 255, parseInt(result[3], 16) / 255]
+    : [0, 0.44, 0.89];
+}
+
+function drawFallback2D(ctx, canvas, data, color) {
+  const w = canvas.width;
+  const h = canvas.height;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const pad = 8;
+
+  ctx.clearRect(0, 0, w, h);
+  ctx.beginPath();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  data.forEach((v, i) => {
+    const x = pad + (i / (data.length - 1)) * (w - pad * 2);
+    const y = h - pad - ((v - min) / range) * (h - pad * 2);
+    i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+  });
+  ctx.stroke();
+}

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

@@ -0,0 +1,21 @@
+.chartWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.chartLabel {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.canvas {
+  display: block;
+  border-radius: var(--radius-sm);
+  background-color: var(--color-bg-secondary);
+  width: 100%;
+  height: 80px;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

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

@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import styles from './ArticleScreen.module.css';
+
+export default function ArticleScreen() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [article, setArticle] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadArticle() {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await fetch(`/api/articles/${id}`);
+        if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        const data = await res.json();
+        if (!cancelled) setArticle(data);
+      } catch (err) {
+        if (!cancelled) setError(err.message);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    loadArticle();
+    return () => { cancelled = true; };
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className={styles.stateContainer}>
+        <div className={styles.spinner} aria-label="Loading article" />
+        <p className={styles.stateText}>Loading article…</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.stateContainer} role="alert">
+        <p className={styles.errorHeading}>Could not load article</p>
+        <p className={styles.stateText}>{error}</p>
+        <button className={styles.backButton} onClick={() => navigate('/')}>
+          ← Back to feed
+        </button>
+      </div>
+    );
+  }
+
+  if (!article) return null;
+
+  const {
+    title,
+    subtitle,
+    author,
+    publishedAt,
+    readingTime,
+    tag,
+    body,
+  } = article;
+
+  const formattedDate = new Date(publishedAt).toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+  return (
+    <article className={styles.article}>
+      {/* ── Back navigation ───────────────────────────────────── */}
+      <div className={styles.topBar}>
+        <button className={styles.backButton} onClick={() => navigate('/')}>
+          ← Chronicle
+        </button>
+        <span className={styles.tagChip}>{tag}</span>
+      </div>
+
+      {/* ── Article header ────────────────────────────────────── */}
+      <header className={styles.header}>
+        <h1 className={styles.title}>{title}</h1>
+        {subtitle && (
+          <p className={styles.subtitle}>{subtitle}</p>
+        )}
+
+        <div className={styles.byline}>
+          <div className={styles.avatarLg} aria-hidden="true">
+            {author.name.slice(0, 1)}
+          </div>
+          <div className={styles.bylineText}>
+            <span className={styles.authorName}>{author.name}</span>
+            <span className={styles.authorMeta}>
+              {author.role} · <time dateTime={publishedAt}>{formattedDate}</time> · {readingTime} min read
+            </span>
+          </div>
+        </div>
+      </header>
+
+      {/* ── Body — text-heavy, multi-typographic-level region ─── */}
+      {/*
+       * TEXT REGION NOTE (skill stage 2):
+       * This body region is intentionally text-heavy with multiple typographic
+       * levels (h2 headlines, pull-quote, body paragraphs, code block, caption).
+       * The skill must apply layout-box IoU + token-color ΔE for region
+       * comparison, NOT glyph SSIM, because CoreText metrics diverge from
+       * WebKit at identical px declarations (see stack-detection.md reason 4).
+       */}
+      <div className={styles.body}>
+        {body.map((block, idx) => (
+          <ArticleBlock key={idx} block={block} />
+        ))}
+      </div>
+
+      {/* ── Article footer ────────────────────────────────────── */}
+      <footer className={styles.footer}>
+        <div className={styles.footerDivider} />
+        <div className={styles.authorCard}>
+          <div className={styles.avatarLg} aria-hidden="true">
+            {author.name.slice(0, 1)}
+          </div>
+          <div className={styles.authorCardText}>
+            <span className={styles.authorCardName}>{author.name}</span>
+            <span className={styles.authorCardRole}>{author.role}</span>
+            {author.bio && (
+              <p className={styles.authorBio}>{author.bio}</p>
+            )}
+          </div>
+        </div>
+      </footer>
+    </article>
+  );
+}
+
+// ── Block renderer ────────────────────────────────────────────────────────────
+
+function ArticleBlock({ block }) {
+  switch (block.type) {
+    case 'paragraph':
+      return <p className={styles.paragraph}>{block.text}</p>;
+
+    case 'heading':
+      return <h2 className={styles.heading2}>{block.text}</h2>;
+
+    case 'subheading':
+      return <h3 className={styles.heading3}>{block.text}</h3>;
+
+    case 'pullquote':
+      return (
+        <blockquote className={styles.pullquote}>
+          <p className={styles.pullquoteText}>{block.text}</p>
+          {block.attribution && (
+            <cite className={styles.pullquoteAttribution}>{block.attribution}</cite>
+          )}
+        </blockquote>
+      );
+
+    case 'code':
+      return (
+        <figure className={styles.codeFigure}>
+          {block.caption && (
+            <figcaption className={styles.codeCaption}>{block.caption}</figcaption>
+          )}
+          <pre className={styles.pre}>
+            <code className={styles.code}>{block.text}</code>
+          </pre>
+        </figure>
+      );
+
+    case 'caption':
+      return <p className={styles.caption}>{block.text}</p>;
+
+    case 'divider':
+      return <hr className={styles.divider} />;
+
+    default:
+      return null;
+  }
+}