claudecode-omc 5.6.6 → 5.6.8

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

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