claudecode-omc 5.6.6 → 5.6.7

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

@@ -0,0 +1,294 @@
+.article {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-6) var(--space-12);
+}
+
+/* ── Top bar ──────────────────────────────────────────────────── */
+.topBar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-8);
+}
+
+.backButton {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-accent);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-border);
+  transition: background-color var(--duration-fast) var(--easing-default);
+}
+
+.backButton:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+.tagChip {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  padding: var(--space-1) var(--space-3);
+  background-color: var(--color-bg-tag);
+  border-radius: var(--radius-full);
+}
+
+/* ── Header ───────────────────────────────────────────────────── */
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  margin-bottom: var(--space-10);
+  padding-bottom: var(--space-8);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.title {
+  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;
+}
+
+.subtitle {
+  font-size: var(--font-size-subhead);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+}
+
+.byline {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.avatarLg {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-accent);
+  color: var(--color-text-on-accent);
+  font-size: var(--font-size-body-lg);
+  font-weight: var(--font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.bylineText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.authorName {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.authorMeta {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-caption);
+}
+
+/* ── Body ─────────────────────────────────────────────────────── */
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+/* Paragraph — main body text */
+.paragraph {
+  font-size: var(--font-size-body-lg);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-relaxed);
+}
+
+/* Section heading */
+.heading2 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-tight);
+  letter-spacing: -0.8px;
+  margin-top: var(--space-4);
+}
+
+/* Sub-section heading */
+.heading3 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-headline);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-tight);
+  letter-spacing: -0.4px;
+  margin-top: var(--space-2);
+}
+
+/* Pull-quote */
+.pullquote {
+  border-left: 3px solid var(--color-accent);
+  padding: var(--space-4) var(--space-6);
+  background-color: var(--color-bg-secondary);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.pullquoteText {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-subhead);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-relaxed);
+  font-style: italic;
+}
+
+.pullquoteAttribution {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  font-style: normal;
+}
+
+/* Code block */
+.codeFigure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.codeCaption {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.pre {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-5);
+  overflow-x: auto;
+}
+
+.code {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-relaxed);
+  white-space: pre;
+}
+
+/* Caption / footnote */
+.caption {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-caption);
+  line-height: var(--line-height-normal);
+  text-align: center;
+}
+
+/* Divider */
+.divider {
+  border: none;
+  border-top: 1px solid var(--color-divider);
+  margin: var(--space-2) 0;
+}
+
+/* ── Footer / author card ─────────────────────────────────────── */
+.footer {
+  margin-top: var(--space-12);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.footerDivider {
+  height: 1px;
+  background-color: var(--color-divider);
+}
+
+.authorCard {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-4);
+  align-items: flex-start;
+  padding: var(--space-5);
+  background-color: var(--color-bg-secondary);
+  border-radius: var(--radius-lg);
+}
+
+.authorCardText {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.authorCardName {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.authorCardRole {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.authorBio {
+  font-size: var(--font-size-body);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+  margin-top: var(--space-2);
+}
+
+/* ── Loading / error 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/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;
+}