Publish design-system recovery: simic-design export recovered, corrected, Namespec 2.0

.claude/skills/simic-design/_adherence.oxlintrc.json

@@ -121,7 +121,6 @@
       "--amber-400",
       "--amber-700",
       "--color-accent",
-      "--color-accent-quiet",
       "--color-bg",
       "--color-bg-code",
       "--color-bg-note",
@@ -189,7 +188,6 @@
       "--color-border": "color",
       "--color-border-firm": "color",
       "--color-accent": "color",
-      "--color-accent-quiet": "color",
       "--color-warn": "color",
       "--color-link": "color",
       "--color-link-hover": "color",

.claude/skills/simic-design/components/content/CanonQuote.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Blockquote. canon=true (default) gives the accent spine used for canonical design-doc quotes; false is the neutral quote.
+ */
+export interface CanonQuoteProps {
+  canon?: boolean;
+  /** Attribution line, usually a mono file path + section */
+  cite?: React.ReactNode;
+  children: React.ReactNode;
+}
+export declare function CanonQuote(props: CanonQuoteProps): JSX.Element;

.claude/skills/simic-design/components/content/CanonQuote.jsx

@@ -0,0 +1,8 @@
+export function CanonQuote({ canon = true, cite, children }) {
+  return (
+    <blockquote style={{margin:"1.5rem 0",padding:"0.25rem 0 0.25rem 1.5rem",borderLeft:`3px solid ${canon?"var(--color-accent)":"var(--color-border-firm)"}`,color:"var(--color-text)",fontSize:canon?"1.03rem":"1rem"}}>
+      {children}
+      {cite && <cite style={{display:"block",marginTop:"0.5rem",fontSize:"0.85rem",fontStyle:"normal",color:"var(--color-text-muted)"}}>{cite}</cite>}
+    </blockquote>
+  );
+}

.claude/skills/simic-design/components/content/CanonQuote.prompt.md

@@ -0,0 +1,5 @@
+Quote block — canon (accent spine) or neutral. Cite is usually a repo path.
+
+```jsx
+<CanonQuote cite={<>The canonical sentence — <code>docs/design/02-constitution.md</code> §5.3</>}><p>Under Leyline, Ugin plans…</p></CanonQuote>
+```

.claude/skills/simic-design/components/content/Note.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Callout with a 3px left spine and mono uppercase label. Teal note by default; status=true switches to the amber warning treatment.
+ */
+export interface NoteProps {
+  /** Mono uppercase label, e.g. "Project status" */
+  label?: string;
+  /** Amber status variant */
+  status?: boolean;
+  children: React.ReactNode;
+}
+export declare function Note(props: NoteProps): JSX.Element;

.claude/skills/simic-design/components/content/Note.jsx

@@ -0,0 +1,9 @@
+export function Note({ label, status = false, children }) {
+  const spine = status ? "var(--color-warn)" : "var(--color-accent)";
+  return (
+    <div style={{maxWidth:"var(--measure)",margin:"1.5rem 0",padding:"1rem 1.5rem",background:status?"var(--color-bg-note-status)":"var(--color-bg-note)",border:"1px solid var(--color-border)",borderLeft:`3px solid ${spine}`,borderRadius:"var(--radius)"}}>
+      {label && <span style={{display:"block",fontFamily:"var(--font-code)",fontSize:"0.78rem",letterSpacing:"0.08em",textTransform:"uppercase",color:spine,marginBottom:"0.25rem"}}>{label}</span>}
+      <div style={{margin:0}}>{children}</div>
+    </div>
+  );
+}

.claude/skills/simic-design/components/content/Note.prompt.md

@@ -0,0 +1,5 @@
+Callout note — teal spine for notes, amber `status` variant for project-status warnings.
+
+```jsx
+<Note label="Project status" status><p><strong>Pre-implementation bootstrap.</strong> …</p></Note>
+```

.claude/skills/simic-design/components/content/PageHead.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Page header block: optional breadcrumb, h1, mono accent tagline, larger lede paragraph.
+ */
+export interface PageHeadProps {
+  title: string;
+  /** Mono accent line under the h1 (e.g. "Counterfactual Generative Morphogenesis") */
+  tagline?: string;
+  /** 1.12rem intro paragraph; accepts rich children */
+  lede?: React.ReactNode;
+  /** Breadcrumb line, e.g. "Overview \u203A Why this design" */
+  crumb?: React.ReactNode;
+}
+export declare function PageHead(props: PageHeadProps): JSX.Element;

.claude/skills/simic-design/components/content/PageHead.jsx

@@ -0,0 +1,10 @@
+export function PageHead({ title, tagline, lede, crumb }) {
+  return (
+    <div style={{marginBottom:"2rem"}}>
+      {crumb && <p style={{fontSize:"0.88rem",color:"var(--color-text-muted)",margin:"0 0 1rem"}}>{crumb}</p>}
+      <h1 style={{margin:"0 0 0.5rem"}}>{title}</h1>
+      {tagline && <p style={{fontFamily:"var(--font-code)",fontSize:"0.95rem",letterSpacing:"0.01em",color:"var(--color-accent)",margin:"0 0 1.5rem"}}>{tagline}</p>}
+      {lede && <p style={{maxWidth:"var(--measure)",fontSize:"1.12rem",lineHeight:1.6,margin:0}}>{lede}</p>}
+    </div>
+  );
+}

.claude/skills/simic-design/components/content/PageHead.prompt.md

@@ -0,0 +1,5 @@
+Page head — h1 + mono tagline + lede, used once at the top of a page's content column.
+
+```jsx
+<PageHead title="Simic" tagline="Counterfactual Generative Morphogenesis" lede={<>New neural structure is <strong>generated from the live state of a host network</strong>…</>} />
+```

.claude/skills/simic-design/components/content/Spine.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The invariant "spine" list: hairline-ruled items with a bold title and a mono accent INV-nn chip.
+ */
+export interface SpineItem {
+  title: React.ReactNode;
+  /** e.g. "INV-15, INV-16" */
+  inv?: string;
+  body: React.ReactNode;
+}
+export interface SpineProps { items: SpineItem[]; }
+export declare function Spine(props: SpineProps): JSX.Element;

.claude/skills/simic-design/components/content/Spine.jsx

@@ -0,0 +1,14 @@
+export function Spine({ items }) {
+  return (
+    <ul style={{maxWidth:"var(--measure)",margin:"1.5rem 0",padding:0,listStyle:"none"}}>
+      {items.map((it,i)=>(
+        <li key={i} style={{padding:"1rem 0",borderTop:"1px solid var(--color-border)",borderBottom:i===items.length-1?"1px solid var(--color-border)":"none",margin:0}}>
+          <b style={{display:"block",color:"var(--color-heading)",fontWeight:650}}>
+            {it.title}{it.inv && <> <span style={{fontFamily:"var(--font-code)",fontSize:"0.78rem",letterSpacing:"0.04em",color:"var(--color-accent)",whiteSpace:"nowrap"}}>{it.inv}</span></>}
+          </b>
+          {it.body}
+        </li>
+      ))}
+    </ul>
+  );
+}

.claude/skills/simic-design/components/content/Spine.prompt.md

@@ -0,0 +1,5 @@
+Invariant spine list — used for guarantee/obligation lists.
+
+```jsx
+<Spine items={[{title:"Determinism", inv:"INV-05", body:"Identical snapshot plus identical future data produces bitwise-identical traces."}]} />
+```

.claude/skills/simic-design/components/content/content.card.html

@@ -0,0 +1,24 @@
+<!-- @dsCard group="Components" viewport="700x760" name="Content" subtitle="PageHead, Note (+status), CanonQuote, Spine" -->
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css"><style>body{margin:0;background:var(--color-bg)}</style>
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+</head><body><div id="root"></div>
+<script type="text/babel">
+const { PageHead, Note, CanonQuote, Spine } = window.SimicDesignSystem_5a908e;
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <div style={{padding:"24px 28px"}}>
+    <PageHead title="Simic" tagline="Counterfactual Generative Morphogenesis" lede={<>New neural structure is <strong>generated from the live state of a host network</strong> — then causally screened against doing nothing.</>} />
+    <Note label="Project status" status><p style={{margin:0}}><strong>Pre-implementation bootstrap.</strong> Nothing on this site describes a running system or a measured result.</p></Note>
+    <Note label="Read the claims against this"><p style={{margin:0}}>Part of the expected improvement is a training-procedure win that could arguably have been retrofitted.</p></Note>
+    <CanonQuote cite={<>The canonical sentence — <code>docs/design/02-constitution.md</code> §5.3</>}><p style={{margin:0}}>Under Leyline, Ugin plans, Aurelia commissions and acts, Nissa observes, Momir designs.</p></CanonQuote>
+    <Spine items={[
+      {title:"Determinism", inv:"INV-05", body:"Identical snapshot plus identical future data produces bitwise-identical traces."},
+      {title:"Doing nothing is a real competitor", inv:"INV-15, INV-16", body:"Every admission includes a measured no-intervention branch with policy utility exactly zero."}
+    ]} />
+  </div>
+);
+</script>
+</body></html>

.claude/skills/simic-design/components/data/CardGrid.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Link-card grid: subtle fill, hairline border, accent title, border turns accent on hover. No shadows.
+ */
+export interface CardItem { title: React.ReactNode; body: React.ReactNode; href?: string; }
+export interface CardGridProps { cards: CardItem[]; }
+export declare function CardGrid(props: CardGridProps): JSX.Element;

.claude/skills/simic-design/components/data/CardGrid.jsx

@@ -0,0 +1,17 @@
+export function CardGrid({ cards }) {
+  return (
+    <ul style={{display:"grid",gap:"1rem",gridTemplateColumns:"repeat(auto-fit, minmax(15rem, 1fr))",margin:"1.5rem 0 2rem",padding:0,listStyle:"none"}}>
+      {cards.map((c,i)=>(
+        <li key={i} style={{margin:0}}>
+          <a href={c.href||"#"} onClick={e=>{if(!c.href)e.preventDefault()}}
+             style={{display:"block",height:"100%",padding:"1rem 1.5rem",background:"var(--color-bg-subtle)",border:"1px solid var(--color-border)",borderRadius:"var(--radius)",textDecoration:"none",color:"inherit"}}
+             onMouseEnter={e=>e.currentTarget.style.borderColor="var(--color-accent)"}
+             onMouseLeave={e=>e.currentTarget.style.borderColor="var(--color-border)"}>
+            <h3 style={{margin:"0 0 0.5rem",fontSize:"1rem",color:"var(--color-accent)"}}>{c.title}</h3>
+            <p style={{margin:0,fontSize:"0.92rem",color:"var(--color-text-muted)"}}>{c.body}</p>
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}

.claude/skills/simic-design/components/data/CardGrid.prompt.md

@@ -0,0 +1,5 @@
+Card grid of navigation cards. Titles conventionally end with " \u2192".
+
+```jsx
+<CardGrid cards={[{title:"The architecture \u2192", body:"Fourteen bounded domains…", href:"architecture.html"}]} />
+```

.claude/skills/simic-design/components/data/DataTable.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Wrapped table: hairline frame, uppercase mono-ish header row on subtle fill, first column in mono (the "name" column).
+ */
+export interface DataTableProps {
+  caption?: React.ReactNode;
+  columns: React.ReactNode[];
+  /** Row cells; first cell renders in mono heading style */
+  rows: React.ReactNode[][];
+}
+export declare function DataTable(props: DataTableProps): JSX.Element;

.claude/skills/simic-design/components/data/DataTable.jsx

@@ -0,0 +1,17 @@
+export function DataTable({ caption, columns, rows }) {
+  return (
+    <div style={{maxWidth:"var(--page)",margin:"1.5rem 0",overflowX:"auto",border:"1px solid var(--color-border)",borderRadius:"var(--radius)"}}>
+      <table style={{width:"100%",minWidth:"34rem",borderCollapse:"collapse",fontSize:"0.92rem"}}>
+        {caption && <caption style={{textAlign:"left",padding:"0.5rem 1rem",fontSize:"0.85rem",color:"var(--color-text-muted)",borderBottom:"1px solid var(--color-border)"}}>{caption}</caption>}
+        <thead><tr>
+          {columns.map((c,i)=><th key={i} scope="col" style={{textAlign:"left",verticalAlign:"top",padding:"0.5rem 1rem",borderBottom:"1px solid var(--color-border)",color:"var(--color-heading)",fontSize:"0.8rem",letterSpacing:"0.06em",textTransform:"uppercase",background:"var(--color-bg-subtle)",whiteSpace:"nowrap"}}>{c}</th>)}
+        </tr></thead>
+        <tbody>
+          {rows.map((r,ri)=><tr key={ri}>
+            {r.map((cell,ci)=><td key={ci} style={{textAlign:"left",verticalAlign:"top",padding:"0.5rem 1rem",borderBottom:ri===rows.length-1?"none":"1px solid var(--color-border)",...(ci===0?{fontFamily:"var(--font-code)",color:"var(--color-heading)",whiteSpace:"nowrap"}:{})}}>{cell}</td>)}
+          </tr>)}
+        </tbody>
+      </table>
+    </div>
+  );
+}

.claude/skills/simic-design/components/data/DataTable.prompt.md

@@ -0,0 +1,5 @@
+Reference table (e.g. repository map). First column is the mono name column.
+
+```jsx
+<DataTable caption="Repository map" columns={["Path","Contents"]} rows={[["docs/design/01-claim.md","Executive summary…"]]} />
+```

.claude/skills/simic-design/components/data/Diagram.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Pre-rendered Mermaid diagram frame: light/dark SVG pair swapped with the theme, horizontal scroll below minWidth, muted figcaption.
+ */
+export interface DiagramProps {
+  lightSrc: string;
+  darkSrc?: string;
+  /** Accessible description of the diagram */
+  label: string;
+  caption?: React.ReactNode;
+  /** px below which the frame scrolls instead of shrinking (legibility beats fitting) */
+  minWidth?: number | string;
+}
+export declare function Diagram(props: DiagramProps): JSX.Element;

.claude/skills/simic-design/components/data/Diagram.jsx

@@ -0,0 +1,13 @@
+export function Diagram({ lightSrc, darkSrc, label, caption, minWidth = 0 }) {
+  return (
+    <figure style={{margin:"1.5rem 0",maxWidth:"var(--page)"}}>
+      <div role="img" aria-label={label} style={{overflowX:"auto",paddingBlock:"0.5rem"}}>
+        <picture>
+          {darkSrc && <source srcSet={darkSrc} media="(prefers-color-scheme: dark)" />}
+          <img src={lightSrc} alt="" style={{display:"block",height:"auto",maxWidth:"100%",minWidth,marginInline:"auto"}} />
+        </picture>
+      </div>
+      {caption && <figcaption style={{fontSize:"0.85rem",color:"var(--color-text-muted)",marginTop:"0.5rem"}}>{caption}</figcaption>}
+    </figure>
+  );
+}

.claude/skills/simic-design/components/data/Diagram.prompt.md

@@ -0,0 +1,5 @@
+Diagram frame for the pre-rendered SVG pairs in assets/diagrams/.
+
+```jsx
+<Diagram lightSrc="assets/diagrams/core-loop-light.svg" darkSrc="assets/diagrams/core-loop-dark.svg" label="Flowchart of the core loop" minWidth={600} caption={<>Source: <code>docs/design/01-claim.md</code> §1</>} />
+```

.claude/skills/simic-design/components/data/Split.d.ts

@@ -0,0 +1,3 @@
+/** Two-column comparison split (armour / forward motion). Stacks under 18rem columns. */
+export interface SplitProps { left: React.ReactNode; right: React.ReactNode; }
+export declare function Split(props: SplitProps): JSX.Element;

.claude/skills/simic-design/components/data/Split.jsx

@@ -0,0 +1,8 @@
+export function Split({ left, right }) {
+  return (
+    <div style={{display:"grid",gap:"1.5rem",gridTemplateColumns:"repeat(auto-fit, minmax(18rem, 1fr))",maxWidth:"var(--page)",margin:"1.5rem 0"}}>
+      <section>{left}</section>
+      <section>{right}</section>
+    </div>
+  );
+}

.claude/skills/simic-design/components/data/Split.prompt.md

@@ -0,0 +1,5 @@
+Two-column contrast layout.
+
+```jsx
+<Split left={<><h3>The armour</h3><p>…</p></>} right={<><h3>The forward motion</h3><p>…</p></>} />
+```

.claude/skills/simic-design/components/data/data.card.html

@@ -0,0 +1,28 @@
+<!-- @dsCard group="Components" viewport="700x720" name="Data & layout" subtitle="CardGrid, DataTable, Split, Diagram" -->
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css"><style>body{margin:0;background:var(--color-bg)}</style>
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+</head><body><div id="root"></div>
+<script type="text/babel">
+const { CardGrid, DataTable, Split, Diagram } = window.SimicDesignSystem_5a908e;
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <div style={{padding:"24px 28px"}}>
+    <CardGrid cards={[
+      {title:"The architecture \u2192", body:"Fourteen bounded domains, the canonical sentence, the newsroom routing rule."},
+      {title:"The guarantees \u2192", body:"The invariant spine each piece of armour is written into — cited as INV-nn."}
+    ]} />
+    <DataTable caption="Repository map" columns={["Path","Contents"]} rows={[
+      ["docs/design/00-INDEX.md","Entry point to the HLD chapter set, with reading paths"],
+      ["docs/design/02-constitution.md","Naming constitution and the 45 blocking invariants"],
+      ["docs/adr/","Architecture decision records"]
+    ]} />
+    <Split left={<><h3 style={{marginTop:0}}>The armour</h3><p>Every mechanism that makes a documented failure class <em>unrepresentable</em> rather than policed.</p></>}
+           right={<><h3 style={{marginTop:0}}>The forward motion</h3><p>What the record earned the right to attempt.</p></>} />
+    <Diagram lightSrc="../../assets/diagrams/observation-loop-light.svg" darkSrc="../../assets/diagrams/observation-loop-dark.svg" label="Observation loop" caption={<>Source: <code>docs/design/04-architecture.md</code></>} />
+  </div>
+);
+</script>
+</body></html>

.claude/skills/simic-design/components/navigation/Masthead.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Site header: mono \u25C8 simic wordmark + primary nav. Active item gets heading color and a 2px accent underline.
+ * @startingPoint section="Website" subtitle="Masthead with wordmark and primary nav" viewport="1100x80"
+ */
+export interface MastheadProps {
+  /** Label of the current page */
+  current?: string;
+  /** [label, href] pairs; defaults to the live site's nav */
+  items?: [string, string][];
+}
+export declare function Masthead(props: MastheadProps): JSX.Element;

.claude/skills/simic-design/components/navigation/Masthead.jsx

@@ -0,0 +1,24 @@
+export function Masthead({ current = "Overview", items }) {
+  const nav = items ?? [["Overview","index.html"],["Architecture","architecture.html"],["Why this design","lineage.html"],["Design docs","/design/"],["Source","https://github.com/foundryside-dev/simic"]];
+  return (
+    <header style={{borderBottom:"1px solid var(--color-border)",background:"var(--color-bg-subtle)"}}>
+      <div style={{maxWidth:"var(--page)",margin:"0 auto",padding:"1rem 1rem",display:"flex",flexWrap:"wrap",alignItems:"baseline",gap:"0.5rem 2rem"}}>
+        <a href="#" style={{fontFamily:"var(--font-code)",fontSize:"1.05rem",fontWeight:600,letterSpacing:"0.02em",color:"var(--color-heading)",textDecoration:"none"}} onClick={e=>e.preventDefault()}>
+          <span style={{color:"var(--color-accent)"}}>{"\u25C8 "}</span>simic
+        </a>
+        <nav aria-label="Primary">
+          <ul style={{display:"flex",flexWrap:"wrap",gap:"0.5rem 1.5rem",margin:0,padding:0,listStyle:"none",fontSize:"0.94rem"}}>
+            {nav.map(([label,href])=>{
+              const active = label===current;
+              return <li key={label} style={{margin:0}}>
+                <a href={href} onClick={e=>e.preventDefault()} style={{textDecoration:"none",color:active?"var(--color-heading)":"var(--color-text-muted)",paddingBlock:"0.25rem",borderBottom:active?"2px solid var(--color-accent)":"2px solid transparent"}}
+                   onMouseEnter={e=>{if(!active)e.currentTarget.style.color="var(--color-accent)"}}
+                   onMouseLeave={e=>{if(!active)e.currentTarget.style.color="var(--color-text-muted)"}}>{label}</a>
+              </li>;
+            })}
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}

.claude/skills/simic-design/components/navigation/Masthead.prompt.md

@@ -0,0 +1,7 @@
+Site masthead — use at the top of every simic website page.
+
+```jsx
+<Masthead current="Architecture" />
+```
+
+Pass `items` as [label, href] pairs to change nav. Wordmark is live text, never an image.

.claude/skills/simic-design/components/navigation/SiteFooter.d.ts

@@ -0,0 +1,3 @@
+/** Site footer: attribution line left, repo link and version stamp right. */
+export interface SiteFooterProps {}
+export declare function SiteFooter(props: SiteFooterProps): JSX.Element;

.claude/skills/simic-design/components/navigation/SiteFooter.jsx

@@ -0,0 +1,13 @@
+export function SiteFooter() {
+  return (
+    <footer style={{borderTop:"1px solid var(--color-border)",background:"var(--color-bg-subtle)",fontSize:"0.9rem",color:"var(--color-text-muted)"}}>
+      <div style={{maxWidth:"var(--page)",margin:"0 auto",padding:"1.5rem 1rem",display:"flex",flexWrap:"wrap",gap:"0.5rem 2rem",justifyContent:"space-between"}}>
+        <p style={{margin:0}}>Simic — a research project by tachyon-beep. Licensed Apache-2.0.</p>
+        <ul style={{display:"flex",flexWrap:"wrap",gap:"0.5rem 1.5rem",margin:0,padding:0,listStyle:"none"}}>
+          <li style={{margin:0}}><a href="https://github.com/foundryside-dev/simic">github.com/foundryside-dev/simic</a></li>
+          <li style={{margin:0}}>HLD v4.1 {"\u00B7"} Namespec 2.0 — locked</li>
+        </ul>
+      </div>
+    </footer>
+  );
+}

.claude/skills/simic-design/components/navigation/SiteFooter.prompt.md

@@ -0,0 +1,5 @@
+Site footer — bottom of every simic website page. No props.
+
+```jsx
+<SiteFooter />
+```