From 9e1468942655ef9f71c425d9d1a303e7db0b912f Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 13:04:52 +1100
Subject: [PATCH 1/4] feat(skills): render Skill embeds through one SkillCard

Skills rendered through eight markups: SkillCard, SkillTable, the
repository card, and hand-written rows on curator profiles, /me,
collections, the reviewed list and the trending archive. Names, bylines
and controls drifted apart.

SkillCard now takes the context as props: a card, row or compact layout,
how much byline the page already carries, one metric, and opt-in controls.
A pure view builder resolves the facts once, so every layout shows the
same ones. The design merges the takes Harlan picked from the lab: one
identity unit, at most two lines of description, and a dashed run pill.
Hearts and the SKILL.md icon are opt-in now.
---
 DESIGN.md                                     |   8 +
 app/components/SkillCard.vue                  | 819 +++++++++++-------
 app/components/SkillTable.vue                 | 306 -------
 .../skill-card/_SkillCardIdentity.vue         | 175 ++++
 .../skill-card/_SkillCardMetric.vue           |  40 +
 app/components/skill-card/_SkillCardRun.vue   | 148 ++++
 app/pages/@[login]/[slug].vue                 |  95 +-
 app/pages/@[login]/index.vue                  |  85 +-
 app/pages/@[login]/liked.vue                  |  11 +-
 app/pages/_playground/skill-cards.vue         | 283 ++++++
 app/types/skill-card.ts                       | 100 +++
 app/utils/skill-card-view.ts                  | 116 +++
 layers/identity/app/pages/me/index.vue        |  56 +-
 .../app/components/AgentSkillsPage.vue        |   2 +-
 .../components/FrameworkSkillsDirectory.vue   |   2 +-
 .../content/ComparisonSkillCard.vue           |  18 +-
 layers/marketing/app/pages/skills/best.vue    |  61 +-
 layers/marketing/app/pages/skills/index.vue   |  34 +-
 .../marketing/app/pages/skills/tag/[slug].vue |   7 +-
 .../marketing/app/pages/skills/trending.vue   |  65 +-
 .../gh/[owner]/[repo]/_RepoSkillCard.vue      | 125 ---
 .../[owner]/[repo]/_RepoSkillDependencies.vue |  38 +
 .../app/pages/gh/[owner]/[repo]/index.vue     |  26 +-
 .../registry/app/pages/gh/[owner]/index.vue   |   2 +-
 test/a11y.spec.ts                             |  23 +-
 test/unit/install-copy.test.ts                |   7 +-
 .../unit/repo-skill-dependencies-card.test.ts | 121 ---
 test/unit/repo-skill-dependencies.test.ts     |  59 ++
 test/unit/skill-card-condensed.test.ts        | 139 ---
 test/unit/skill-card-view.test.ts             | 105 +++
 test/unit/skill-table-ranking.test.ts         |  28 -
 .../skills-registry-loading-state.test.ts     |   2 +-
 32 files changed, 1734 insertions(+), 1372 deletions(-)
 delete mode 100644 app/components/SkillTable.vue
 create mode 100644 app/components/skill-card/_SkillCardIdentity.vue
 create mode 100644 app/components/skill-card/_SkillCardMetric.vue
 create mode 100644 app/components/skill-card/_SkillCardRun.vue
 create mode 100644 app/pages/_playground/skill-cards.vue
 create mode 100644 app/types/skill-card.ts
 create mode 100644 app/utils/skill-card-view.ts
 delete mode 100644 layers/registry/app/pages/gh/[owner]/[repo]/_RepoSkillCard.vue
 create mode 100644 layers/registry/app/pages/gh/[owner]/[repo]/_RepoSkillDependencies.vue
 delete mode 100644 test/unit/repo-skill-dependencies-card.test.ts
 create mode 100644 test/unit/repo-skill-dependencies.test.ts
 delete mode 100644 test/unit/skill-card-condensed.test.ts
 create mode 100644 test/unit/skill-card-view.test.ts
 delete mode 100644 test/unit/skill-table-ranking.test.ts

diff --git a/DESIGN.md b/DESIGN.md
index 1b3b194d..ddeb2af2 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -183,6 +183,13 @@ Use `UiTooltip` (not `UTooltip`) for any tooltip that needs more than a plain st
 - **Data labels**: top-level metrics are singular and labeled ("12 skills", "3 curators"); expanded views show the full breakdown
 
 ### Bound Components
+- **Skill embeds**: every Skill shown as an item uses `<SkillCard :skill />`. Do not hand-write Skill markup. Props fit it to the context:
+  - `layout`: `card` for a grid tile or an article embed, `row` for a ledger line, `compact` for a sidebar or an index.
+  - `byline`: `full` by default, `repo` where the page names the owner, `none` where it names the Repository.
+  - `metric`: one of `stars`, `likes` or `updated`, or `none`.
+  - `actions`: `run` by default. `like` and `source` are opt-in.
+  - `rank`, `note` and `trending`, plus the `meta`, `footer` and `actions` slots for facts only one context has.
+  `/_playground/skill-cards` renders every context in development.
 - **Skill source lists**: use `SkillSourceList` when a shortlist needs visible author, handle, repository, and source-linked skill name. `stream` is a vertically scrollable discovery preview; `grid` is for bounded related-skill groups. Idle auto-scroll pauses for hover, focus, touch, and reduced motion. Mixed 20-item discovery streams should represent at least 10 people and cap each person at 2 skills.
 - **Install commands**: never render one as raw text. Use `<InstallCommand :command="cmd" />` so `npx skilld add` stays quiet and the target carries the accent. Long commands wrap (`wrap`); they never get a horizontal scrollbar inside a card.
 
@@ -460,3 +467,4 @@ These are editorial sets, not necessarily database collections yet. If a set has
 - **Trending shares the /skills shell**: `/skills/trending` uses the full-width layout from `/skills`. Its heading replaces `CompactPageHeader` and lines up with the results column. A sticky 14rem sidebar holds the range links, then the weekly CTA and the skilld install. Nothing sits right of the board, so the board takes every column the sidebar leaves. Rows switch on their own width, and the post carousel shows two cards where it has room. On narrow screens the ranges are a compact row above the board, and the CTA stays after the fifth row. Harlan asked for this on 2026-10-06. It supersedes the 2026-10-01 call that dropped the 9/3 sidebar for taking a quarter of the board's width: that sidebar sat right of a 64rem board, and this one sits left of a board that runs the full page width.
 - **Trending rows scan in one pass**: the rank is a plain mono number, and the first three are a step darker. Each metadata line runs source, stars, then the signal that ranked the row, and an empty slot renders nothing. Descriptions stop at two lines, the run chip is as wide as its command, and the post carousel shows whole cards only. The sidebar invitation drops the email preview and the card. Its button is the rail's one solid rose element, so the install chip beside it inks its dot. Harlan asked for this polish on 2026-10-06.
 - **A six-step lifecycle band replaces the four tiles**: under the hero, one band maps the whole product in its real order: find, run, install or fork, keep current, make, build on. The site and the CLI share one line. Each step is one link: a mono `01` marker and step name, then one sans line that opens with its pitch line where COPY.md has one. A line of stone dots joins the steps. Run, the default, carries the band's one rose dot, so no step lights rose on hover. Six columns from 1024px; below that a vertical list with the dots down the left. Keep the band no taller than the tiles it replaced: the hero and the band must fit a 1440×900 viewport. Harlan approved it on 2026-10-06.
+- **One Skill card**: `SkillCard` renders every Skill embed, in three layouts. Each opens with one identity unit: the avatar beside the mono name, over a byline of author and Repository. Then come at most two lines of description and one line of facts with a dashed `run` pill. The pill is the run chip's material without `npx skilld`. Its click copies the full command, and its dot stays stone until hover, focus or copy. Rows read in three zones, who, what and the facts, and stack like a borderless card under 40rem. Compact entries drop the description. Cards show no SKILL.md icon and no heart by default: with few accounts yet, a row of zero hearts reads as an empty room. Harlan chose this from five takes, one by Fable, on 2026-10-06. It supersedes the `/skills` table and its "What it does" column.
diff --git a/app/components/SkillCard.vue b/app/components/SkillCard.vue
index 0afedbbb..8a05089c 100644
--- a/app/components/SkillCard.vue
+++ b/app/components/SkillCard.vue
@@ -1,353 +1,524 @@
 <script setup lang="ts">
-import { githubAvatarProxyUrl } from '#shared/image-proxy'
+import type {
+  SkillCardAction,
+  SkillCardByline,
+  SkillCardLayout,
+  SkillCardMetric,
+  SkillCardSkill,
+} from '~/types/skill-card'
 import { skillRunCmd } from '#shared/skill-commands'
+import { buildSkillCardView, skillCardSurface } from '~/utils/skill-card-view'
+import SkillCardIdentity from './skill-card/_SkillCardIdentity.vue'
+import SkillCardMetricLabel from './skill-card/_SkillCardMetric.vue'
+import SkillCardRun from './skill-card/_SkillCardRun.vue'
 
-interface SkillLike {
-  owner: string
-  repo: string
-  name: string
-  registryPath: string
-  slug: string
-  description?: string | null
-  stars?: number
-  likeCount?: number
-  tags?: string[]
-  official?: boolean
-  occurredAt?: number | null
-  pushedAt?: number | null
-  modifiedAt?: number | null
-  /** GitHub profile name of the owner, when the owner has been synced. */
-  authorName?: string | null
-  /** SKILL.md on GitHub at the synced revision. */
-  skillFileUrl?: string | null
-}
-
+/**
+ * Every Skill embed on the site. The props say what the context needs: the
+ * layout it sits in, how much provenance the page already carries, the one
+ * metric worth showing and the controls it offers. Slots carry the few
+ * facts only one context has, such as a Repository's dependencies.
+ *
+ * Each layout opens with the same identity unit, the face beside the name
+ * over one quiet byline. Then at most two lines of words, then the facts and
+ * the dashed run pill. Three weights in all: the name, the words, the facts.
+ */
 const {
   skill,
-  variant = 'grid',
-  signal = 'auto',
-  showDescription = true,
-  showCopy = true,
-  showLike = true,
-  showOwnerAvatar = true,
-  showOwnerPath = false,
-  showTags = false,
-  timestampLabel,
-  timestampFormat,
+  layout = 'card',
+  byline = 'full',
+  metric = 'stars',
+  actions,
+  // Vue casts an absent boolean to false; an explicit undefined keeps the layout default.
+  description = undefined,
+  rank,
+  note,
+  trending = false,
+  surface,
 } = defineProps<{
-  skill: SkillLike
-  variant?: 'grid' | 'list' | 'condensed'
-  signal?: 'stars' | 'auto' | 'none'
-  showDescription?: boolean
-  showCopy?: boolean
-  showLike?: boolean
-  showOwnerAvatar?: boolean
-  showOwnerPath?: boolean
-  showTags?: boolean
-  timestampLabel?: string
-  timestampFormat?: 'absolute' | 'relative'
+  skill: SkillCardSkill
+  layout?: SkillCardLayout
+  byline?: SkillCardByline
+  metric?: SkillCardMetric
+  /** Defaults to `run` on cards and rows, and none on compact entries. */
+  actions?: readonly SkillCardAction[]
+  /** Defaults to on, except in compact entries. */
+  description?: boolean
+  /** One-based position in a ranked list. */
+  rank?: number
+  /** Why the Skill is here, in a curator's or editor's words. */
+  note?: string | null
+  trending?: boolean
+  /** Analytics surface of the run copy. Defaults to `skill-<layout>`. */
+  surface?: string
 }>()
 
-// The card copies the run command: reading a skill costs nothing, installing is a choice.
-const runCmd = computed(() => skillRunCmd(skill.owner, skill.repo, skill.name))
+const slots = defineSlots<{
+  /** Inline facts beside the metric, such as "Watching for changes" or a braille spark. */
+  meta?: () => unknown
+  /** A block under the description, such as dependencies. */
+  footer?: () => unknown
+  /** Extra controls before the run pill. */
+  actions?: () => unknown
+}>()
+
+const resolvedSurface = skillCardSurface({ layout, surface })
+const runCommand = computed(() => skillRunCmd(skill.owner, skill.repo, skill.name))
 const { copy, copied } = useInstallCopy(
-  runCmd,
-  variant === 'condensed' ? 'skill-card-condensed' : variant === 'list' ? 'skill-card-list' : 'skill-card',
+  runCommand,
+  resolvedSurface,
   'run',
   () => ({ kind: 'skill', owner: skill.owner, name: skill.name }),
 )
 
-const skillPath = computed(() => {
-  return skill.registryPath
-})
-
-const repoSlug = computed(() => `${skill.owner}/${skill.repo}`)
-// Byline: the person first, the slug as the mono data label after it.
-const authorName = computed(() => resolveAuthorName(skill.owner, skill.authorName))
-const skillFileUrl = computed(() => skill.skillFileUrl ?? null)
-
-const resolvedTimestampFormat = computed(() =>
-  timestampFormat ?? (variant === 'condensed' ? 'relative' : 'absolute'),
-)
-const shouldShowOwnerPath = computed(() =>
-  showOwnerPath && variant !== 'condensed',
-)
-const skillLinkAriaLabel = computed(() =>
-  variant === 'condensed' ? `/${skill.name}` : `/${skill.name} by ${skill.owner}`,
-)
-
-const timestampSeconds = computed<number | null>(() => {
-  if (typeof skill.occurredAt === 'number')
-    return skill.occurredAt
-  if (typeof skill.modifiedAt === 'number')
-    return skill.modifiedAt
-  if (typeof skill.pushedAt === 'number')
-    return skill.pushedAt
-  return null
-})
-
-const timestampDate = computed(() =>
-  timestampSeconds.value != null ? new Date(timestampSeconds.value * 1000) : null,
-)
+const view = computed(() => buildSkillCardView(
+  skill,
+  { layout, byline, metric, actions, description, rank, note, trending, surface },
+  { copied: copied.value, copy: () => { void copy(runCommand.value) } },
+))
 
-const resolvedSignal = computed<'stars' | null>(() => {
-  if (signal === 'none')
-    return null
-  const stars = skill.stars ?? 0
-  return stars > 0 ? 'stars' : null
-})
-
-const linkClasses = computed(() => {
-  // pr-24 reserves room for the heart and the copy button side by side.
-  if (variant === 'list')
-    return 'flex items-center gap-4 px-4 py-3 pr-24 transition-colors duration-200 hover:bg-elevated'
-  if (variant === 'condensed')
-    return `flex h-full min-h-11 flex-col rounded-lg border border-default px-3 py-2.5 transition-colors duration-200 hover:border-[var(--ui-text-muted)] ${skillFileUrl.value ? 'pr-10' : ''}`
-  return 'flex h-full min-h-[8.5rem] flex-col rounded-lg border border-default p-4 pr-24 transition-colors duration-200 hover:border-[var(--ui-text-muted)]'
-})
-
-const buttonPositionClass = computed(() => {
-  if (variant === 'list')
-    return 'top-1/2 right-3 -translate-y-1/2'
-  return variant === 'condensed' ? 'top-2 right-2' : 'top-3 right-3'
-})
+const rankText = computed(() => view.value.rank == null ? null : String(view.value.rank).padStart(2, '0'))
+const rankLead = computed(() => (view.value.rank ?? 99) <= 3)
+const hasControls = computed(() => Boolean(view.value.run || view.value.like || view.value.sourceUrl || slots.actions))
+const hasFacts = computed(() => Boolean(view.value.metric || slots.meta))
+/** A braille spark in the meta slot already spends the entry's rose. */
+const markAccent = computed(() => !slots.meta)
 
 /**
- * The condensed variant is a single line with no reserved right padding, so a
- * second control there would sit on top of the title. Hearts ride the grid and
- * list cards, which already reserve room.
+ * Rows in one list share their metric column, so its width comes from what
+ * the row can hold, not what it holds now. A count of 9 and one of 42 line up.
  */
-const showLikeButton = computed(() => showLike && variant !== 'condensed')
-
-const signalFadesOnHover = computed(() => showCopy && variant !== 'condensed')
+const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : view.value.metricKind === 'updated' ? '6.5rem' : '3.5rem')
 </script>
 
 <template>
-  <div class="group relative h-full">
-    <NuxtLink
-      :to="skillPath"
-      :aria-label="skillLinkAriaLabel"
-      :class="linkClasses"
-    >
-      <template v-if="variant === 'list'">
-        <div class="min-w-0 flex-1 flex items-center gap-3">
-          <div class="flex items-center gap-2 min-w-0 shrink-0">
-            <img
-              v-if="showOwnerAvatar"
-              :src="githubAvatarProxyUrl(skill.owner, 40)"
-              :alt="skill.owner"
-              width="20"
-              height="20"
-              class="size-5 shrink-0 rounded-full"
-              loading="lazy"
-            >
-            <p class="font-mono text-sm font-medium truncate">
-              /{{ skill.name }}
-            </p>
-            <div
-              v-if="showTags && skill.tags?.length"
-              class="hidden md:flex flex-wrap gap-1 min-w-0"
-            >
-              <UBadge
-                v-for="tag in skill.tags.slice(0, 3)"
-                :key="tag"
-                :label="tag"
-                variant="subtle"
-                color="neutral"
-                size="xs"
-                class="font-mono"
-              />
-            </div>
-          </div>
-          <p
-            v-if="showOwnerPath"
-            class="text-xs text-muted truncate"
-          >
-            <span v-if="authorName" class="text-toned">{{ authorName }}</span>
-            <span v-if="authorName" aria-hidden="true"> · </span>
-            <span class="font-mono">{{ repoSlug }}</span>
-          </p>
-          <p
-            v-if="timestampLabel && timestampDate"
-            class="hidden items-center gap-1 text-xs text-muted sm:inline-flex"
-          >
-            <UIcon
-              name="i-lucide-calendar-days"
-              class="size-3"
-              aria-hidden="true"
-            />
-            <span>{{ timestampLabel }}</span>
-            <NuxtTime
-              v-if="resolvedTimestampFormat === 'relative'"
-              :datetime="timestampDate"
-              locale="en"
-              relative
-              numeric="always"
-              relative-style="long"
-              :title="true"
-            />
-            <NuxtTime
-              v-else
-              :datetime="timestampDate"
-              locale="en"
-              month="short"
-              day="numeric"
-              year="numeric"
-              time-zone="UTC"
-              :title="true"
-            />
-          </p>
-          <p
-            v-if="showDescription && skill.description"
-            class="text-xs text-muted truncate hidden sm:block"
-          >
-            {{ skill.description }}
-          </p>
+  <!-- Card: a tile in a grid, or one embed in an article. -->
+  <article v-if="view.layout === 'card'" class="skill-card skill-card--card">
+    <div class="flex min-w-0 items-start gap-3">
+      <span v-if="rankText" class="skill-card__rank" :class="{ 'skill-card__rank--lead': rankLead }" aria-hidden="true">{{ rankText }}</span>
+      <SkillCardIdentity :view :size="32" :accent="markAccent" wrap class="min-w-0 flex-1" />
+    </div>
+
+    <p v-if="view.note" class="skill-card__note mt-3 line-clamp-2">
+      {{ view.note }}
+    </p>
+    <p v-if="view.description" class="skill-card__description" :class="view.note ? 'mt-1 line-clamp-1' : 'mt-3 line-clamp-2'">
+      {{ view.description }}
+    </p>
+
+    <div v-if="$slots.footer" class="skill-card__raise mt-3">
+      <slot name="footer" />
+    </div>
+
+    <div v-if="hasFacts || hasControls" class="skill-card__bar">
+      <p v-if="hasFacts" class="skill-card__facts">
+        <SkillCardMetricLabel v-if="view.metric" :metric="view.metric" />
+        <span v-if="$slots.meta" class="skill-card__meta skill-card__raise"><slot name="meta" /></span>
+      </p>
+      <div v-if="hasControls" class="skill-card__controls">
+        <slot name="actions" />
+        <a
+          v-if="view.sourceUrl"
+          :href="view.sourceUrl"
+          target="_blank"
+          rel="noopener"
+          class="skill-card__source"
+        >SKILL.md<span class="sr-only"> on GitHub</span><UIcon name="i-lucide-arrow-up-right" class="size-3" aria-hidden="true" /></a>
+        <LikeButton
+          v-if="view.like"
+          :owner="view.owner"
+          :repo="view.repo"
+          :name="view.name"
+          :count="view.like.count"
+          variant="inline"
+        />
+        <SkillCardRun v-if="view.run" :run="view.run" :title="view.title" />
+      </div>
+    </div>
+  </article>
+
+  <!--
+    Row: one entry of a ledger. Wide, it reads in three zones: who, what and
+    the facts. Narrow, it stacks like a card without the border, so the words
+    get the whole width.
+  -->
+  <div v-else-if="view.layout === 'row'" class="skill-card skill-card--row-shell">
+    <div class="skill-card--row" :class="{ 'skill-card--ranked': rankText }" :style="{ '--skill-card-metric': metricWidth }">
+      <span v-if="rankText" class="skill-card__rank skill-card__row-rank" :class="{ 'skill-card__rank--lead': rankLead }" aria-hidden="true">{{ rankText }}</span>
+      <SkillCardIdentity :view :size="36" :accent="markAccent" wrap class="skill-card__row-id" />
+
+      <div v-if="view.note || view.description || $slots.footer" class="skill-card__row-body">
+        <p v-if="view.note" class="skill-card__note line-clamp-2">
+          {{ view.note }}
+        </p>
+        <p v-if="view.description" class="skill-card__description" :class="view.note ? 'mt-0.5 line-clamp-1' : 'line-clamp-2'">
+          {{ view.description }}
+        </p>
+        <div v-if="$slots.footer" class="skill-card__raise mt-2">
+          <slot name="footer" />
         </div>
-        <span
-          v-if="resolvedSignal === 'stars'"
-          class="data-label shrink-0 inline-flex items-center gap-1 transition-opacity"
-          :class="signalFadesOnHover ? 'group-hover:opacity-0' : ''"
-          :title="`${(skill.stars ?? 0).toLocaleString()} GitHub stars`"
-        >
-          <UIcon name="i-lucide-star" class="size-3" aria-hidden="true" />
-          {{ formatGithubStars(skill.stars ?? 0) }}
+      </div>
+
+      <p v-if="$slots.meta" class="skill-card__meta skill-card__raise skill-card__row-meta">
+        <slot name="meta" />
+      </p>
+
+      <div v-if="view.metricKind !== 'none' || hasControls" class="skill-card__row-end">
+        <span v-if="view.metricKind !== 'none'" class="skill-card__row-metric">
+          <SkillCardMetricLabel v-if="view.metric" :metric="view.metric" short />
         </span>
-      </template>
-
-      <template v-else>
-        <div class="flex items-start gap-2">
-          <p class="font-mono text-sm font-medium truncate min-w-0 flex-1">
-            /{{ skill.name }}
-          </p>
-          <span
-            v-if="!shouldShowOwnerPath && resolvedSignal === 'stars'"
-            class="data-label shrink-0 inline-flex items-center gap-1 transition-opacity"
-            :class="signalFadesOnHover ? 'group-hover:opacity-0' : ''"
-            :title="`${(skill.stars ?? 0).toLocaleString()} GitHub stars`"
-          >
-            <UIcon name="i-lucide-star" class="size-3" aria-hidden="true" />
-            {{ formatGithubStars(skill.stars ?? 0) }}
-          </span>
-        </div>
-        <div
-          v-if="shouldShowOwnerPath"
-          class="mt-0.5 flex items-center gap-1.5"
-        >
-          <img
-            v-if="showOwnerAvatar"
-            :src="githubAvatarProxyUrl(skill.owner, 40)"
-            :alt="skill.owner"
-            width="20"
-            height="20"
-            class="size-5 shrink-0 rounded-full"
-            loading="lazy"
-          >
-          <p class="text-xs text-muted truncate min-w-0 flex-1">
-            <span v-if="authorName" class="text-toned">{{ authorName }}</span>
-            <span v-if="authorName" aria-hidden="true"> · </span>
-            <span class="font-mono">{{ repoSlug }}</span>
-          </p>
-          <span
-            v-if="resolvedSignal === 'stars'"
-            class="data-label shrink-0 inline-flex items-center gap-1 transition-opacity"
-            :class="signalFadesOnHover ? 'group-hover:opacity-0' : ''"
-            :title="`${(skill.stars ?? 0).toLocaleString()} GitHub stars`"
-          >
-            <UIcon name="i-lucide-star" class="size-3" aria-hidden="true" />
-            {{ formatGithubStars(skill.stars ?? 0) }}
-          </span>
-        </div>
-        <p
-          v-if="timestampLabel && timestampDate"
-          class="inline-flex items-center gap-1 text-xs text-muted"
-          :class="variant === 'condensed' ? 'mt-1.5' : 'mt-2'"
-        >
-          <UIcon
-            name="i-lucide-calendar-days"
-            class="size-3"
-            aria-hidden="true"
-          />
-          <span>{{ timestampLabel }}</span>
-          <NuxtTime
-            v-if="resolvedTimestampFormat === 'relative'"
-            :datetime="timestampDate"
-            locale="en"
-            relative
-            numeric="always"
-            relative-style="long"
-            :title="true"
-          />
-          <NuxtTime
-            v-else
-            :datetime="timestampDate"
-            locale="en"
-            month="short"
-            day="numeric"
-            year="numeric"
-            time-zone="UTC"
-            :title="true"
-          />
-        </p>
-        <div
-          v-if="showTags && skill.tags?.length"
-          class="mt-2 flex flex-wrap gap-1"
-        >
-          <UBadge
-            v-for="tag in skill.tags.slice(0, 3)"
-            :key="tag"
-            :label="tag"
-            variant="subtle"
-            color="neutral"
-            size="xs"
-            class="font-mono"
+        <div v-if="hasControls" class="skill-card__controls">
+          <slot name="actions" />
+          <a
+            v-if="view.sourceUrl"
+            :href="view.sourceUrl"
+            target="_blank"
+            rel="noopener"
+            class="skill-card__source"
+          >SKILL.md<span class="sr-only"> on GitHub</span><UIcon name="i-lucide-arrow-up-right" class="size-3" aria-hidden="true" /></a>
+          <LikeButton
+            v-if="view.like"
+            :owner="view.owner"
+            :repo="view.repo"
+            :name="view.name"
+            :count="view.like.count"
+            variant="inline"
           />
+          <SkillCardRun v-if="view.run" :run="view.run" :title="view.title" />
         </div>
-        <p
-          v-if="showDescription && skill.description"
-          class="text-muted leading-relaxed"
-          :class="variant === 'condensed'
-            ? 'mt-1.5 text-sm line-clamp-2'
-            : 'mt-2 text-xs line-clamp-3'"
-        >
-          {{ skill.description }}
-        </p>
-      </template>
-    </NuxtLink>
-
-    <div
-      v-if="showCopy || showLikeButton || skillFileUrl"
-      class="absolute z-10 flex items-center gap-0.5"
-      :class="buttonPositionClass"
-    >
-      <a
-        v-if="skillFileUrl"
-        :href="skillFileUrl"
-        target="_blank"
-        rel="noopener"
-        aria-label="Read SKILL.md on GitHub"
-        class="inline-flex size-7 items-center justify-center rounded-md text-muted transition-colors duration-200 hover:bg-elevated hover:text-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-      >
-        <UIcon name="i-lucide-file-text" class="size-3.5" aria-hidden="true" />
-      </a>
+      </div>
+    </div>
+  </div>
+
+  <!-- Compact: the identity unit alone, with the metric in its byline. -->
+  <div v-else class="skill-card skill-card--compact" :class="{ 'skill-card--face': view.byline === 'full' }">
+    <span v-if="rankText" class="skill-card__rank" aria-hidden="true">{{ rankText }}</span>
+    <div class="min-w-0 flex-1">
+      <SkillCardIdentity :view :size="28" :accent="markAccent" terse>
+        <SkillCardMetricLabel v-if="view.metric" :metric="view.metric" short />
+        <span v-if="$slots.meta" class="skill-card__meta skill-card__raise"><slot name="meta" /></span>
+      </SkillCardIdentity>
+      <p v-if="view.note" class="skill-card__note skill-card__compact-line line-clamp-2">
+        {{ view.note }}
+      </p>
+      <p v-if="view.description" class="skill-card__description skill-card__compact-line line-clamp-2">
+        {{ view.description }}
+      </p>
+      <div v-if="$slots.footer" class="skill-card__raise mt-1.5">
+        <slot name="footer" />
+      </div>
+    </div>
+    <div v-if="hasControls" class="skill-card__controls self-center">
+      <slot name="actions" />
       <LikeButton
-        v-if="showLikeButton"
-        :owner="skill.owner"
-        :repo="skill.repo"
-        :name="skill.name"
-        :count="skill.likeCount ?? 0"
-        variant="card"
-      />
-      <UButton
-        v-if="showCopy"
-        :icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
-        size="xs"
-        color="neutral"
-        variant="ghost"
-        class="opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
-        :aria-label="copied ? 'Copied' : `Copy run command for /${skill.name}`"
-        @click.stop.prevent="copy(runCmd)"
+        v-if="view.like"
+        :owner="view.owner"
+        :repo="view.repo"
+        :name="view.name"
+        :count="view.like.count"
+        variant="inline"
       />
+      <SkillCardRun v-if="view.run" :run="view.run" :title="view.title" />
     </div>
   </div>
 </template>
+
+<style scoped>
+.skill-card {
+  position: relative;
+  min-inline-size: 0;
+}
+
+.skill-card__raise,
+.skill-card__controls {
+  position: relative;
+  z-index: 1;
+}
+
+.skill-card__rank {
+  flex: none;
+  min-inline-size: 1.25rem;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--ui-text-muted);
+}
+
+/* The first three are a step darker, never rose, as on the trending board. */
+.skill-card__rank--lead {
+  font-weight: 600;
+  color: var(--ui-text-highlighted);
+}
+
+/* The words: the curator's note in body ink, the Skill's own description muted. */
+.skill-card__note,
+.skill-card__description {
+  max-inline-size: 70ch;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  text-wrap: pretty;
+}
+
+.skill-card__note {
+  color: var(--ui-text);
+}
+
+.skill-card__description {
+  color: var(--ui-text-muted);
+}
+
+/* The facts: mono, small, tabular. */
+.skill-card__facts {
+  display: flex;
+  min-inline-size: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+}
+
+.skill-card__meta {
+  display: inline-flex;
+  min-inline-size: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--ui-text-muted);
+}
+
+.skill-card__controls {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* The source link spells its name: an icon alone said nothing. */
+.skill-card__source {
+  display: inline-flex;
+  min-block-size: 1.75rem;
+  align-items: center;
+  gap: 0.25rem;
+  padding-inline: 0.375rem;
+  border-radius: var(--ui-radius);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ui-text-muted);
+  transition: color 200ms ease-out, background-color 200ms ease-out;
+}
+
+@media (hover: hover) {
+  .skill-card__source:hover {
+    background: var(--ui-bg-muted);
+    color: var(--ui-text);
+  }
+}
+
+@media (pointer: coarse) {
+  .skill-card__source {
+    min-block-size: 2.75rem;
+  }
+}
+
+/* ---- card ---- */
+.skill-card--card {
+  display: flex;
+  block-size: 100%;
+  flex-direction: column;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  background: var(--ui-bg);
+  padding: 1rem;
+  transition: border-color 200ms ease-out;
+}
+
+@media (hover: hover) {
+  .skill-card--card:hover {
+    border-color: var(--ui-border-accented);
+  }
+}
+
+.skill-card__bar {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-block-start: auto;
+  padding-block-start: 0.875rem;
+}
+
+.skill-card__bar .skill-card__controls {
+  margin-inline-start: auto;
+}
+
+/* ---- row ---- */
+.skill-card--row-shell {
+  container: skill-card-row / inline-size;
+}
+
+/*
+ * Narrow first, stacked like a card without its border: the identity, the
+ * words at full width, then one line of facts with the run pill at its end.
+ */
+.skill-card--row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    'id'
+    'body'
+    'meta'
+    'end';
+  align-items: center;
+  padding: 0.875rem 0.5rem;
+  transition: background-color 200ms ease-out;
+}
+
+.skill-card--ranked {
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas:
+    'rank id'
+    'body body'
+    'meta meta'
+    'end end';
+  column-gap: 0.75rem;
+}
+
+@media (hover: hover) {
+  .skill-card--row:hover {
+    background: var(--ui-bg-elevated);
+  }
+}
+
+.skill-card__row-rank {
+  grid-area: rank;
+}
+
+.skill-card__row-id {
+  grid-area: id;
+}
+
+.skill-card__row-body {
+  grid-area: body;
+  min-inline-size: 0;
+  margin-block-start: 0.625rem;
+}
+
+.skill-card__row-meta {
+  grid-area: meta;
+  margin-block-start: 0.5rem;
+}
+
+.skill-card__row-end {
+  grid-area: end;
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-block-start: 0.5rem;
+}
+
+.skill-card__row-end .skill-card__controls {
+  margin-inline-start: auto;
+}
+
+.skill-card__row-metric {
+  display: inline-flex;
+}
+
+/*
+ * Wide: three zones, who, what and the facts. The facts column has fixed
+ * parts, so every row in a list lines up.
+ */
+@container skill-card-row (min-width: 40rem) {
+  .skill-card--row {
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
+    grid-template-areas:
+      'id body end'
+      'id meta end';
+    grid-template-rows: auto 1fr;
+    column-gap: 1.5rem;
+    align-items: start;
+  }
+
+  .skill-card--ranked {
+    grid-template-columns: 1.25rem minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
+    grid-template-areas:
+      'rank id body end'
+      'rank id meta end';
+    column-gap: 1rem;
+  }
+
+  .skill-card__row-rank {
+    padding-block-start: 0.5rem;
+  }
+
+  .skill-card__row-body {
+    margin-block-start: 0.125rem;
+  }
+
+  .skill-card__row-meta {
+    margin-block-start: 0.375rem;
+  }
+
+  .skill-card__row-end {
+    margin-block-start: 0.125rem;
+  }
+
+  .skill-card__row-metric {
+    justify-content: flex-end;
+    min-inline-size: var(--skill-card-metric);
+  }
+}
+
+/* ---- compact ---- */
+.skill-card--compact {
+  display: flex;
+  min-block-size: 2.75rem;
+  align-items: flex-start;
+  gap: 0.625rem;
+  margin-inline: -0.5rem;
+  padding: 0.5rem;
+  border-radius: var(--ui-radius);
+  transition: background-color 200ms ease-out;
+}
+
+@media (hover: hover) {
+  .skill-card--compact:hover {
+    background: var(--ui-bg-elevated);
+  }
+}
+
+.skill-card--compact > .skill-card__rank {
+  padding-block-start: 0.25rem;
+}
+
+/* Under the name, not under the face. */
+.skill-card--face .skill-card__compact-line {
+  padding-inline-start: 2.375rem;
+}
+
+.skill-card__compact-line {
+  margin-block-start: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skill-card--card,
+  .skill-card--row,
+  .skill-card--compact,
+  .skill-card__source {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .skill-card--card {
+    border-color: CanvasText;
+  }
+}
+</style>
diff --git a/app/components/SkillTable.vue b/app/components/SkillTable.vue
deleted file mode 100644
index 72dd41e9..00000000
--- a/app/components/SkillTable.vue
+++ /dev/null
@@ -1,306 +0,0 @@
-<script setup lang="ts">
-import { githubAvatarProxyUrl } from '#shared/image-proxy'
-import { trendingSkillKey } from '#shared/trending-keys'
-
-/**
- * Dense browse table for skill lists. One row per skill, sized to fit as many
- * skills on screen as the registry can give us. Descriptions stay on a single
- * truncated line; anything longer lives on the skill page.
- */
-interface SkillRow {
-  owner: string
-  repo: string
-  name: string
-  registryPath: string
-  slug: string
-  description?: string | null
-  stars?: number
-  likeCount?: number
-  pushedAt?: number | null
-  modifiedAt?: number | null
-  /** GitHub profile name of the owner, when the owner has been synced. */
-  authorName?: string | null
-  /** SKILL.md on GitHub at the synced revision. */
-  skillFileUrl?: string | null
-}
-
-const {
-  skills,
-  ariaLabel = 'Skills',
-  showHeader = true,
-  metric = 'stars',
-  trendingKeys,
-} = defineProps<{
-  skills: readonly SkillRow[]
-  ariaLabel?: string
-  showHeader?: boolean
-  metric?: 'stars' | 'likes'
-  /**
-   * Skills currently on the trending board, keyed by `trendingSkillKey`.
-   *
-   * Optional so every other caller of this table is unaffected. Omitted means
-   * no flames, not an empty board.
-   */
-  trendingKeys?: ReadonlySet<string>
-}>()
-
-function isTrending(skill: SkillRow): boolean {
-  return trendingKeys?.has(trendingSkillKey(skill.owner, skill.repo, skill.name)) ?? false
-}
-
-const now = useState('render:now', () => Number(new Date()))
-
-function repoSlug(skill: SkillRow): string {
-  return `${skill.owner}/${skill.repo}`
-}
-
-function authorName(skill: SkillRow): string | null {
-  return resolveAuthorName(skill.owner, skill.authorName)
-}
-
-function updatedAt(skill: SkillRow): number | null {
-  return skill.modifiedAt ?? skill.pushedAt ?? null
-}
-
-function updatedLabel(skill: SkillRow): string {
-  const ts = updatedAt(skill)
-  if (ts == null)
-    return '—'
-
-  const days = Math.floor((now.value - ts * 1000) / 86_400_000)
-  if (days < 1)
-    return 'today'
-  if (days < 30)
-    return `${days}d`
-  if (days < 365)
-    return `${Math.floor(days / 30)}mo`
-  return `${Math.floor(days / 365)}y`
-}
-</script>
-
-<template>
-  <div class="skill-table">
-    <div v-if="showHeader" class="skill-table__head" aria-hidden="true">
-      <span>Skill</span>
-      <span>Source</span>
-      <span class="skill-table__col-description">What it does</span>
-      <span class="skill-table__col-metric skill-table__metric-heading">
-        {{ metric === 'likes' ? 'Likes' : 'Stars' }}
-      </span>
-      <span class="skill-table__col-updated">Updated</span>
-    </div>
-
-    <ul class="skill-table__body list-none p-0" :aria-label="ariaLabel">
-      <li v-for="skill in skills" :key="skill.slug" class="relative">
-        <div class="skill-table__row">
-          <NuxtLink
-            :to="skill.registryPath"
-            class="skill-table__link"
-          >
-            <span class="sr-only">/{{ skill.name }} by {{ authorName(skill) ?? skill.owner }}</span>
-          </NuxtLink>
-          <span class="skill-table__skill">
-            <span class="truncate font-mono text-sm">/{{ skill.name }}</span>
-            <!--
-              The spark is decorative, so the meaning goes in text a screen
-              reader can reach. Without it the row says nothing about why this
-              skill differs from the one above it.
-            -->
-            <span v-if="isTrending(skill)" class="shrink-0">
-              <TrendingMark />
-              <span class="sr-only">Trending</span>
-            </span>
-          </span>
-
-          <component
-            :is="skill.skillFileUrl ? 'a' : 'span'"
-            :href="skill.skillFileUrl ?? undefined"
-            :target="skill.skillFileUrl ? '_blank' : undefined"
-            :rel="skill.skillFileUrl ? 'noopener' : undefined"
-            :aria-label="skill.skillFileUrl ? 'Read SKILL.md on GitHub' : undefined"
-            class="skill-table__source"
-          >
-            <img
-              :src="githubAvatarProxyUrl(skill.owner, 40)"
-              alt=""
-              width="20"
-              height="20"
-              class="size-5 shrink-0 rounded-full bg-muted"
-              loading="lazy"
-              decoding="async"
-            >
-            <span class="skill-table__byline">
-              <span
-                v-if="authorName(skill)"
-                class="truncate text-xs text-toned"
-              >{{ authorName(skill) }}</span>
-              <span class="truncate font-mono text-[11px] leading-4 text-muted">{{ repoSlug(skill) }}</span>
-            </span>
-          </component>
-
-          <span class="skill-table__col-description text-xs leading-4 text-muted">
-            {{ skill.description || '—' }}
-          </span>
-
-          <span class="skill-table__col-metric skill-table__metric data-label justify-end">
-            <template v-if="metric === 'likes'">
-              <UIcon name="i-lucide-heart" class="size-3" aria-hidden="true" />
-              {{ skill.likeCount ?? 0 }}
-            </template>
-            <template v-else-if="skill.stars">
-              <UIcon name="i-lucide-star" class="size-3" aria-hidden="true" />
-              {{ formatGithubStars(skill.stars) }}
-            </template>
-            <template v-else>
-              —
-            </template>
-          </span>
-
-          <span class="skill-table__col-updated data-label justify-end">
-            {{ updatedLabel(skill) }}
-          </span>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style scoped>
-.skill-table {
-  min-inline-size: 0;
-  overflow: hidden;
-  border: 1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-}
-
-.skill-table__head,
-.skill-table__row {
-  display: grid;
-  align-items: center;
-  gap: 1rem;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
-  padding-inline: 0.75rem;
-}
-
-.skill-table__head {
-  border-block-end: 1px solid var(--ui-border);
-  background: var(--ui-bg-muted);
-  padding-block: 0.5rem;
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--ui-text-muted);
-}
-
-.skill-table__body > li + li {
-  border-block-start: 1px solid var(--ui-border);
-}
-
-.skill-table__row {
-  min-block-size: 2.75rem;
-  padding-block: 0.4375rem;
-  transition: background-color 200ms ease-out;
-}
-
-.skill-table__skill,
-.skill-table__source {
-  display: flex;
-  min-inline-size: 0;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.skill-table__byline {
-  display: flex;
-  min-inline-size: 0;
-  flex-direction: column;
-}
-
-.skill-table__link {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-}
-
-/* The source is a separate link above the row's Skill detail link. */
-a.skill-table__source {
-  position: relative;
-  min-block-size: 2.75rem;
-  margin-block: -0.4375rem;
-  padding-block: 0.4375rem;
-  z-index: 2;
-  text-decoration: underline;
-  text-decoration-color: transparent;
-  text-underline-offset: 3px;
-  transition: text-decoration-color 150ms ease-out;
-}
-
-a.skill-table__source:hover {
-  text-decoration-color: currentColor;
-}
-
-.skill-table__link:focus-visible,
-a.skill-table__source:focus-visible {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: -2px;
-  border-radius: var(--ui-radius);
-}
-
-.skill-table__col-description,
-.skill-table__col-metric,
-.skill-table__col-updated {
-  display: none;
-}
-
-.skill-table__col-metric,
-.skill-table__col-updated {
-  align-items: center;
-  gap: 0.25rem;
-}
-
-@media (hover: hover) {
-  .skill-table__row:hover {
-    background: var(--ui-bg-elevated);
-  }
-}
-
-@media (min-width: 48rem) {
-  .skill-table__head,
-  .skill-table__row {
-    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 1.6fr) 4rem;
-  }
-
-  .skill-table__head .skill-table__col-description {
-    display: block;
-  }
-
-  .skill-table__row .skill-table__col-description {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-
-  .skill-table__col-metric {
-    display: flex;
-  }
-}
-
-@media (min-width: 64rem) {
-  .skill-table__head,
-  .skill-table__row {
-    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.75fr) minmax(0, 1.7fr) 4rem 4rem;
-  }
-
-  .skill-table__col-updated {
-    display: flex;
-  }
-}
-
-@media (forced-colors: active) {
-  .skill-table {
-    border-color: CanvasText;
-  }
-}
-</style>
diff --git a/app/components/skill-card/_SkillCardIdentity.vue b/app/components/skill-card/_SkillCardIdentity.vue
new file mode 100644
index 00000000..5baa933b
--- /dev/null
+++ b/app/components/skill-card/_SkillCardIdentity.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import type { SkillCardView } from '~/types/skill-card'
+
+/**
+ * Who and what, as one unit: the face, then the name over one quiet byline.
+ * Cards, rows and compact entries all open with it, at three sizes, so a
+ * Skill reads the same wherever it sits.
+ */
+const { view, size, terse = false, accent = true, wrap = false } = defineProps<{
+  view: SkillCardView
+  /** Avatar size in CSS pixels. */
+  size: 28 | 32 | 36
+  /** The person alone, without the Repository, where the entry is too narrow for both. */
+  terse?: boolean
+  /** Ink the trending mark rose. Off where the entry already spends its rose, such as a braille spark. */
+  accent?: boolean
+  /** Let a long name wrap instead of truncating, where the entry has the height for it. */
+  wrap?: boolean
+}>()
+
+/** The author names the owner, so the byline needs only the Repository after it. */
+const where = computed(() => view.author ? view.repo : view.source)
+</script>
+
+<template>
+  <div class="skill-id" :class="[`skill-id--${size}`, wrap && 'skill-id--wrap']">
+    <img
+      v-if="view.byline === 'full'"
+      :src="view.avatar(size)"
+      alt=""
+      :width="size"
+      :height="size"
+      class="skill-id__avatar"
+      loading="lazy"
+      decoding="async"
+    >
+    <div class="skill-id__text">
+      <p class="skill-id__name-line">
+        <NuxtLink :to="view.href" :aria-label="view.label" class="skill-id__name">
+          {{ view.title }}
+        </NuxtLink>
+        <span v-if="view.trending" class="skill-id__flag"><TrendingMark :accent /><span class="sr-only">Trending</span></span>
+        <UBadge v-if="view.official" label="Official" variant="subtle" color="neutral" size="xs" class="skill-id__flag font-mono" />
+      </p>
+      <p v-if="view.byline !== 'none' || $slots.default" class="skill-id__byline" :title="view.byline === 'full' ? view.source : undefined">
+        <template v-if="view.byline === 'full' && terse">
+          <span class="skill-id__person">{{ view.author ?? view.owner }}</span>
+        </template>
+        <template v-else-if="view.byline === 'full'">
+          <template v-if="view.author">
+            <span class="skill-id__person">{{ view.author }}</span>
+            <span class="skill-id__sep" aria-hidden="true">·</span>
+          </template>
+          <span class="skill-id__where">{{ where }}</span>
+        </template>
+        <span v-else-if="view.byline === 'repo'" class="skill-id__where">{{ view.repo }}</span>
+        <slot />
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.skill-id {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.skill-id__avatar {
+  flex: none;
+  inline-size: var(--skill-id-size);
+  block-size: var(--skill-id-size);
+  border: 1px solid var(--ui-border);
+  border-radius: 9999px;
+  background: var(--ui-bg-muted);
+}
+
+.skill-id--28 {
+  --skill-id-size: 1.75rem;
+  gap: 0.625rem;
+}
+
+.skill-id--32 {
+  --skill-id-size: 2rem;
+}
+
+.skill-id--36 {
+  --skill-id-size: 2.25rem;
+}
+
+.skill-id__text {
+  min-inline-size: 0;
+  flex: 1;
+}
+
+.skill-id__name-line {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* The one strong thing in the entry. Stretched over it, so the entry is one link. */
+.skill-id__name {
+  min-inline-size: 0;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  letter-spacing: -0.01em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ui-text-highlighted);
+}
+
+.skill-id__name::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.skill-id--wrap .skill-id__name {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.skill-id--28 .skill-id__name {
+  font-size: 0.8125rem;
+}
+
+.skill-id__flag {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+/* One quiet line: the person a step up from the place, both under the name. */
+.skill-id__byline {
+  display: flex;
+  min-inline-size: 0;
+  align-items: baseline;
+  gap: 0.375rem;
+  margin-block-start: 0.0625rem;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: var(--ui-text-muted);
+  white-space: nowrap;
+}
+
+.skill-id__person {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ui-text-toned);
+}
+
+.skill-id__sep {
+  color: var(--ui-text-dimmed);
+}
+
+.skill-id__where {
+  min-inline-size: 0;
+  flex-shrink: 1000;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/app/components/skill-card/_SkillCardMetric.vue b/app/components/skill-card/_SkillCardMetric.vue
new file mode 100644
index 00000000..3d893cc6
--- /dev/null
+++ b/app/components/skill-card/_SkillCardMetric.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { SkillCardMetricView } from '~/types/skill-card'
+
+/** The one metric an entry shows, as a mono data label. */
+const { metric, short = false } = defineProps<{
+  metric: SkillCardMetricView
+  /** `2 mo. ago` without the `Updated` label, for a column whose place already says it. */
+  short?: boolean
+}>()
+</script>
+
+<template>
+  <span class="skill-metric" :title="metric.title">
+    <template v-if="metric._tag === 'stars'">
+      <UIcon name="i-lucide-star" class="size-3" aria-hidden="true" />{{ metric.text }}<span class="sr-only"> GitHub stars</span>
+    </template>
+    <template v-else-if="metric._tag === 'likes'">
+      <UIcon name="i-lucide-heart" class="size-3" aria-hidden="true" />{{ metric.text }}<span class="sr-only"> likes</span>
+    </template>
+    <template v-else>
+      <template v-if="!short">Updated</template>
+      <NuxtTime :datetime="metric.date" locale="en" relative numeric="auto" :relative-style="short ? 'short' : 'long'" />
+    </template>
+  </span>
+</template>
+
+<style scoped>
+.skill-metric {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--ui-text-muted);
+}
+</style>
diff --git a/app/components/skill-card/_SkillCardRun.vue b/app/components/skill-card/_SkillCardRun.vue
new file mode 100644
index 00000000..e267a3ca
--- /dev/null
+++ b/app/components/skill-card/_SkillCardRun.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { SkillCardView } from '~/types/skill-card'
+
+/**
+ * The run command as a card offers it: the word `run` in the run chip's
+ * material, dashes and a hollow dot, because a run leaves nothing behind.
+ * The full command lives in its title and accessible name, and the click
+ * copies it.
+ *
+ * The dot stays stone until a visitor reaches for it, so a grid of cards
+ * spends no rose at rest.
+ */
+const { run, title } = defineProps<{
+  run: NonNullable<SkillCardView['run']>
+  /** `/name`, for the accessible name. */
+  title: string
+}>()
+
+const marching = ref(false)
+
+async function onCopy() {
+  run.copy()
+  // Restart the march if a second copy lands before the first one ends.
+  marching.value = false
+  await nextTick()
+  requestAnimationFrame(() => {
+    marching.value = true
+  })
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="skill-run"
+    :class="[run.copied && 'skill-run--copied', marching && 'skill-run--march']"
+    :title="run.command"
+    @click.stop.prevent="onCopy"
+  >
+    <svg class="skill-run__edge" aria-hidden="true" focusable="false">
+      <rect width="100%" height="100%" rx="7.5" ry="7.5" @animationend="marching = false" />
+    </svg>
+    <span class="skill-run__dot" aria-hidden="true" />
+    <span aria-hidden="true">{{ run.copied ? 'copied' : 'run' }}</span>
+    <span class="sr-only">Copy run command for {{ title }}</span>
+    <span class="sr-only" aria-live="polite">{{ run.copied ? 'Copied.' : '' }}</span>
+  </button>
+</template>
+
+<style scoped>
+.skill-run {
+  --skill-run-dot: var(--ui-text-dimmed);
+
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.375rem;
+  min-block-size: 1.75rem;
+  padding-inline: 0.5rem;
+  border: 0;
+  border-radius: var(--ui-radius);
+  background: none;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  line-height: 1;
+  color: var(--ui-text-muted);
+  cursor: pointer;
+  transition: background-color 200ms ease-out, color 200ms ease-out;
+}
+
+/* Reaching for the command lights the dot. */
+@media (hover: hover) {
+  .skill-run:hover {
+    --skill-run-dot: var(--brand-dot);
+
+    background: var(--ui-bg-muted);
+    color: var(--ui-text);
+  }
+}
+
+.skill-run:focus-visible,
+.skill-run--copied {
+  --skill-run-dot: var(--brand-dot);
+
+  color: var(--ui-text);
+}
+
+.skill-run:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+.skill-run__edge {
+  position: absolute;
+  inset: 0.5px;
+  inline-size: calc(100% - 1px);
+  block-size: calc(100% - 1px);
+  overflow: visible;
+  pointer-events: none;
+}
+
+.skill-run__edge rect {
+  fill: none;
+  stroke: var(--ui-border-accented);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+}
+
+.skill-run--march .skill-run__edge rect {
+  animation: skill-run-march 600ms linear;
+}
+
+@keyframes skill-run-march {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -14;
+  }
+}
+
+.skill-run__dot {
+  flex: none;
+  inline-size: 6px;
+  block-size: 6px;
+  border: 1.5px solid var(--skill-run-dot);
+  border-radius: 999px;
+  transition: border-color 200ms ease-out;
+}
+
+@media (pointer: coarse) {
+  .skill-run {
+    min-block-size: 2.75rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skill-run,
+  .skill-run__dot {
+    transition: none;
+  }
+
+  .skill-run--march .skill-run__edge rect {
+    animation: none;
+  }
+}
+</style>
diff --git a/app/pages/@[login]/[slug].vue b/app/pages/@[login]/[slug].vue
index b546c9c4..fe46c260 100644
--- a/app/pages/@[login]/[slug].vue
+++ b/app/pages/@[login]/[slug].vue
@@ -61,23 +61,6 @@ defineOgImage('Collection.takumi', {
 }, {
   alt: () => `${collectionOgProps.value?.name ?? 'Collection'} by @${login.value} on skilld`,
 })
-
-function collectionSkillPath(skill: { registryPath: string }) {
-  return skill.registryPath
-}
-
-function collectionSkillLabel(skill: { repo: string, name?: string | null }) {
-  return skill.name ? `/${skill.name}` : skill.repo
-}
-
-function collectionSkillTitle(skill: { repo: string, name?: string | null, displayName?: string | null }) {
-  return skill.displayName || collectionSkillLabel(skill)
-}
-
-function collectionSkillMeta(skill: { owner: string, repo: string, name?: string | null }) {
-  const source = `${skill.owner}/${skill.repo}`
-  return skill.name ? `${collectionSkillLabel(skill)} · ${source}` : source
-}
 </script>
 
 <template>
@@ -232,41 +215,55 @@ function collectionSkillMeta(skill: { owner: string, repo: string, name?: string
           <li
             v-for="(skill, index) in collection.skills"
             :key="`${skill.owner}/${skill.repo}/${skill.position}`"
-            class="group -mx-3 flex gap-3 px-3 py-5 transition-colors duration-200 hover:bg-elevated focus-within:bg-elevated sm:gap-4"
           >
-            <span class="data-label w-6 shrink-0 pt-3 text-right" aria-hidden="true">
-              {{ String(index + 1).padStart(2, '0') }}
-            </span>
-            <img
-              :src="githubAvatarProxyUrl(skill.owner, 64)"
-              alt=""
-              width="32"
-              height="32"
-              class="mt-1.5 size-8 shrink-0 rounded-md border border-default bg-muted"
-              loading="lazy"
-              decoding="async"
+            <SkillCard
+              v-if="skill.name"
+              :skill="{ ...skill, name: skill.name }"
+              layout="row"
+              :rank="index + 1"
+              :note="skill.reason"
+              metric="none"
+              surface="collection"
+            />
+            <!-- A whole Repository, not one Skill, so it keeps its own line. -->
+            <div
+              v-else
+              class="group -mx-3 flex gap-3 px-3 py-5 transition-colors duration-200 hover:bg-elevated focus-within:bg-elevated sm:gap-4"
             >
-            <div class="min-w-0 flex-1">
-              <NuxtLink
-                :to="collectionSkillPath(skill)"
-                class="inline-flex min-h-11 max-w-full items-center gap-2 font-mono text-sm font-medium transition-colors duration-200 hover:text-muted"
-              >
-                <span class="truncate">{{ collectionSkillTitle(skill) }}</span>
-                <UIcon
-                  name="i-lucide-arrow-right"
-                  class="size-4 shrink-0 transition-transform duration-200 group-hover:translate-x-1 group-focus-within:translate-x-1"
-                  aria-hidden="true"
-                />
-              </NuxtLink>
-              <p class="data-label -mt-1 truncate">
-                {{ collectionSkillMeta(skill) }}
-              </p>
-              <p
-                v-if="skill.reason"
-                class="mt-3 max-w-2xl text-sm leading-relaxed text-muted sm:text-base"
+              <span class="data-label w-6 shrink-0 pt-3 text-right" aria-hidden="true">
+                {{ String(index + 1).padStart(2, '0') }}
+              </span>
+              <img
+                :src="githubAvatarProxyUrl(skill.owner, 64)"
+                alt=""
+                width="32"
+                height="32"
+                class="mt-1.5 size-8 shrink-0 rounded-md border border-default bg-muted"
+                loading="lazy"
+                decoding="async"
               >
-                {{ skill.reason }}
-              </p>
+              <div class="min-w-0 flex-1">
+                <NuxtLink
+                  :to="skill.registryPath"
+                  class="inline-flex min-h-11 max-w-full items-center gap-2 font-mono text-sm font-medium transition-colors duration-200 hover:text-muted"
+                >
+                  <span class="truncate">{{ skill.displayName || skill.repo }}</span>
+                  <UIcon
+                    name="i-lucide-arrow-right"
+                    class="size-4 shrink-0 transition-transform duration-200 group-hover:translate-x-1 group-focus-within:translate-x-1"
+                    aria-hidden="true"
+                  />
+                </NuxtLink>
+                <p class="data-label -mt-1 truncate">
+                  {{ skill.owner }}/{{ skill.repo }}
+                </p>
+                <p
+                  v-if="skill.reason"
+                  class="mt-3 max-w-2xl text-sm leading-relaxed text-muted sm:text-base"
+                >
+                  {{ skill.reason }}
+                </p>
+              </div>
             </div>
           </li>
         </ol>
diff --git a/app/pages/@[login]/index.vue b/app/pages/@[login]/index.vue
index 34f456f0..60d5d4c9 100644
--- a/app/pages/@[login]/index.vue
+++ b/app/pages/@[login]/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { OrgProfile } from '#layers/registry/server/api/orgs/[owner].get'
+import type { SkillCardSkill } from '~/types/skill-card'
 import { entityRobots } from '#shared/entity-robots'
 import { avatarProxyUrl } from '#shared/image-proxy'
 import { authorBadgeInput } from '../../utils/author-badge'
@@ -153,6 +154,19 @@ function skillSourceUrl(skill: {
   return `https://github.com/${owner}/${repo}/blob/${branch}/${githubPath(skill.skill_path)}`
 }
 
+function profileSkill(skill: AuthorSkill): SkillCardSkill {
+  return {
+    owner: skill.owner,
+    repo: skill.repo,
+    name: skill.name,
+    registryPath: skill.registryPath,
+    description: cleanDescription(skill.description),
+    likeCount: skill.likeCount,
+    modifiedAt: skill.modified_at,
+    skillFileUrl: skillSourceUrl(skill),
+  }
+}
+
 function timestampDate(timestamp: number): Date {
   return new Date(timestamp * 1000)
 }
@@ -395,66 +409,19 @@ defineOgImage('Curator.takumi', {
             <li
               v-for="s in visibleRepositorySkills(group)"
               :key="s.name"
-              class="border-b border-default py-4"
+              class="border-b border-default"
             >
-              <article class="grid min-w-0 gap-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-start">
-                <div class="min-w-0">
-                  <NuxtLink
-                    :to="s.registryPath"
-                    class="group inline-flex min-h-11 max-w-full items-center gap-2 font-mono text-base font-medium transition-colors hover:text-muted"
-                  >
-                    <span class="truncate">{{ s.display_name || s.name }}</span>
-                    <UIcon
-                      name="i-lucide-arrow-up-right"
-                      class="size-4 shrink-0 text-muted transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
-                      aria-hidden="true"
-                    />
-                  </NuxtLink>
-                  <p
-                    v-if="cleanDescription(s.description)"
-                    class="mt-2 max-w-3xl text-base leading-relaxed text-muted text-pretty line-clamp-2"
-                  >
-                    {{ cleanDescription(s.description) }}
-                  </p>
-                  <p v-if="s.modified_at" class="mt-3 data-label">
-                    Updated
-                    <NuxtTime
-                      :datetime="timestampDate(s.modified_at)"
-                      locale="en"
-                      relative
-                      numeric="auto"
-                      relative-style="long"
-                      :title="true"
-                    />
-                  </p>
-                </div>
-
-                <div class="flex flex-wrap items-center gap-1 md:justify-end">
-                  <LikeButton
-                    :owner="s.owner"
-                    :repo="s.repo"
-                    :name="s.name"
-                    :count="s.likeCount"
-                    variant="inline"
-                  />
-                  <BadgeEmbedControl
-                    v-bind="skillBadgeInput(group, s)"
-                  />
-                  <UButton
-                    v-if="skillSourceUrl(s)"
-                    :to="skillSourceUrl(s)!"
-                    target="_blank"
-                    rel="noopener"
-                    label="Read source"
-                    icon="i-lucide-file-code-2"
-                    color="neutral"
-                    variant="ghost"
-                    size="sm"
-                    class="min-h-11"
-                    :aria-label="`Read ${s.display_name || s.name} SKILL.md on GitHub (opens in new tab)`"
-                  />
-                </div>
-              </article>
+              <SkillCard
+                :skill="profileSkill(s)"
+                layout="row"
+                byline="none"
+                metric="updated"
+                surface="curator-profile"
+              >
+                <template #actions>
+                  <BadgeEmbedControl v-bind="skillBadgeInput(group, s)" />
+                </template>
+              </SkillCard>
             </li>
           </ul>
 
diff --git a/app/pages/@[login]/liked.vue b/app/pages/@[login]/liked.vue
index b10154c2..148852a6 100644
--- a/app/pages/@[login]/liked.vue
+++ b/app/pages/@[login]/liked.vue
@@ -129,16 +129,7 @@ useSeoMeta({
       <SkillCard
         v-for="skill in items"
         :key="skill.slug"
-        :skill="{
-          owner: skill.owner,
-          repo: skill.repo,
-          name: skill.name,
-          registryPath: skill.registryPath,
-          slug: skill.slug,
-          description: skill.description,
-          stars: skill.stars ?? 0,
-          likeCount: skill.likeCount,
-        }"
+        :skill
       />
     </section>
 
diff --git a/app/pages/_playground/skill-cards.vue b/app/pages/_playground/skill-cards.vue
new file mode 100644
index 00000000..441f7817
--- /dev/null
+++ b/app/pages/_playground/skill-cards.vue
@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import type { SkillCardSkill } from '~/types/skill-card'
+
+// Dev-only lab for SkillCard. 404s in production.
+// Every context below is a real embed on the site, with its real props.
+definePageMeta({
+  layout: false,
+  validate: () => import.meta.dev,
+})
+useHead({ title: 'Skill card lab' })
+useSeoMeta({ robots: 'noindex, nofollow' })
+
+// Production rows from /api/tags/frontend and /api/tags/planning on 2026-10-06.
+const SKILLS: SkillCardSkill[] = [
+  { owner: 'pbakaus', repo: 'impeccable', name: 'impeccable', registryPath: '/gh/pbakaus/impeccable', description: 'Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.', stars: 77050, likeCount: 0, modifiedAt: 1791152542, pushedAt: 1791239874, authorName: 'Paul Bakaus', skillFileUrl: 'https://github.com/pbakaus/impeccable/blob/main/cursor-plugin/skills/impeccable/SKILL.md' },
+  { owner: 'anthropics', repo: 'skills', name: 'frontend-design', registryPath: '/gh/anthropics/skills/frontend-design', description: 'Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don\'t read as templated defaults.', stars: 179792, likeCount: 0, modifiedAt: 1788453433, pushedAt: 1791208005, authorName: 'Anthropic', skillFileUrl: 'https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md' },
+  { owner: 'addyosmani', repo: 'agent-skills', name: 'performance-optimization', registryPath: '/gh/addyosmani/agent-skills/performance-optimization', description: 'Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.', stars: 101545, likeCount: 0, modifiedAt: 1791009463, pushedAt: 1791051671, authorName: 'Addy Osmani', skillFileUrl: 'https://github.com/addyosmani/agent-skills/blob/main/skills/performance-optimization/SKILL.md' },
+  { owner: 'mattpocock', repo: 'skills', name: 'grill-me', registryPath: '/gh/mattpocock/skills/grill-me', description: 'A relentless interview to sharpen a plan or design.', stars: 277082, likeCount: 0, modifiedAt: 1786826798, pushedAt: 1791201872, authorName: 'Matt Pocock', skillFileUrl: 'https://github.com/mattpocock/skills/blob/main/skills/productivity/grill-me/SKILL.md' },
+  { owner: 'obra', repo: 'superpowers', name: 'brainstorming', registryPath: '/gh/obra/superpowers/brainstorming', description: 'You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.', stars: 295431, likeCount: 0, modifiedAt: 1789777895, pushedAt: 1790476667, authorName: 'Jesse Vincent', skillFileUrl: 'https://github.com/obra/superpowers/blob/main/skills/brainstorming/SKILL.md' },
+  { owner: 'google', repo: 'skills', name: 'google-cloud-global-frontend-configuration', registryPath: '/gh/google/skills/google-cloud-global-frontend-configuration', description: 'Guides agents through a 6-step discovery process to design and deploy Google Cloud global external Application Load Balancers with Cloud CDN, Cloud Armor, and Service Extensions, mapping workload requirements to best-practice configurations.\nUse when:\n- Designing, configuring, or deploying a Google Cloud global external Application Load Balancer, Cloud CDN, Cloud Armor WAF, or Service Extensions.\n- Discovering existing Google Cloud resources (Cloud Storage, MIGs, GKE, Cloud Run) to use as backends.\n- Generating production-grade Terraform HCL or gcloud CLI scripts for global external Application Load Balancers.\n- Actuating deployments via Infrastructure Manager or bash scripts, including IAM pre-checks.\n- Detecting, analyzing, or reconciling configuration drift on deployed global external Application Load Balancers.\nDon\'t use for:\n- Non-Google Cloud load balancing or security configurations.\n- Purely regional or internal load balancing setups (unless part of a hybrid/failover global design).', stars: 20937, likeCount: 0, modifiedAt: 1789985180, pushedAt: 1790960021, authorName: 'Google', skillFileUrl: 'https://github.com/google/skills/blob/main/skills/cloud/google-cloud-global-frontend-configuration/SKILL.md' },
+  { owner: 'hkuds', repo: 'deepcode', name: 'frontend-design', registryPath: '/gh/hkuds/deepcode/frontend-design', description: 'Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don\'t read as templated defaults.', stars: 16669, likeCount: 0, modifiedAt: 1786525210, pushedAt: 1790582765, authorName: '✨Data Intelligence Lab@HKU✨', skillFileUrl: 'https://github.com/HKUDS/DeepCode/blob/main/core/skills/builtin/frontend-design/SKILL.md' },
+  { owner: 'langflow-ai', repo: 'langflow', name: 'frontend-testing', registryPath: '/gh/langflow-ai/langflow/frontend-testing', description: 'Langflow is a powerful tool for building and deploying AI-powered agents and workflows.', stars: 155513, likeCount: 0, modifiedAt: 1783987538, pushedAt: 1791237561, authorName: 'Langflow', skillFileUrl: 'https://github.com/langflow-ai/langflow/blob/main/.agents/skills/frontend-testing/SKILL.md' },
+  { owner: 'garrytan', repo: 'gstack', name: 'design-html', registryPath: '/gh/garrytan/gstack/design-html', description: 'Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack)', stars: 135354, likeCount: 0, modifiedAt: 1791125921, pushedAt: 1791233723, authorName: 'Garry Tan', skillFileUrl: 'https://github.com/garrytan/gstack/blob/main/design-html/SKILL.md' },
+  { owner: 'leonxlnx', repo: 'taste-skill', name: 'taste-skill', registryPath: '/gh/leonxlnx/taste-skill/taste-skill', description: 'Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.', stars: 92584, likeCount: 0, modifiedAt: 1779823896, pushedAt: 1790413310, authorName: 'Leon Lin', skillFileUrl: 'https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md' },
+  { owner: 'cloudflare', repo: 'cloudflare-os', name: 'frontend-conventions', registryPath: '/gh/cloudflare/cloudflare-os/frontend-conventions', description: 'Use for creating, modifying, moving, or reviewing React frontend code anywhere in packages/*, including Workshop pages, gatekeeper management apps, shared UI, components, hooks, forms, interactions, styling, accessibility, and frontend tests.', stars: 10798, likeCount: 0, modifiedAt: 1790010005, pushedAt: 1791165505, authorName: 'Cloudflare', skillFileUrl: 'https://github.com/cloudflare/cloudflare-os/blob/main/.agents/skills/frontend-conventions/SKILL.md' },
+  { owner: 'zarazhangrui', repo: 'frontend-slides', name: 'frontend-slides', registryPath: '/gh/zarazhangrui/frontend-slides', description: 'Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.', stars: 30131, likeCount: 0, modifiedAt: 1779812977, pushedAt: 1782245299, authorName: 'Zara Zhang', skillFileUrl: 'https://github.com/zarazhangrui/frontend-slides/blob/main/SKILL.md' },
+
+]
+
+function pick(key: string): SkillCardSkill {
+  const skill = SKILLS.find(s => `${s.owner}/${s.repo}/${s.name}` === key)
+  if (!skill)
+    throw new Error(`Lab fixture has no ${key}`)
+  return skill
+}
+
+const impeccable = pick('pbakaus/impeccable/impeccable')
+const frontendDesign = pick('anthropics/skills/frontend-design')
+const perf = pick('addyosmani/agent-skills/performance-optimization')
+const grillMe = pick('mattpocock/skills/grill-me')
+const brainstorming = pick('obra/superpowers/brainstorming')
+const googleCloud = pick('google/skills/google-cloud-global-frontend-configuration')
+const hkuds = pick('hkuds/deepcode/frontend-design')
+const langflowTesting = pick('langflow-ai/langflow/frontend-testing')
+const designHtml = pick('garrytan/gstack/design-html')
+const taste = pick('leonxlnx/taste-skill/taste-skill')
+const cloudflare = pick('cloudflare/cloudflare-os/frontend-conventions')
+const slides = pick('zarazhangrui/frontend-slides/frontend-slides')
+
+const directory = [frontendDesign, impeccable, perf, designHtml, taste, googleCloud]
+const ownerHub = SKILLS.filter(s => s.owner === 'anthropics' || s.owner === 'garrytan').slice(0, 3)
+const browse = [frontendDesign, impeccable, grillMe, brainstorming, perf, langflowTesting, hkuds, cloudflare]
+const trendingKeys = new Set([impeccable.name, grillMe.name])
+const collection = [
+  { skill: impeccable, note: 'The one to start with. It audits a page the way a design lead would, then fixes it.' },
+  { skill: perf, note: 'Pairs with impeccable: it catches what a polish pass makes slower.' },
+  { skill: designHtml, note: 'For the moment a mock has to become real markup.' },
+  { skill: slides, note: null },
+]
+const board = [grillMe, impeccable, brainstorming, frontendDesign]
+const compact = [frontendDesign, impeccable, perf, designHtml, taste, cloudflare, slides, brainstorming]
+const dependencies = ['frontend-design', 'web-artifacts-builder', 'canvas-design', 'theme-factory']
+</script>
+
+<template>
+  <div class="min-h-dvh bg-default text-default">
+    <header class="sticky top-0 z-30 border-b border-default bg-default/95">
+      <div class="mx-auto flex max-w-6xl flex-wrap items-center gap-3 px-4 py-3 sm:px-6">
+        <h1 class="font-mono text-sm font-semibold">
+          Skill card lab
+        </h1>
+        <UColorModeButton class="ml-auto" />
+      </div>
+    </header>
+
+    <main class="mx-auto max-w-6xl space-y-16 px-4 py-10 sm:px-6">
+      <!-- 1. Directory grid: /skills/tag/*, /frameworks/*, /agents/* -->
+      <section class="lab-context">
+        <h2 class="lab-context__title">
+          Directory grid
+        </h2>
+        <p class="lab-context__props">
+          /skills/tag, /frameworks, /agents · layout card · byline full · metric stars · run
+        </p>
+        <div>
+          <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            <SkillCard v-for="skill in directory" :key="skill.registryPath" :skill />
+          </div>
+        </div>
+      </section>
+
+      <!-- 2. Owner hub: /gh/[owner] -->
+      <section class="lab-context">
+        <h2 class="lab-context__title">
+          Owner hub
+        </h2>
+        <p class="lab-context__props">
+          /gh/[owner] · layout card · byline none · metric none (the repository header carries both)
+        </p>
+        <div>
+          <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            <SkillCard v-for="skill in ownerHub" :key="skill.registryPath" :skill byline="none" metric="none" />
+          </div>
+        </div>
+      </section>
+
+      <!-- 3. Repository page: /gh/[owner]/[repo] -->
+      <section class="lab-context">
+        <h2 class="lab-context__title">
+          Repository page
+        </h2>
+        <p class="lab-context__props">
+          /gh/[owner]/[repo] · layout card · byline none · metric updated · footer slot: dependencies
+        </p>
+        <div>
+          <div class="grid gap-3 lg:grid-cols-2">
+            <SkillCard :skill="frontendDesign" byline="none" metric="updated">
+              <template #footer>
+                <div class="flex flex-wrap items-center gap-2">
+                  <span class="data-label">Requires</span>
+                  <NuxtLink
+                    v-for="dep in dependencies.slice(1, 3)"
+                    :key="dep"
+                    to="/"
+                    class="inline-flex min-h-8 items-center rounded-md border border-default px-2 font-mono text-xs text-muted"
+                  >
+                    /{{ dep }}
+                  </NuxtLink>
+                </div>
+              </template>
+            </SkillCard>
+            <SkillCard :skill="slides" byline="none" metric="updated" />
+          </div>
+        </div>
+      </section>
+
+      <!-- 4. Article embed: /compare/* -->
+      <section class="lab-context">
+        <h2 class="lab-context__title">
+          Article embed
+        </h2>
+        <p class="lab-context__props">
+          /compare · layout card · byline full · metric none · source only · note
+        </p>
+        <div>
+          <div class="max-w-prose">
+            <p class="mb-4 text-sm leading-relaxed text-muted">
+              Paul Bakaus wrote the broadest of the three. It reads a page the way a design lead would and names each fix.
+            </p>
+            <SkillCard
+              :skill="impeccable"
+              metric="none"
+              :actions="['source']"
+              note="Use it when the page already works and needs taste, not a rebuild."
+            />
+          </div>
+        </div>
+      </section>
+
+      <!-- 5. Browse list: /skills -->
+      <section class="lab-context">
+        <h2 class="lab-context__title">
+          Browse list
+        </h2>
+        <p class="lab-context__props">
+          /skills (was SkillTable), /me, home feeds · layout row · byline full · metric stars · trending on two rows
+        </p>
+        <div>
+          <ul class="editorial-ledger list-none p-0">
+            <li v-for="skill in browse" :key="skill.registryPath">
+              <SkillCard :skill layout="row" :trending="trendingKeys.has(skill.name)" />
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- 6. Collection ledger: /@login/slug, /skills/best -->
+      <section class="lab-context">
+        <h2 class="lab-context__title">
+          Collection ledger
+        </h2>
+        <p class="lab-context__props">
+          /@[login]/[slug], the reviewed list · layout row · rank · note · metric none
+        </p>
+        <div>
+          <ol class="editorial-ledger list-none p-0">
+            <li v-for="(entry, index) in collection" :key="entry.skill.registryPath">
+              <SkillCard :skill="entry.skill" layout="row" :rank="index + 1" :note="entry.note" metric="none" />
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      <!-- 7. Curator profile and /me: rows with context slots -->
+      <section class="lab-context">
+        <h2 class="lab-context__title">
+          Profile rows
+        </h2>
+        <p class="lab-context__props">
+          /@[login], /me · layout row · byline none · metric updated · meta slot · actions slot (badge)
+        </p>
+        <div>
+          <ul class="editorial-ledger list-none p-0">
+            <li v-for="skill in [grillMe, brainstorming]" :key="skill.registryPath">
+              <SkillCard :skill layout="row" byline="none" metric="updated">
+                <template #meta>
+                  <span class="inline-flex items-center gap-1">
+                    <UIcon name="i-lucide-eye" class="size-3" aria-hidden="true" />
+                    Watching for changes
+                  </span>
+                </template>
+                <template #actions>
+                  <UButton size="xs" color="neutral" variant="ghost" icon="i-lucide-code" aria-label="README badge" />
+                </template>
+              </SkillCard>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- 8. Trending board: /skills/trending, /skills/[track] -->
+      <section class="lab-context">
+        <h2 class="lab-context__title">
+          Trending board
+        </h2>
+        <p class="lab-context__props">
+          /skills/trending, tracks · layout row · rank · trending · meta slot: why it ranked · run
+        </p>
+        <div>
+          <ol class="editorial-ledger list-none p-0">
+            <li v-for="(skill, index) in board" :key="skill.registryPath">
+              <SkillCard :skill layout="row" :rank="index + 1" :trending="index < 2" :actions="['run']">
+                <template v-if="index < 2" #meta>
+                  <BrailleSpark :counts="[0, 1, 3, 2, 5, 8, 13]" period="in 7 days" />
+                </template>
+                <template v-else #meta>
+                  <span>Ranked by GitHub stars</span>
+                </template>
+              </SkillCard>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      <!-- 9. Compact index: trending "Earlier on this board", community, related -->
+      <section class="lab-context">
+        <h2 class="lab-context__title">
+          Compact index
+        </h2>
+        <p class="lab-context__props">
+          trending archive, community top Skill, sidebars · layout compact · byline full · metric stars
+        </p>
+        <div>
+          <div class="grid gap-x-6 gap-y-1 sm:grid-cols-2 lg:grid-cols-4">
+            <SkillCard v-for="skill in compact" :key="skill.registryPath" :skill layout="compact" />
+          </div>
+          <div class="mt-6 grid max-w-sm gap-2">
+            <p class="section-label">
+              Narrow sidebar, description on
+            </p>
+            <SkillCard v-for="skill in compact.slice(0, 3)" :key="skill.registryPath" :skill layout="compact" description />
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.lab-context__title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+}
+
+.lab-context__props {
+  margin-top: 0.25rem;
+  margin-bottom: 1.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ui-text-muted);
+}
+</style>
diff --git a/app/types/skill-card.ts b/app/types/skill-card.ts
new file mode 100644
index 00000000..ca382093
--- /dev/null
+++ b/app/types/skill-card.ts
@@ -0,0 +1,100 @@
+/**
+ * One Skill as every embed reads it. A registry row, a search hit, a feed
+ * item or a presenter answer maps onto this before it renders, so the card
+ * never learns which API it came from.
+ */
+export interface SkillCardSkill {
+  owner: string
+  repo: string
+  /** The Skill directory name, the last segment of `owner/repo/name`. */
+  name: string
+  /** The final public route. Never rebuilt from the other fields. */
+  registryPath: string
+  description?: string | null
+  stars?: number | null
+  likeCount?: number | null
+  /** Epoch seconds of the last change to the Skill. */
+  modifiedAt?: number | null
+  /** Epoch seconds of the last push to the Repository, the fallback for `modifiedAt`. */
+  pushedAt?: number | null
+  /** GitHub profile name of the owner, when the owner has been synced. */
+  authorName?: string | null
+  /** SKILL.md on GitHub at the synced revision. */
+  skillFileUrl?: string | null
+  official?: boolean
+}
+
+/**
+ * Where the card sits.
+ *
+ * - `card`: a tile in a grid, or one embed in an article.
+ * - `row`: one line of a divided list, a ledger or a ranked board.
+ * - `compact`: a dense entry in a sidebar, an index or a menu.
+ */
+export type SkillCardLayout = 'card' | 'row' | 'compact'
+
+/**
+ * How much provenance the card repeats.
+ *
+ * - `full`: avatar, author and `owner/repo`.
+ * - `repo`: the Repository name alone, on a page that already names the owner.
+ * - `none`: nothing, on a page that already names the Repository.
+ */
+export type SkillCardByline = 'full' | 'repo' | 'none'
+
+/** The one metric a card shows. DESIGN.md: one key metric per item. */
+export type SkillCardMetric = 'stars' | 'likes' | 'updated' | 'none'
+
+/**
+ * The controls a card offers.
+ *
+ * - `run`: copy the run command. Running is the default, so it leads.
+ * - `like`: the like heart, which also watches the Skill.
+ * - `source`: open SKILL.md on GitHub.
+ */
+export type SkillCardAction = 'run' | 'like' | 'source'
+
+export type SkillCardMetricView
+  = | { _tag: 'stars', count: number, text: string, title: string }
+    | { _tag: 'likes', count: number, text: string, title: string }
+    | { _tag: 'updated', date: Date, iso: string, title: string }
+
+/**
+ * Everything a take renders, resolved once by `SkillCard`. A take reads this
+ * and never the raw Skill, so every take shows the same facts.
+ */
+export interface SkillCardView {
+  layout: SkillCardLayout
+  owner: string
+  repo: string
+  name: string
+  href: string
+  /** `/name`, the one form a Skill name takes in every embed. */
+  title: string
+  /** Accessible name of the main link. */
+  label: string
+  /** The person, when GitHub knows a name that differs from the handle. */
+  author: string | null
+  /** `owner/repo`. */
+  source: string
+  byline: SkillCardByline
+  /** Square GitHub avatar URL at twice the CSS size. */
+  avatar: (cssSize: number) => string
+  description: string | null
+  /** The metric the context asked for, so a row can drop its metric column when it is `none`. */
+  metricKind: SkillCardMetric
+  /** Null when the metric is off, or unknown for this Skill. */
+  metric: SkillCardMetricView | null
+  /** One-based position in a ranked list. */
+  rank: number | null
+  /** Why the Skill is here, in a curator's or editor's words. */
+  note: string | null
+  trending: boolean
+  official: boolean
+  run: { command: string, copied: boolean, copy: () => void } | null
+  like: { count: number } | null
+  /** SKILL.md on GitHub, when the `source` action is on and the link is known. */
+  sourceUrl: string | null
+  /** Analytics surface of the run copy. */
+  surface: string
+}
diff --git a/app/utils/skill-card-view.ts b/app/utils/skill-card-view.ts
new file mode 100644
index 00000000..00bf7df4
--- /dev/null
+++ b/app/utils/skill-card-view.ts
@@ -0,0 +1,116 @@
+import type {
+  SkillCardAction,
+  SkillCardByline,
+  SkillCardLayout,
+  SkillCardMetric,
+  SkillCardMetricView,
+  SkillCardSkill,
+  SkillCardView,
+} from '~/types/skill-card'
+import { githubAvatarProxyUrl } from '#shared/image-proxy'
+import { skillRunCmd } from '#shared/skill-commands'
+import { formatGithubStars } from './github-stars'
+import { resolveAuthorName } from './skill-byline'
+
+export interface SkillCardOptions {
+  layout: SkillCardLayout
+  byline: SkillCardByline
+  metric: SkillCardMetric
+  /** Undefined takes the layout's default. */
+  actions?: readonly SkillCardAction[]
+  /** Undefined takes the layout's default. */
+  description?: boolean
+  rank?: number | null
+  note?: string | null
+  trending: boolean
+  surface?: string
+}
+
+/** The run copy state, which lives in the component that owns the clipboard. */
+export interface SkillCardRunState {
+  copied: boolean
+  copy: () => void
+}
+
+/**
+ * Cards and rows offer the run command, because running is the default. A
+ * compact entry is a link and nothing else. Likes and SKILL.md are opt-in:
+ * with few accounts yet, a row of zero hearts reads as an empty room.
+ */
+export function defaultSkillCardActions(layout: SkillCardLayout): readonly SkillCardAction[] {
+  return layout === 'compact' ? [] : ['run']
+}
+
+/** A compact entry is a name to scan, so it drops the description unless asked. */
+export function defaultSkillCardDescription(layout: SkillCardLayout): boolean {
+  return layout !== 'compact'
+}
+
+export function skillCardSurface(options: Pick<SkillCardOptions, 'layout' | 'surface'>): string {
+  return options.surface ?? `skill-${options.layout}`
+}
+
+function metricView(skill: SkillCardSkill, metric: SkillCardMetric): SkillCardMetricView | null {
+  if (metric === 'stars') {
+    const count = skill.stars ?? 0
+    // Zero can mean the stars were never fetched, so it stays hidden.
+    if (count <= 0)
+      return null
+    return { _tag: 'stars', count, text: formatGithubStars(count), title: `${count.toLocaleString('en')} GitHub stars` }
+  }
+  if (metric === 'likes') {
+    const count = skill.likeCount ?? 0
+    return { _tag: 'likes', count, text: count.toLocaleString('en'), title: `${count.toLocaleString('en')} ${count === 1 ? 'like' : 'likes'}` }
+  }
+  if (metric === 'updated') {
+    const seconds = skill.modifiedAt || skill.pushedAt
+    if (!seconds)
+      return null
+    const date = new Date(seconds * 1000)
+    if (!Number.isFinite(date.getTime()))
+      return null
+    return {
+      _tag: 'updated',
+      date,
+      iso: date.toISOString(),
+      title: `Updated ${new Intl.DateTimeFormat('en', { dateStyle: 'long', timeZone: 'UTC' }).format(date)}`,
+    }
+  }
+  return null
+}
+
+/**
+ * Everything a take renders, resolved once from the Skill and the context's
+ * options. Every take reads this and never the raw Skill, so two takes cannot
+ * disagree on a fact.
+ */
+export function buildSkillCardView(skill: SkillCardSkill, options: SkillCardOptions, run: SkillCardRunState): SkillCardView {
+  const author = resolveAuthorName(skill.owner, skill.authorName)
+  const actions = options.actions ?? defaultSkillCardActions(options.layout)
+  return {
+    layout: options.layout,
+    owner: skill.owner,
+    repo: skill.repo,
+    name: skill.name,
+    href: skill.registryPath,
+    title: `/${skill.name}`,
+    label: `/${skill.name} by ${author ?? skill.owner}`,
+    author,
+    source: `${skill.owner}/${skill.repo}`,
+    byline: options.byline,
+    avatar: cssSize => githubAvatarProxyUrl(skill.owner, cssSize * 2),
+    description: (options.description ?? defaultSkillCardDescription(options.layout)) ? (skill.description?.trim() || null) : null,
+    metricKind: options.metric,
+    metric: metricView(skill, options.metric),
+    rank: options.rank ?? null,
+    note: options.note?.trim() || null,
+    trending: options.trending,
+    official: skill.official === true,
+    run: actions.includes('run')
+      ? { command: skillRunCmd(skill.owner, skill.repo, skill.name), copied: run.copied, copy: run.copy }
+      : null,
+    like: actions.includes('like') ? { count: skill.likeCount ?? 0 } : null,
+    sourceUrl: actions.includes('source') ? (skill.skillFileUrl ?? null) : null,
+    surface: skillCardSurface(options),
+  }
+}
diff --git a/layers/identity/app/pages/me/index.vue b/layers/identity/app/pages/me/index.vue
index 4ce8ad89..64f597ff 100644
--- a/layers/identity/app/pages/me/index.vue
+++ b/layers/identity/app/pages/me/index.vue
@@ -310,39 +310,33 @@ async function deleteAccount() {
           </div>
 
           <ul v-else-if="likedSkills.length" class="editorial-ledger list-none p-0">
-            <li
-              v-for="skill in likedSkills"
-              :key="skill.slug"
-              class="group flex min-w-0 items-start gap-4 py-5"
-            >
-              <NuxtLink
-                :to="skill.registryPath"
-                class="min-w-0 flex-1 rounded-sm"
+            <li v-for="skill in likedSkills" :key="skill.slug">
+              <SkillCard
+                :skill
+                layout="row"
+                metric="none"
+                :actions="['run', 'source']"
+                surface="account-watching"
               >
-                <span class="flex flex-wrap items-center gap-x-3 gap-y-1">
-                  <span class="font-mono text-base font-medium transition-colors duration-200 group-hover:text-primary">
-                    /{{ skill.name }}
+                <template #meta>
+                  <span class="inline-flex items-center gap-1.5">
+                    <UIcon name="i-lucide-activity" class="size-3.5" aria-hidden="true" />
+                    Watching for changes
                   </span>
-                  <span class="data-label">{{ skill.owner }}/{{ skill.repo }}</span>
-                </span>
-                <span v-if="skill.description" class="mt-2 max-w-3xl line-clamp-2 text-sm leading-relaxed text-muted text-pretty">
-                  {{ skill.description }}
-                </span>
-                <span class="mt-3 inline-flex items-center gap-1.5 font-mono text-sm text-muted">
-                  <UIcon name="i-lucide-activity" class="size-3.5 text-primary" aria-hidden="true" />
-                  Watching for changes
-                </span>
-              </NuxtLink>
-              <UButton
-                color="neutral"
-                variant="ghost"
-                icon="i-lucide-heart-off"
-                class="min-h-11 min-w-11 shrink-0"
-                :aria-label="`Remove ${skill.name} from your skills`"
-                :disabled="removeLikeMutation.pending.value"
-                :loading="removeLikeMutation.pending.value && removingSkill === skill.slug"
-                @click="unlike(skill)"
-              />
+                </template>
+                <template #actions>
+                  <UButton
+                    color="neutral"
+                    variant="ghost"
+                    icon="i-lucide-heart-off"
+                    class="min-h-11 min-w-11 shrink-0"
+                    :aria-label="`Remove ${skill.name} from your skills`"
+                    :disabled="removeLikeMutation.pending.value"
+                    :loading="removeLikeMutation.pending.value && removingSkill === skill.slug"
+                    @click="unlike(skill)"
+                  />
+                </template>
+              </SkillCard>
             </li>
           </ul>
 
diff --git a/layers/marketing/app/components/AgentSkillsPage.vue b/layers/marketing/app/components/AgentSkillsPage.vue
index 7b316f6e..e1c850d0 100644
--- a/layers/marketing/app/components/AgentSkillsPage.vue
+++ b/layers/marketing/app/components/AgentSkillsPage.vue
@@ -96,7 +96,7 @@ useSchemaOrg(computed(() => skills.value.length
 
       <ul v-else class="mt-6 grid list-none grid-cols-1 gap-3 p-0 sm:grid-cols-2">
         <li v-for="skill in skills" :key="skill.slug">
-          <SkillCard :skill show-owner-path />
+          <SkillCard :skill />
         </li>
       </ul>
 
diff --git a/layers/marketing/app/components/FrameworkSkillsDirectory.vue b/layers/marketing/app/components/FrameworkSkillsDirectory.vue
index 6edca189..166cae6d 100644
--- a/layers/marketing/app/components/FrameworkSkillsDirectory.vue
+++ b/layers/marketing/app/components/FrameworkSkillsDirectory.vue
@@ -198,7 +198,7 @@ function showMore() {
 
         <ul class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 list-none p-0">
           <li v-for="skill in visibleSkills" :key="skill.slug">
-            <SkillCard :skill show-owner-path />
+            <SkillCard :skill />
           </li>
         </ul>
 
diff --git a/layers/marketing/app/components/content/ComparisonSkillCard.vue b/layers/marketing/app/components/content/ComparisonSkillCard.vue
index caaf0c56..92794886 100644
--- a/layers/marketing/app/components/content/ComparisonSkillCard.vue
+++ b/layers/marketing/app/components/content/ComparisonSkillCard.vue
@@ -14,28 +14,18 @@ const skill = computed(() => ({
   repo,
   name,
   registryPath: to,
-  slug: `${owner}/${repo}/${name}`,
   description,
   skillFileUrl: source,
 }))
 </script>
 
 <template>
-  <div class="comparison-skill-card not-prose my-5">
+  <div class="not-prose my-5">
     <SkillCard
       :skill="skill"
-      signal="none"
-      show-owner-path
-      :show-copy="false"
-      :show-like="false"
+      metric="none"
+      :actions="['source']"
+      surface="comparison-card"
     />
   </div>
 </template>
-
-<style scoped>
-/* Source links remain easy to reach on touch screens inside the article. */
-.comparison-skill-card :deep(a[target='_blank']) {
-  min-width: 44px;
-  min-height: 44px;
-}
-</style>
diff --git a/layers/marketing/app/pages/skills/best.vue b/layers/marketing/app/pages/skills/best.vue
index 9187b067..abf1945c 100644
--- a/layers/marketing/app/pages/skills/best.vue
+++ b/layers/marketing/app/pages/skills/best.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { githubAvatarProxyUrl } from '#shared/image-proxy'
-
 interface EssentialSkill {
   owner: string
   repo: string
@@ -115,59 +113,18 @@ function trustLabel(tier: string): string {
 
       <ol class="editorial-ledger list-none p-0">
         <li v-for="(skill, index) in skills" :key="`${skill.owner}/${skill.repo}/${skill.name}`">
-          <NuxtLink
-            :to="skill.registryPath"
-            class="best-row group"
+          <SkillCard
+            :skill
+            layout="row"
+            :rank="index + 1"
+            surface="skills-best"
           >
-            <span class="best-rank">{{ String(index + 1).padStart(2, '0') }}</span>
-            <img
-              :src="githubAvatarProxyUrl(skill.owner, 80)"
-              alt=""
-              width="40"
-              height="40"
-              class="size-10 rounded-full border border-default bg-muted"
-              loading="lazy"
-              decoding="async"
-            >
-            <span class="min-w-0 flex-1">
-              <span class="flex flex-wrap items-baseline gap-x-2">
-                <span class="font-medium text-default">{{ skill.displayName || skill.name }}</span>
-                <span class="font-mono text-xs text-muted">{{ skill.owner }}/{{ skill.repo }}</span>
-              </span>
-              <span v-if="skill.description" class="mt-1 line-clamp-2 text-sm leading-relaxed text-muted">
-                {{ skill.description }}
-              </span>
-              <span class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted">
-                <span>{{ trustLabel(skill.trustTier) }}</span>
-                <span class="font-mono tabular-nums">{{ skill.stars.toLocaleString() }} stars</span>
-              </span>
-            </span>
-          </NuxtLink>
+            <template #meta>
+              <span>{{ trustLabel(skill.trustTier) }}</span>
+            </template>
+          </SkillCard>
         </li>
       </ol>
     </section>
   </div>
 </template>
-
-<style scoped>
-.best-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  padding: 1.25rem 0;
-  border-bottom: 1px solid var(--ui-border);
-  transition: opacity 200ms ease;
-}
-
-.best-row:hover {
-  opacity: 0.7;
-}
-
-.best-rank {
-  font-family: var(--font-mono, monospace);
-  font-size: 0.75rem;
-  font-variant-numeric: tabular-nums;
-  color: var(--ui-text-muted);
-  padding-top: 0.75rem;
-}
-</style>
diff --git a/layers/marketing/app/pages/skills/index.vue b/layers/marketing/app/pages/skills/index.vue
index 49244d2e..965283dd 100644
--- a/layers/marketing/app/pages/skills/index.vue
+++ b/layers/marketing/app/pages/skills/index.vue
@@ -2,7 +2,7 @@
 import type { TagFacet } from '#layers/registry/server/api/skills/tags.get'
 import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
 import { githubAvatarProxyUrl } from '#shared/image-proxy'
-import { trendingSkillKeySet } from '#shared/trending-keys'
+import { trendingSkillKey, trendingSkillKeySet } from '#shared/trending-keys'
 import DirectoryCta from '../../components/skills/_DirectoryCta.vue'
 import { isInputFocused, resolveRegistryViewState } from '../../utils/registry-view-state'
 
@@ -506,14 +506,21 @@ function selectOwner(next: string) {
               />
             </div>
 
-            <SkillTable
+            <ul
               v-else-if="registryView._tag === 'ready'"
-              :skills="registryView.data.items"
-              :metric="sort"
-              :trending-keys="trendingKeys"
-              class="directory-table"
+              class="editorial-ledger list-none p-0"
               :aria-label="isFiltering ? 'Matching skills' : 'Top skill from each author'"
-            />
+            >
+              <li v-for="skill in registryView.data.items" :key="skill.slug">
+                <SkillCard
+                  :skill
+                  layout="row"
+                  :metric="sort"
+                  :trending="trendingKeys.has(trendingSkillKey(skill.owner, skill.repo, skill.name))"
+                  surface="skills-directory"
+                />
+              </li>
+            </ul>
 
             <nav
               v-if="totalPages > 1"
@@ -565,17 +572,4 @@ function selectOwner(next: string) {
   content: '';
   pointer-events: none;
 }
-
-.directory-table :deep(.skill-table__col-description) {
-  font-weight: 300;
-}
-
-/* Give identity more room than the summary in this directory's wide layout. */
-@media (min-width: 64rem) {
-  .directory-table :deep(.skill-table__head),
-  .directory-table :deep(.skill-table__row) {
-    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 1.6fr) 3.5rem 3.5rem;
-    gap: 0.75rem;
-  }
-}
 </style>
diff --git a/layers/marketing/app/pages/skills/tag/[slug].vue b/layers/marketing/app/pages/skills/tag/[slug].vue
index b25a599f..aba0e459 100644
--- a/layers/marketing/app/pages/skills/tag/[slug].vue
+++ b/layers/marketing/app/pages/skills/tag/[slug].vue
@@ -110,12 +110,7 @@ defineOgImage('Page.takumi', {
         v-for="s in skills"
         :key="`${s.owner}/${s.name}`"
       >
-        <SkillCard
-          :skill="s"
-          variant="grid"
-          signal="stars"
-          show-owner-path
-        />
+        <SkillCard :skill="s" />
       </li>
     </ul>
 
diff --git a/layers/marketing/app/pages/skills/trending.vue b/layers/marketing/app/pages/skills/trending.vue
index 14751c6a..8c384597 100644
--- a/layers/marketing/app/pages/skills/trending.vue
+++ b/layers/marketing/app/pages/skills/trending.vue
@@ -4,7 +4,6 @@ import type { AdmittedSkillsResponse } from '#layers/registry/server/api/skills/
 import type { SkillsLeaderboardResponse } from '#layers/registry/server/api/skills/leaderboard.get'
 import type { TrendingBoardRow } from '#shared/trending-range'
 import { setResponseHeaders } from 'h3'
-import { githubAvatarProxyUrl } from '#shared/image-proxy'
 import { relativeDay } from '#shared/trending-post'
 import {
   boardPost,
@@ -476,25 +475,7 @@ function formatDay(timestamp: number | null): string | null {
       </p>
       <ul class="earlier-index mt-6 list-none p-0">
         <li v-for="item in earlierRows" :key="item.registryPath">
-          <NuxtLink :to="item.registryPath" class="earlier-entry">
-            <span class="earlier-entry__name">
-              <img
-                :src="githubAvatarProxyUrl(item.owner, 32)"
-                alt=""
-                width="16"
-                height="16"
-                class="size-4 shrink-0 rounded-full bg-muted"
-                loading="lazy"
-                decoding="async"
-              >
-              <span class="truncate">{{ item.name }}</span>
-            </span>
-            <span class="earlier-entry__meta">
-              <span class="truncate">{{ item.owner }}/{{ item.repo }}</span>
-              <span v-if="item.stars" class="shrink-0 tabular-nums">{{ `${item.stars.toLocaleString()} ★` }}</span>
-            </span>
-            <span v-if="item.description" class="earlier-entry__description">{{ item.description }}</span>
-          </NuxtLink>
+          <SkillCard :skill="item" layout="compact" surface="trending-archive" />
         </li>
       </ul>
       <nav
@@ -557,50 +538,6 @@ function formatDay(timestamp: number | null): string | null {
   border-top: 1px solid var(--ui-border);
 }
 
-.earlier-entry {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  min-block-size: 2.75rem;
-  padding-block: 0.75rem;
-}
-
-.earlier-entry__name {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  min-inline-size: 0;
-  font-weight: 500;
-  color: var(--ui-text-highlighted);
-  transition: opacity 200ms;
-}
-
-@media (hover: hover) {
-  .earlier-entry:hover .earlier-entry__name {
-    opacity: 0.7;
-  }
-}
-
-.earlier-entry__meta {
-  display: flex;
-  gap: 0.625rem;
-  min-inline-size: 0;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--ui-text-muted);
-}
-
-.earlier-entry__description {
-  display: -webkit-box;
-  overflow: hidden;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: var(--ui-text-muted);
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-}
-
 .page-link {
   display: inline-flex;
   align-items: center;
diff --git a/layers/registry/app/pages/gh/[owner]/[repo]/_RepoSkillCard.vue b/layers/registry/app/pages/gh/[owner]/[repo]/_RepoSkillCard.vue
deleted file mode 100644
index fefabd74..00000000
--- a/layers/registry/app/pages/gh/[owner]/[repo]/_RepoSkillCard.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<script setup lang="ts">
-interface RepoSkill {
-  owner: string
-  repo: string
-  name: string
-  registryPath: string
-  description?: string | null
-  dependencies?: string[]
-  modifiedAt?: number | null
-  likeCount?: number
-}
-
-const { skill } = defineProps<{
-  skill: RepoSkill
-}>()
-
-interface ParsedDate {
-  date: Date
-  iso: string
-  title: string
-}
-
-function parseDate(timestamp: number | null | undefined): ParsedDate | null {
-  if (!timestamp)
-    return null
-
-  const date = new Date(timestamp * 1000)
-  if (!Number.isFinite(date.getTime()))
-    return null
-
-  return {
-    date,
-    iso: date.toISOString(),
-    title: new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(date),
-  }
-}
-
-const modifiedAt = computed(() => parseDate(skill.modifiedAt))
-const modifiedAtAgo = useTimeAgo(computed(() => modifiedAt.value?.date ?? new Date(0)), {
-  scheduler: cb => useIntervalFn(cb, 60_000),
-})
-const visibleDependencies = computed(() => skill.dependencies?.slice(0, 3) ?? [])
-const hiddenDependencies = computed(() => skill.dependencies?.slice(3) ?? [])
-const hiddenDependenciesLabel = computed(() => hiddenDependencies.value.map(name => `/${name}`).join(', '))
-</script>
-
-<template>
-  <article class="group relative flex h-full min-h-36 flex-col rounded-xl border border-default p-4 transition-colors duration-200 hover:border-[var(--ui-text-muted)]">
-    <NuxtLink
-      :to="skill.registryPath"
-      :aria-label="`/${skill.name}`"
-      class="block flex-1 pr-20 after:absolute after:inset-0"
-    >
-      <h3 class="truncate font-mono text-base font-medium">
-        /{{ skill.name }}
-      </h3>
-      <p
-        v-if="skill.description"
-        class="mt-2 line-clamp-3 text-sm leading-relaxed text-muted"
-      >
-        {{ skill.description }}
-      </p>
-    </NuxtLink>
-    <div class="absolute right-3 top-3 z-10">
-      <LikeButton
-        :owner="skill.owner"
-        :repo="skill.repo"
-        :name="skill.name"
-        :count="skill.likeCount ?? 0"
-        variant="card"
-      />
-    </div>
-    <div
-      v-if="modifiedAt || skill.dependencies?.length"
-      class="pointer-events-none relative z-10 mt-4 flex flex-col items-start gap-3 border-t border-default pt-3"
-    >
-      <time
-        v-if="modifiedAt"
-        class="data-label inline-flex items-center gap-1.5"
-        :datetime="modifiedAt.iso"
-        :title="`Last updated ${modifiedAt.title}`"
-      >
-        <UIcon
-          name="i-lucide-clock"
-          class="size-3.5"
-          aria-hidden="true"
-        />
-        Updated {{ modifiedAtAgo }}
-      </time>
-      <div
-        v-if="skill.dependencies?.length"
-        class="flex w-full max-w-full flex-wrap items-center gap-2"
-      >
-        <span class="data-label inline-flex items-center gap-1.5">
-          <UIcon
-            name="i-lucide-workflow"
-            class="size-3.5"
-            aria-hidden="true"
-          />
-          Requires
-        </span>
-        <NuxtLink
-          v-for="dependency in visibleDependencies"
-          :key="dependency"
-          :to="repoSkillPath(skill.owner, skill.repo, dependency)"
-          class="pointer-events-auto inline-flex min-h-8 max-w-full items-center rounded-md border border-default px-2 font-mono text-xs text-muted transition-colors hover:border-[var(--ui-text-muted)] hover:text-default"
-        >
-          <span class="truncate">/{{ dependency }}</span>
-        </NuxtLink>
-        <UTooltip
-          v-if="hiddenDependencies.length"
-          :text="hiddenDependenciesLabel"
-        >
-          <span
-            class="pointer-events-auto inline-flex min-h-8 items-center px-1 font-mono text-xs text-muted transition-colors hover:text-default"
-            tabindex="0"
-            :aria-label="`${hiddenDependencies.length} more dependencies: ${hiddenDependenciesLabel}`"
-          >
-            +{{ hiddenDependencies.length }}
-          </span>
-        </UTooltip>
-      </div>
-    </div>
-  </article>
-</template>
diff --git a/layers/registry/app/pages/gh/[owner]/[repo]/_RepoSkillDependencies.vue b/layers/registry/app/pages/gh/[owner]/[repo]/_RepoSkillDependencies.vue
new file mode 100644
index 00000000..b883a478
--- /dev/null
+++ b/layers/registry/app/pages/gh/[owner]/[repo]/_RepoSkillDependencies.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+/** The Skills one Skill in this Repository requires, as links. */
+const { owner, repo, dependencies } = defineProps<{
+  owner: string
+  repo: string
+  dependencies: readonly string[]
+}>()
+
+const visible = computed(() => dependencies.slice(0, 3))
+const hidden = computed(() => dependencies.slice(3))
+const hiddenLabel = computed(() => hidden.value.map(name => `/${name}`).join(', '))
+</script>
+
+<template>
+  <div class="flex w-full max-w-full flex-wrap items-center gap-2">
+    <span class="data-label inline-flex items-center gap-1.5">
+      <UIcon name="i-lucide-workflow" class="size-3.5" aria-hidden="true" />
+      Requires
+    </span>
+    <NuxtLink
+      v-for="dependency in visible"
+      :key="dependency"
+      :to="repoSkillPath(owner, repo, dependency)"
+      class="inline-flex min-h-8 max-w-full items-center rounded-md border border-default px-2 font-mono text-xs text-muted transition-colors hover:border-[var(--ui-text-muted)] hover:text-default"
+    >
+      <span class="truncate">/{{ dependency }}</span>
+    </NuxtLink>
+    <UTooltip v-if="hidden.length" :text="hiddenLabel">
+      <span
+        class="inline-flex min-h-8 items-center px-1 font-mono text-xs text-muted transition-colors hover:text-default"
+        tabindex="0"
+        :aria-label="`${hidden.length} more dependencies: ${hiddenLabel}`"
+      >
+        +{{ hidden.length }}
+      </span>
+    </UTooltip>
+  </div>
+</template>
diff --git a/layers/registry/app/pages/gh/[owner]/[repo]/index.vue b/layers/registry/app/pages/gh/[owner]/[repo]/index.vue
index 48e86012..0fccf830 100644
--- a/layers/registry/app/pages/gh/[owner]/[repo]/index.vue
+++ b/layers/registry/app/pages/gh/[owner]/[repo]/index.vue
@@ -7,7 +7,7 @@ import { entityRobots } from '#shared/entity-robots'
 import { avatarProxyUrl } from '#shared/image-proxy'
 import { resolveMissingRepoRedirect } from '../../../../utils/missing-repo-recovery'
 import { parseRepoSkillSort, REPO_SKILL_SORT_OPTIONS, sortRepoSkills } from '../../../../utils/repo-skill-layout'
-import RepoSkillCard from './_RepoSkillCard.vue'
+import RepoSkillDependencies from './_RepoSkillDependencies.vue'
 import RepoSparkline from './_RepoSparkline.vue'
 
 const route = useRoute()
@@ -611,11 +611,17 @@ useHead(computed(() => ({
             v-else-if="sortedRepoSkills.length && !groupedSkills"
             class="grid gap-3"
           >
-            <RepoSkillCard
+            <SkillCard
               v-for="skill in sortedRepoSkills"
               :key="skill.slug"
-              :skill="skill"
-            />
+              :skill
+              byline="none"
+              metric="updated"
+            >
+              <template v-if="skill.dependencies?.length" #footer>
+                <RepoSkillDependencies :owner="skill.owner" :repo="skill.repo" :dependencies="skill.dependencies" />
+              </template>
+            </SkillCard>
           </div>
           <div v-else-if="skillGroups.length" class="space-y-8">
             <section
@@ -635,11 +641,17 @@ useHead(computed(() => ({
                 </span>
               </div>
               <div class="mt-3 grid gap-3 lg:grid-cols-2">
-                <RepoSkillCard
+                <SkillCard
                   v-for="skill in group.skills"
                   :key="skill.slug"
-                  :skill="skill"
-                />
+                  :skill
+                  byline="none"
+                  metric="updated"
+                >
+                  <template v-if="skill.dependencies?.length" #footer>
+                    <RepoSkillDependencies :owner="skill.owner" :repo="skill.repo" :dependencies="skill.dependencies" />
+                  </template>
+                </SkillCard>
               </div>
             </section>
           </div>
diff --git a/layers/registry/app/pages/gh/[owner]/index.vue b/layers/registry/app/pages/gh/[owner]/index.vue
index 7213e782..39c77738 100644
--- a/layers/registry/app/pages/gh/[owner]/index.vue
+++ b/layers/registry/app/pages/gh/[owner]/index.vue
@@ -533,7 +533,7 @@ useSchemaOrg(computed(() => {
                 v-for="skill in skillsByRepo.get(repo.repo) ?? []"
                 :key="skill.slug"
               >
-                <SkillCard :skill />
+                <SkillCard :skill byline="none" metric="none" />
               </li>
             </ul>
           </div>
diff --git a/test/a11y.spec.ts b/test/a11y.spec.ts
index 8ba32428..eeca8371 100644
--- a/test/a11y.spec.ts
+++ b/test/a11y.spec.ts
@@ -235,24 +235,27 @@ describe('accessibility: components', () => {
     wrapper.unmount()
   })
 
-  it('skillTable has no violations', async () => {
+  it.each(['card', 'row', 'compact'] as const)('skillCard has no violations as a %s', async (layout) => {
     const container = createIsolatedContainer()
     const wrapper = await mountSuspended(
-      await loadComponent('SkillTable'),
+      await loadComponent('SkillCard'),
       {
         attachTo: container,
         props: {
-          skills: [{
+          skill: {
             owner: 'antfu',
             repo: 'skills',
             name: 'vite',
-            slug: 'antfu/vite',
+            registryPath: '/gh/antfu/skills/vite',
             description: 'Vite configuration conventions.',
             stars: 1200,
-            modifiedAt: 1_760_000_000,
+            authorName: 'Anthony Fu',
             official: true,
-          }],
-          ariaLabel: 'All skills',
+          },
+          layout,
+          rank: 1,
+          note: 'The one to start with.',
+          actions: ['run', 'source'],
         },
       },
     )
@@ -636,7 +639,9 @@ describe('accessibility: component coverage', () => {
     'TextureFileMinimap.client', // Decorative client-only canvas, hidden from screen readers
     'OgBrand', // OG image component, rendered server-side only
     'OgLayout', // OG image layout component, rendered server-side only
-    'SkillCard', // Tested at page level
+    'skill-card/_SkillCardIdentity', // A part of SkillCard, scanned inside every SkillCard test
+    'skill-card/_SkillCardMetric', // A part of SkillCard, scanned inside every SkillCard test
+    'skill-card/_SkillCardRun', // A part of SkillCard, scanned inside every SkillCard test
     'SkillReceiptsBadge', // Tested at page level
     'StatsBars', // Decorative chart, tested at page level
     'StatsHBar', // Decorative chart, tested at page level
@@ -662,7 +667,7 @@ describe('accessibility: component coverage', () => {
 
   it('records only the components an axe test actually mounted', () => {
     expect([...testedComponents]).toContain('AgentTargets')
-    expect([...testedComponents]).not.toContain('SkillCard')
+    expect([...testedComponents]).not.toContain('SkillReceiptsBadge')
   })
 
   it('covers every component with an axe test or a documented skip', () => {
diff --git a/test/unit/install-copy.test.ts b/test/unit/install-copy.test.ts
index cd6fd5ed..d3bffc65 100644
--- a/test/unit/install-copy.test.ts
+++ b/test/unit/install-copy.test.ts
@@ -50,15 +50,14 @@ describe('install copy', () => {
       await import('../../app/components/SkillCard.vue').then(module => module.default),
       {
         props: {
-          skill: { owner: 'antfu', repo: 'skills', name: 'vite', slug: 'antfu/vite', stars: 12 },
-          showLike: false,
+          skill: { owner: 'antfu', repo: 'skills', name: 'vite', registryPath: '/gh/antfu/skills/vite', stars: 12 },
         },
       },
     )
 
     const copyButton = wrapper.findAll('button')
-      .find(button => button.attributes('aria-label')?.includes('Copy run command'))
-    expect(copyButton, 'skill card copy button missing its run-command label').toBeTruthy()
+      .find(button => button.text().includes('Copy run command for /vite'))
+    expect(copyButton, 'skill card run pill missing its accessible name').toBeTruthy()
 
     await copyButton!.trigger('click')
     await flushPromises()
diff --git a/test/unit/repo-skill-dependencies-card.test.ts b/test/unit/repo-skill-dependencies-card.test.ts
deleted file mode 100644
index 0ed386d0..00000000
--- a/test/unit/repo-skill-dependencies-card.test.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { describe, expect, it } from 'vitest'
-import RepoSkillCard from '../../layers/registry/app/pages/gh/[owner]/[repo]/_RepoSkillCard.vue'
-
-const baseSkill = {
-  owner: 'antfu',
-  repo: 'skills',
-  name: 'nuxt',
-  description: 'Build full-stack Vue applications with Nuxt.',
-  modifiedAt: 1_700_000_000,
-}
-
-// LikeButton owns its own auth and fetch wiring, and is not what this card decides.
-// UTooltip needs a TooltipProvider ancestor that only the app shell installs; the
-// stub keeps its text observable without mounting the shell.
-const mountOptions = {
-  global: {
-    stubs: {
-      LikeButton: { template: '<span data-testid="like-button" />' },
-      UTooltip: { props: ['text'], template: '<div :data-tooltip="text"><slot /></div>' },
-    },
-  },
-}
-
-function mountCard(skill: Record<string, unknown>) {
-  return mountSuspended(RepoSkillCard, { ...mountOptions, props: { skill: { ...baseSkill, ...skill } } })
-}
-
-function dependencyLinks(wrapper: Awaited<ReturnType<typeof mountCard>>) {
-  return wrapper.findAll('a')
-    .filter(link => link.attributes('aria-label') === undefined)
-    .map(link => ({ text: link.text(), href: link.attributes('href') }))
-}
-
-describe('repository skill dependency links', () => {
-  it('links each dependency to its canonical skill page', async () => {
-    const wrapper = await mountCard({ dependencies: ['tailwind', 'typescript'] })
-
-    expect(wrapper.text()).toContain('Requires')
-    expect(dependencyLinks(wrapper)).toEqual([
-      { text: '/tailwind', href: '/gh/antfu/skills/tailwind' },
-      { text: '/typescript', href: '/gh/antfu/skills/typescript' },
-    ])
-
-    wrapper.unmount()
-  })
-
-  it('keeps dependency links outside the card-wide primary link so they stay clickable', async () => {
-    const wrapper = await mountCard({ dependencies: ['tailwind'] })
-
-    const primary = wrapper.get('a[aria-label="/nuxt"]')
-    const dependency = wrapper.get('a[href="/gh/antfu/skills/tailwind"]')
-
-    expect(primary.element.contains(dependency.element)).toBe(false)
-    expect(dependency.classes()).toContain('pointer-events-auto')
-
-    wrapper.unmount()
-  })
-
-  it('caps visible dependencies at three and summarises the rest behind one control', async () => {
-    const wrapper = await mountCard({
-      dependencies: ['a', 'b', 'c', 'd', 'e'],
-    })
-
-    expect(dependencyLinks(wrapper).map(link => link.text)).toEqual(['/a', '/b', '/c'])
-    const overflow = wrapper.get('[aria-label$="more dependencies: /d, /e"]')
-    expect(overflow.text()).toBe('+2')
-    expect(overflow.attributes('aria-label')).toBe('2 more dependencies: /d, /e')
-    expect(wrapper.get('[data-tooltip]').attributes('data-tooltip')).toBe('/d, /e')
-
-    wrapper.unmount()
-  })
-
-  it('shows no overflow control when every dependency fits', async () => {
-    const wrapper = await mountCard({ dependencies: ['a', 'b', 'c'] })
-
-    expect(wrapper.find('[aria-label$="more dependencies"]').exists()).toBe(false)
-    expect(wrapper.text()).not.toContain('+')
-
-    wrapper.unmount()
-  })
-
-  it('omits the whole metadata footer when there is nothing to report', async () => {
-    const wrapper = await mountCard({ dependencies: [], modifiedAt: null })
-
-    expect(wrapper.text()).not.toContain('Requires')
-    expect(wrapper.find('time').exists()).toBe(false)
-
-    wrapper.unmount()
-  })
-})
-
-describe('repository skill card metadata', () => {
-  it('reports a per-skill update time as a relative machine-readable value', async () => {
-    const wrapper = await mountCard({})
-
-    const time = wrapper.get('time')
-    expect(time.attributes('datetime')).toBe(new Date(1_700_000_000 * 1000).toISOString())
-    expect(time.text()).toMatch(/^Updated .+ago$/)
-    expect(wrapper.text()).not.toContain('Added')
-
-    wrapper.unmount()
-  })
-
-  it('ignores an unusable timestamp instead of rendering an invalid date', async () => {
-    const wrapper = await mountCard({ modifiedAt: 0 })
-
-    expect(wrapper.find('time').exists()).toBe(false)
-
-    wrapper.unmount()
-  })
-
-  it('carries no repo-level trust or star metadata', async () => {
-    const wrapper = await mountCard({ dependencies: ['tailwind'] })
-
-    expect(wrapper.text()).not.toMatch(/stars?/i)
-    expect(wrapper.html()).not.toContain('trustTier')
-
-    wrapper.unmount()
-  })
-})
diff --git a/test/unit/repo-skill-dependencies.test.ts b/test/unit/repo-skill-dependencies.test.ts
new file mode 100644
index 00000000..ec4abc86
--- /dev/null
+++ b/test/unit/repo-skill-dependencies.test.ts
@@ -0,0 +1,59 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import RepoSkillDependencies from '../../layers/registry/app/pages/gh/[owner]/[repo]/_RepoSkillDependencies.vue'
+
+// UTooltip needs a TooltipProvider ancestor that only the app shell installs; the
+// stub keeps its text observable without mounting the shell.
+const mountOptions = {
+  global: {
+    stubs: {
+      UTooltip: { props: ['text'], template: '<div :data-tooltip="text"><slot /></div>' },
+    },
+  },
+}
+
+function mountDependencies(dependencies: string[]) {
+  return mountSuspended(RepoSkillDependencies, {
+    ...mountOptions,
+    props: { owner: 'antfu', repo: 'skills', dependencies },
+  })
+}
+
+function links(wrapper: Awaited<ReturnType<typeof mountDependencies>>) {
+  return wrapper.findAll('a').map(link => ({ text: link.text(), href: link.attributes('href') }))
+}
+
+describe('repository skill dependency links', () => {
+  it('links each dependency to its canonical skill page', async () => {
+    const wrapper = await mountDependencies(['tailwind', 'typescript'])
+
+    expect(wrapper.text()).toContain('Requires')
+    expect(links(wrapper)).toEqual([
+      { text: '/tailwind', href: '/gh/antfu/skills/tailwind' },
+      { text: '/typescript', href: '/gh/antfu/skills/typescript' },
+    ])
+
+    wrapper.unmount()
+  })
+
+  it('caps visible dependencies at three and summarises the rest behind one control', async () => {
+    const wrapper = await mountDependencies(['a', 'b', 'c', 'd', 'e'])
+
+    expect(links(wrapper).map(link => link.text)).toEqual(['/a', '/b', '/c'])
+    const overflow = wrapper.get('[aria-label$="more dependencies: /d, /e"]')
+    expect(overflow.text()).toBe('+2')
+    expect(overflow.attributes('aria-label')).toBe('2 more dependencies: /d, /e')
+    expect(wrapper.get('[data-tooltip]').attributes('data-tooltip')).toBe('/d, /e')
+
+    wrapper.unmount()
+  })
+
+  it('shows no overflow control when every dependency fits', async () => {
+    const wrapper = await mountDependencies(['a', 'b', 'c'])
+
+    expect(wrapper.find('[aria-label$="more dependencies"]').exists()).toBe(false)
+    expect(wrapper.text()).not.toContain('+')
+
+    wrapper.unmount()
+  })
+})
diff --git a/test/unit/skill-card-condensed.test.ts b/test/unit/skill-card-condensed.test.ts
deleted file mode 100644
index 285392fb..00000000
--- a/test/unit/skill-card-condensed.test.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { describe, expect, it } from 'vitest'
-import SkillCard from '../../app/components/SkillCard.vue'
-
-const skill = {
-  owner: 'antfu',
-  repo: 'skills',
-  name: 'nuxt',
-  slug: 'antfu/skills/nuxt',
-  description: 'Build full-stack Vue applications with Nuxt.',
-  stars: 1234,
-  modifiedAt: 1_700_000_000,
-}
-
-// LikeButton owns its own auth and fetch wiring; stubbing it keeps this file
-// about what SkillCard decides to render.
-const mountOptions = {
-  global: { stubs: { LikeButton: { template: '<span data-testid="like-button" />' } } },
-}
-
-function mountCard(props: Record<string, unknown>) {
-  return mountSuspended(SkillCard, { ...mountOptions, props: { skill, ...props } })
-}
-
-describe('skillCard variants', () => {
-  it('defaults to the grid variant', async () => {
-    const wrapper = await mountCard({})
-
-    expect(wrapper.get('a').attributes('aria-label')).toBe('/nuxt by antfu')
-
-    wrapper.unmount()
-  })
-
-  it('drops the owner from the condensed link label, since the row already sits under one owner', async () => {
-    const condensed = await mountCard({ variant: 'condensed' })
-    const grid = await mountCard({ variant: 'grid' })
-
-    expect(condensed.get('a').attributes('aria-label')).toBe('/nuxt')
-    expect(grid.get('a').attributes('aria-label')).toBe('/nuxt by antfu')
-
-    condensed.unmount()
-    grid.unmount()
-  })
-
-  it('suppresses the repeated owner path in condensed mode even when asked for it', async () => {
-    const condensed = await mountCard({ variant: 'condensed', showOwnerPath: true })
-    const grid = await mountCard({ variant: 'grid', showOwnerPath: true })
-
-    expect(condensed.text()).not.toContain('antfu')
-    expect(grid.text()).toContain('antfu')
-
-    condensed.unmount()
-    grid.unmount()
-  })
-
-  it('omits the heart in condensed mode, which reserves no room for a second control', async () => {
-    const condensed = await mountCard({ variant: 'condensed' })
-    const grid = await mountCard({ variant: 'grid' })
-
-    expect(condensed.find('[data-testid="like-button"]').exists()).toBe(false)
-    expect(grid.find('[data-testid="like-button"]').exists()).toBe(true)
-
-    condensed.unmount()
-    grid.unmount()
-  })
-
-  it('honours showLike: false on a variant that would otherwise show the heart', async () => {
-    const wrapper = await mountCard({ variant: 'grid', showLike: false })
-
-    expect(wrapper.find('[data-testid="like-button"]').exists()).toBe(false)
-
-    wrapper.unmount()
-  })
-})
-
-describe('skillCard signal', () => {
-  it('reports GitHub stars, and nothing else, as the automatic signal', async () => {
-    const wrapper = await mountCard({})
-
-    const signal = wrapper.get('[title$="GitHub stars"]')
-    expect(signal.attributes('title')).toBe('1,234 GitHub stars')
-    expect(wrapper.text()).not.toContain('installs')
-
-    wrapper.unmount()
-  })
-
-  it('shows no signal for an unstarred skill', async () => {
-    const wrapper = await mountSuspended(SkillCard, {
-      ...mountOptions,
-      props: { skill: { ...skill, stars: 0 } },
-    })
-
-    expect(wrapper.find('[title$="GitHub stars"]').exists()).toBe(false)
-
-    wrapper.unmount()
-  })
-
-  it('can be switched off entirely', async () => {
-    const wrapper = await mountCard({ signal: 'none' })
-
-    expect(wrapper.find('[title$="GitHub stars"]').exists()).toBe(false)
-
-    wrapper.unmount()
-  })
-})
-
-describe('skillCard timestamps', () => {
-  it('renders a machine-readable time element rather than a server-formatted string', async () => {
-    const wrapper = await mountCard({ variant: 'grid', timestampLabel: 'Updated' })
-
-    const time = wrapper.get('time')
-    expect(time.attributes('datetime')).toBe(new Date(1_700_000_000 * 1000).toISOString())
-
-    wrapper.unmount()
-  })
-
-  it('defaults condensed rows to a relative time and grid cards to an absolute date', async () => {
-    const condensed = await mountCard({ variant: 'condensed', timestampLabel: 'Updated' })
-    const grid = await mountCard({ variant: 'grid', timestampLabel: 'Updated' })
-
-    expect(condensed.get('time').text()).toMatch(/ago$/)
-    expect(grid.get('time').text()).toMatch(/^\w+ \d+, \d{4}$/)
-
-    condensed.unmount()
-    grid.unmount()
-  })
-
-  it('lets a caller override the format the variant would pick', async () => {
-    const wrapper = await mountCard({
-      variant: 'condensed',
-      timestampLabel: 'Updated',
-      timestampFormat: 'absolute',
-    })
-
-    expect(wrapper.get('time').text()).toMatch(/^\w+ \d+, \d{4}$/)
-
-    wrapper.unmount()
-  })
-})
diff --git a/test/unit/skill-card-view.test.ts b/test/unit/skill-card-view.test.ts
new file mode 100644
index 00000000..f3c0577a
--- /dev/null
+++ b/test/unit/skill-card-view.test.ts
@@ -0,0 +1,105 @@
+import type { SkillCardSkill } from '../../app/types/skill-card'
+import type { SkillCardOptions } from '../../app/utils/skill-card-view'
+import { describe, expect, it } from 'vitest'
+import { buildSkillCardView } from '../../app/utils/skill-card-view'
+
+const skill: SkillCardSkill = {
+  owner: 'antfu',
+  repo: 'skills',
+  name: 'nuxt',
+  registryPath: '/gh/antfu/skills/nuxt',
+  description: '  Build full-stack Vue applications with Nuxt.  ',
+  stars: 12_345,
+  likeCount: 1,
+  modifiedAt: 1_700_000_000,
+  authorName: 'Anthony Fu',
+  skillFileUrl: 'https://github.com/antfu/skills/blob/main/skills/nuxt/SKILL.md',
+}
+
+const card: SkillCardOptions = { layout: 'card', byline: 'full', metric: 'stars', trending: false }
+const run = { copied: false, copy: () => {} }
+
+function view(overrides: Partial<SkillCardSkill> = {}, options: Partial<SkillCardOptions> = {}) {
+  return buildSkillCardView({ ...skill, ...overrides }, { ...card, ...options }, run)
+}
+
+describe('skill card view', () => {
+  it('names the Skill as a slash command and credits the author by name', () => {
+    const result = view()
+
+    expect(result.title).toBe('/nuxt')
+    expect(result.label).toBe('/nuxt by Anthony Fu')
+    expect(result.source).toBe('antfu/skills')
+    expect(result.description).toBe('Build full-stack Vue applications with Nuxt.')
+  })
+
+  it('credits the handle when GitHub has no distinct name for the owner', () => {
+    const result = view({ authorName: 'antfu' })
+
+    expect(result.author).toBeNull()
+    expect(result.label).toBe('/nuxt by antfu')
+  })
+
+  it('hides zero stars, which can mean the stars were never fetched', () => {
+    expect(view({ stars: 0 }).metric).toBeNull()
+    expect(view({ stars: null }).metric).toBeNull()
+    expect(view().metric).toMatchObject({ _tag: 'stars', text: '12k', title: '12,345 GitHub stars' })
+  })
+
+  it('counts likes in the singular for one like', () => {
+    expect(view({}, { metric: 'likes' }).metric).toMatchObject({ _tag: 'likes', text: '1', title: '1 like' })
+    expect(view({ likeCount: 0 }, { metric: 'likes' }).metric).toMatchObject({ text: '0', title: '0 likes' })
+  })
+
+  it('dates an update from the push when the Skill has no change time', () => {
+    const result = view({ modifiedAt: null, pushedAt: 1_600_000_000 }, { metric: 'updated' })
+
+    expect(result.metric).toMatchObject({ _tag: 'updated', iso: new Date(1_600_000_000 * 1000).toISOString() })
+    expect(view({ modifiedAt: 0, pushedAt: null }, { metric: 'updated' }).metric).toBeNull()
+  })
+
+  it('offers only the run command on a card, and nothing on a compact entry', () => {
+    const card = view()
+    const compact = view({}, { layout: 'compact' })
+
+    expect(card.run?.command).toBe('npx skilld run antfu/skills/nuxt')
+    expect([card.like, card.sourceUrl]).toEqual([null, null])
+    expect([compact.run, compact.like, compact.sourceUrl]).toEqual([null, null, null])
+  })
+
+  it('shows likes and SKILL.md only where the context asks', () => {
+    const result = view({}, { actions: ['like', 'source'] })
+
+    expect(result.like).toEqual({ count: 1 })
+    expect(result.sourceUrl).toBe(skill.skillFileUrl)
+  })
+
+  it('drops the description from a compact entry unless the context asks for it', () => {
+    expect(view({}, { layout: 'compact' }).description).toBeNull()
+    expect(view({}, { layout: 'compact', description: true }).description).toBe('Build full-stack Vue applications with Nuxt.')
+  })
+
+  it('drops the source link when the Skill has no known SKILL.md', () => {
+    expect(view({ skillFileUrl: null }, { actions: ['source'] }).sourceUrl).toBeNull()
+  })
+
+  it('keeps only the controls the context asks for', () => {
+    const result = view({}, { actions: ['source'] })
+
+    expect(result.run).toBeNull()
+    expect(result.like).toBeNull()
+    expect(result.sourceUrl).toBe(skill.skillFileUrl)
+  })
+
+  it('omits the description and a blank note when the context hides them', () => {
+    const result = view({}, { description: false, note: '   ' })
+
+    expect(result.description).toBeNull()
+    expect(result.note).toBeNull()
+  })
+
+  it('names the analytics surface after the layout unless the context names one', () => {
+    expect(view({}, { layout: 'row' }).surface).toBe('skill-row')
+    expect(view({}, { surface: 'collection' }).surface).toBe('collection')
+  })
+})
diff --git a/test/unit/skill-table-ranking.test.ts b/test/unit/skill-table-ranking.test.ts
deleted file mode 100644
index 1e0985a6..00000000
--- a/test/unit/skill-table-ranking.test.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-
-describe('skill table ranking signal', () => {
-  it('shows likes when the table is ranked by likes', async () => {
-    const wrapper = await mountSuspended(
-      await import('../../app/components/SkillTable.vue').then(module => module.default),
-      {
-        props: {
-          metric: 'likes',
-          skills: [{
-            owner: 'antfu',
-            repo: 'skills',
-            name: 'nuxt',
-            slug: 'antfu/skills/nuxt',
-            description: 'Nuxt framework guidance.',
-            stars: 12_000,
-            likeCount: 7,
-          }],
-        },
-      },
-    )
-
-    expect(wrapper.get('.skill-table__metric-heading').text()).toBe('Likes')
-    expect(wrapper.get('.skill-table__metric').text()).toBe('7')
-
-    wrapper.unmount()
-  })
-})
diff --git a/test/unit/skills-registry-loading-state.test.ts b/test/unit/skills-registry-loading-state.test.ts
index e2d0b207..cf8c5870 100644
--- a/test/unit/skills-registry-loading-state.test.ts
+++ b/test/unit/skills-registry-loading-state.test.ts
@@ -50,7 +50,7 @@ async function mountSkillsPage() {
     {
       global: {
         stubs: {
-          SkillTable: true,
+          SkillCard: true,
         },
       },
     },

From ff6123df18d7c93ff18908b92a6e470f1ae887b6 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 13:21:06 +1100
Subject: [PATCH 2/4] feat(skills): move boards, home feeds and community onto
 SkillCard

The trending and track boards, both home freshness feeds and the
community top Skill still drew their own Skill markup. They now render
SkillCard too.

The board row becomes a thin adapter: its ranking reason fills the meta
line and its posts fill a new aside slot. Board rows carry repo and name
so the card can address the Skill, and SkillCard re-emits avatar errors
so the boards still drop deleted GitHub accounts. Wide rows reserve the
run pill's width, so rows with and without one line up. One star now
reads "1 GitHub star".

Search results keep their own rows: they are a keyboard picker, and a
linked card inside a grid cell would break it.
---
 DESIGN.md                                     |   4 +-
 app/assets/css/main.css                       |   7 +
 app/components/SkillCard.vue                  |  54 +++-
 .../community/_CommunityCreator.vue           |  54 +---
 .../skill-card/_SkillCardIdentity.vue         |   6 +
 .../skill-card/_SkillCardMetric.vue           |   4 +-
 app/pages/_playground/skill-cards.vue         | 189 ++++++++++-
 app/pages/index.vue                           |  63 ++--
 app/utils/skill-card-view.ts                  |   2 +-
 .../app/components/TrendingBoardItem.vue      | 294 +++---------------
 .../marketing/app/pages/skills/trending.vue   |   4 +
 shared/track-board.ts                         |   4 +
 shared/trending-range.ts                      |   6 +
 test/unit/community-creator-ui.test.ts        |  30 +-
 test/unit/skill-card-view.test.ts             |   4 +
 15 files changed, 348 insertions(+), 377 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index ddeb2af2..4886ab03 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -188,7 +188,7 @@ Use `UiTooltip` (not `UTooltip`) for any tooltip that needs more than a plain st
   - `byline`: `full` by default, `repo` where the page names the owner, `none` where it names the Repository.
   - `metric`: one of `stars`, `likes` or `updated`, or `none`.
   - `actions`: `run` by default. `like` and `source` are opt-in.
-  - `rank`, `note` and `trending`, plus the `meta`, `footer` and `actions` slots for facts only one context has.
+  - `rank`, `note` and `trending`, plus the `meta`, `footer`, `actions` and `aside` slots for facts only one context has.
   `/_playground/skill-cards` renders every context in development.
 - **Skill source lists**: use `SkillSourceList` when a shortlist needs visible author, handle, repository, and source-linked skill name. `stream` is a vertically scrollable discovery preview; `grid` is for bounded related-skill groups. Idle auto-scroll pauses for hover, focus, touch, and reduced motion. Mixed 20-item discovery streams should represent at least 10 people and cap each person at 2 skills.
 - **Install commands**: never render one as raw text. Use `<InstallCommand :command="cmd" />` so `npx skilld add` stays quiet and the target carries the accent. Long commands wrap (`wrap`); they never get a horizontal scrollbar inside a card.
@@ -467,4 +467,4 @@ These are editorial sets, not necessarily database collections yet. If a set has
 - **Trending shares the /skills shell**: `/skills/trending` uses the full-width layout from `/skills`. Its heading replaces `CompactPageHeader` and lines up with the results column. A sticky 14rem sidebar holds the range links, then the weekly CTA and the skilld install. Nothing sits right of the board, so the board takes every column the sidebar leaves. Rows switch on their own width, and the post carousel shows two cards where it has room. On narrow screens the ranges are a compact row above the board, and the CTA stays after the fifth row. Harlan asked for this on 2026-10-06. It supersedes the 2026-10-01 call that dropped the 9/3 sidebar for taking a quarter of the board's width: that sidebar sat right of a 64rem board, and this one sits left of a board that runs the full page width.
 - **Trending rows scan in one pass**: the rank is a plain mono number, and the first three are a step darker. Each metadata line runs source, stars, then the signal that ranked the row, and an empty slot renders nothing. Descriptions stop at two lines, the run chip is as wide as its command, and the post carousel shows whole cards only. The sidebar invitation drops the email preview and the card. Its button is the rail's one solid rose element, so the install chip beside it inks its dot. Harlan asked for this polish on 2026-10-06.
 - **A six-step lifecycle band replaces the four tiles**: under the hero, one band maps the whole product in its real order: find, run, install or fork, keep current, make, build on. The site and the CLI share one line. Each step is one link: a mono `01` marker and step name, then one sans line that opens with its pitch line where COPY.md has one. A line of stone dots joins the steps. Run, the default, carries the band's one rose dot, so no step lights rose on hover. Six columns from 1024px; below that a vertical list with the dots down the left. Keep the band no taller than the tiles it replaced: the hero and the band must fit a 1440×900 viewport. Harlan approved it on 2026-10-06.
-- **One Skill card**: `SkillCard` renders every Skill embed, in three layouts. Each opens with one identity unit: the avatar beside the mono name, over a byline of author and Repository. Then come at most two lines of description and one line of facts with a dashed `run` pill. The pill is the run chip's material without `npx skilld`. Its click copies the full command, and its dot stays stone until hover, focus or copy. Rows read in three zones, who, what and the facts, and stack like a borderless card under 40rem. Compact entries drop the description. Cards show no SKILL.md icon and no heart by default: with few accounts yet, a row of zero hearts reads as an empty room. Harlan chose this from five takes, one by Fable, on 2026-10-06. It supersedes the `/skills` table and its "What it does" column.
+- **One Skill card**: `SkillCard` renders every Skill embed, in three layouts. Each opens with one identity unit: the avatar beside the mono name, over a byline of author and Repository. Then come at most two lines of description and one line of facts with a dashed `run` pill. The pill is the run chip's material without `npx skilld`. Its click copies the full command, and its dot stays stone until hover, focus or copy. Rows read in three zones, who, what and the facts, and stack like a borderless card under 40rem. Compact entries drop the description. Cards show no SKILL.md icon and no heart by default: with few accounts yet, a row of zero hearts reads as an empty room. Harlan chose this from five takes, one by Fable, on 2026-10-06. It supersedes the `/skills` table and its "What it does" column. Trending and track boards render the same rows: the reason a Skill ranked fills the meta line, and the posts about it sit under its words as an aside. The home freshness ledgers and the community top Skill use compact entries. Search results keep their own rows, because they are a keyboard picker, not an embed.
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 3c9659aa..a89ba057 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1366,3 +1366,10 @@
   opacity: 0.28;
   pointer-events: none;
 }
+
+/* A compact SkillCard fills its ledger line, inset like the rows beside it. */
+.home-freshness-ledger .skill-card--compact {
+  margin-inline: 0;
+  border-radius: 0;
+  padding: 0.875rem 0.75rem;
+}
diff --git a/app/components/SkillCard.vue b/app/components/SkillCard.vue
index 8a05089c..cd983d9e 100644
--- a/app/components/SkillCard.vue
+++ b/app/components/SkillCard.vue
@@ -52,6 +52,11 @@ const {
   surface?: string
 }>()
 
+const emit = defineEmits<{
+  /** The owner's avatar failed, which means the GitHub account is gone. */
+  avatarError: [owner: string]
+}>()
+
 const slots = defineSlots<{
   /** Inline facts beside the metric, such as "Watching for changes" or a braille spark. */
   meta?: () => unknown
@@ -59,6 +64,8 @@ const slots = defineSlots<{
   footer?: () => unknown
   /** Extra controls before the run pill. */
   actions?: () => unknown
+  /** Rows only: a wide block under the words, such as the posts about a trending Skill. */
+  aside?: () => unknown
 }>()
 
 const resolvedSurface = skillCardSurface({ layout, surface })
@@ -95,7 +102,7 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
   <article v-if="view.layout === 'card'" class="skill-card skill-card--card">
     <div class="flex min-w-0 items-start gap-3">
       <span v-if="rankText" class="skill-card__rank" :class="{ 'skill-card__rank--lead': rankLead }" aria-hidden="true">{{ rankText }}</span>
-      <SkillCardIdentity :view :size="32" :accent="markAccent" wrap class="min-w-0 flex-1" />
+      <SkillCardIdentity :view :size="32" :accent="markAccent" wrap class="min-w-0 flex-1" @avatar-error="emit('avatarError', view.owner)" />
     </div>
 
     <p v-if="view.note" class="skill-card__note mt-3 line-clamp-2">
@@ -144,7 +151,7 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
   <div v-else-if="view.layout === 'row'" class="skill-card skill-card--row-shell">
     <div class="skill-card--row" :class="{ 'skill-card--ranked': rankText }" :style="{ '--skill-card-metric': metricWidth }">
       <span v-if="rankText" class="skill-card__rank skill-card__row-rank" :class="{ 'skill-card__rank--lead': rankLead }" aria-hidden="true">{{ rankText }}</span>
-      <SkillCardIdentity :view :size="36" :accent="markAccent" wrap class="skill-card__row-id" />
+      <SkillCardIdentity :view :size="36" :accent="markAccent" wrap class="skill-card__row-id" @avatar-error="emit('avatarError', view.owner)" />
 
       <div v-if="view.note || view.description || $slots.footer" class="skill-card__row-body">
         <p v-if="view.note" class="skill-card__note line-clamp-2">
@@ -162,7 +169,12 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
         <slot name="meta" />
       </p>
 
-      <div v-if="view.metricKind !== 'none' || hasControls" class="skill-card__row-end">
+      <div v-if="$slots.aside" class="skill-card__raise skill-card__row-aside">
+        <slot name="aside" />
+      </div>
+
+      <!-- Always drawn on wide rows, so a row without a run pill still holds the column and its neighbours line up. -->
+      <div class="skill-card__row-end" :class="{ 'skill-card__row-end--empty': view.metricKind === 'none' && !hasControls }">
         <span v-if="view.metricKind !== 'none'" class="skill-card__row-metric">
           <SkillCardMetricLabel v-if="view.metric" :metric="view.metric" short />
         </span>
@@ -193,7 +205,7 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
   <div v-else class="skill-card skill-card--compact" :class="{ 'skill-card--face': view.byline === 'full' }">
     <span v-if="rankText" class="skill-card__rank" aria-hidden="true">{{ rankText }}</span>
     <div class="min-w-0 flex-1">
-      <SkillCardIdentity :view :size="28" :accent="markAccent" terse>
+      <SkillCardIdentity :view :size="28" :accent="markAccent" terse @avatar-error="emit('avatarError', view.owner)">
         <SkillCardMetricLabel v-if="view.metric" :metric="view.metric" short />
         <span v-if="$slots.meta" class="skill-card__meta skill-card__raise"><slot name="meta" /></span>
       </SkillCardIdentity>
@@ -370,7 +382,8 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
     'id'
     'body'
     'meta'
-    'end';
+    'end'
+    'aside';
   align-items: center;
   padding: 0.875rem 0.5rem;
   transition: background-color 200ms ease-out;
@@ -382,7 +395,8 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
     'rank id'
     'body body'
     'meta meta'
-    'end end';
+    'end end'
+    'aside aside';
   column-gap: 0.75rem;
 }
 
@@ -411,6 +425,12 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
   margin-block-start: 0.5rem;
 }
 
+.skill-card__row-aside {
+  grid-area: aside;
+  min-inline-size: 0;
+  margin-block-start: 0.875rem;
+}
+
 .skill-card__row-end {
   grid-area: end;
   display: flex;
@@ -425,6 +445,10 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
   margin-inline-start: auto;
 }
 
+.skill-card__row-end--empty {
+  display: none;
+}
+
 .skill-card__row-metric {
   display: inline-flex;
 }
@@ -438,8 +462,9 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
     grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
     grid-template-areas:
       'id body end'
-      'id meta end';
-    grid-template-rows: auto 1fr;
+      'id meta end'
+      'id aside end';
+    grid-template-rows: auto auto 1fr;
     column-gap: 1.5rem;
     align-items: start;
   }
@@ -448,7 +473,8 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
     grid-template-columns: 1.25rem minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
     grid-template-areas:
       'rank id body end'
-      'rank id meta end';
+      'rank id meta end'
+      'rank id aside end';
     column-gap: 1rem;
   }
 
@@ -472,6 +498,16 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
     justify-content: flex-end;
     min-inline-size: var(--skill-card-metric);
   }
+
+  /* Room for the run pill on every row, whether or not this one offers it. */
+  .skill-card__row-end {
+    min-inline-size: calc(var(--skill-card-metric) + 4.5rem);
+    justify-content: flex-end;
+  }
+
+  .skill-card__row-end--empty {
+    display: flex;
+  }
 }
 
 /* ---- compact ---- */
diff --git a/app/components/community/_CommunityCreator.vue b/app/components/community/_CommunityCreator.vue
index 3594ef54..6ccb029e 100644
--- a/app/components/community/_CommunityCreator.vue
+++ b/app/components/community/_CommunityCreator.vue
@@ -17,13 +17,6 @@ const contributionSummary = computed(() => [
     ? `${creator.skillCount} ${creator.skillCount === 1 ? 'skill' : 'skills'}`
     : null,
 ].filter(Boolean).join(' · '))
-
-function formatStars(stars: number): string {
-  return new Intl.NumberFormat('en', {
-    notation: stars >= 1000 ? 'compact' : 'standard',
-    maximumFractionDigits: 1,
-  }).format(stars)
-}
 </script>
 
 <template>
@@ -113,38 +106,19 @@ function formatStars(stars: number): string {
         </span>
       </NuxtLink>
 
-      <NuxtLink
-        v-if="creator.topSkill"
-        :to="creator.topSkill.registryPath"
-        class="community-contribution group"
-      >
-        <span class="flex items-center justify-between gap-4">
-          <span class="font-mono text-sm uppercase tracking-widest text-muted">
-            Most starred skill
-          </span>
-          <UIcon
-            name="i-lucide-arrow-up-right"
-            class="size-4 shrink-0 text-muted transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
-            aria-hidden="true"
-          />
-        </span>
-        <span class="mt-4 block text-xl font-semibold leading-tight tracking-tight">
-          {{ creator.topSkill.displayName || creator.topSkill.name }}
-        </span>
-        <span class="mt-2 block font-mono text-sm text-muted">
-          {{ creator.topSkill.owner }}/{{ creator.topSkill.repo }}
-        </span>
-        <span
-          v-if="creator.topSkill.description"
-          class="mt-3 line-clamp-3 text-base leading-relaxed text-muted text-pretty"
-        >
-          {{ creator.topSkill.description }}
-        </span>
-        <span class="mt-auto flex items-center gap-2 pt-5 font-mono text-sm text-muted">
-          <UIcon name="i-lucide-star" class="size-4" aria-hidden="true" />
-          {{ formatStars(creator.topSkill.stars) }} GitHub {{ creator.topSkill.stars === 1 ? 'star' : 'stars' }}
-        </span>
-      </NuxtLink>
+      <section v-if="creator.topSkill" class="community-contribution community-contribution--skill" :aria-label="`Most starred skill by ${displayName}`">
+        <h3 class="font-mono text-sm uppercase tracking-widest text-muted">
+          Most starred skill
+        </h3>
+        <SkillCard
+          :skill="creator.topSkill"
+          layout="compact"
+          byline="repo"
+          description
+          surface="community-top-skill"
+          class="mt-4"
+        />
+      </section>
     </div>
   </article>
 </template>
@@ -249,7 +223,7 @@ function formatStars(stars: number): string {
 }
 
 @media (hover: hover) {
-  .community-contribution:hover {
+  .community-contribution:not(.community-contribution--skill):hover {
     background: var(--ui-bg-muted);
   }
 }
diff --git a/app/components/skill-card/_SkillCardIdentity.vue b/app/components/skill-card/_SkillCardIdentity.vue
index 5baa933b..2bdc4edb 100644
--- a/app/components/skill-card/_SkillCardIdentity.vue
+++ b/app/components/skill-card/_SkillCardIdentity.vue
@@ -18,6 +18,11 @@ const { view, size, terse = false, accent = true, wrap = false } = defineProps<{
   wrap?: boolean
 }>()
 
+const emit = defineEmits<{
+  /** The avatar failed, which means the GitHub account is gone. */
+  avatarError: []
+}>()
+
 /** The author names the owner, so the byline needs only the Repository after it. */
 const where = computed(() => view.author ? view.repo : view.source)
 </script>
@@ -33,6 +38,7 @@ const where = computed(() => view.author ? view.repo : view.source)
       class="skill-id__avatar"
       loading="lazy"
       decoding="async"
+      @error="emit('avatarError')"
     >
     <div class="skill-id__text">
       <p class="skill-id__name-line">
diff --git a/app/components/skill-card/_SkillCardMetric.vue b/app/components/skill-card/_SkillCardMetric.vue
index 3d893cc6..5100510e 100644
--- a/app/components/skill-card/_SkillCardMetric.vue
+++ b/app/components/skill-card/_SkillCardMetric.vue
@@ -12,10 +12,10 @@ const { metric, short = false } = defineProps<{
 <template>
   <span class="skill-metric" :title="metric.title">
     <template v-if="metric._tag === 'stars'">
-      <UIcon name="i-lucide-star" class="size-3" aria-hidden="true" />{{ metric.text }}<span class="sr-only"> GitHub stars</span>
+      <UIcon name="i-lucide-star" class="size-3" aria-hidden="true" />{{ metric.text }}<span class="sr-only"> GitHub {{ metric.count === 1 ? 'star' : 'stars' }}</span>
     </template>
     <template v-else-if="metric._tag === 'likes'">
-      <UIcon name="i-lucide-heart" class="size-3" aria-hidden="true" />{{ metric.text }}<span class="sr-only"> likes</span>
+      <UIcon name="i-lucide-heart" class="size-3" aria-hidden="true" />{{ metric.text }}<span class="sr-only"> {{ metric.count === 1 ? 'like' : 'likes' }}</span>
     </template>
     <template v-else>
       <template v-if="!short">Updated</template>
diff --git a/app/pages/_playground/skill-cards.vue b/app/pages/_playground/skill-cards.vue
index 441f7817..668ba89b 100644
--- a/app/pages/_playground/skill-cards.vue
+++ b/app/pages/_playground/skill-cards.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { TrendingBoardRow } from '#shared/trending-range'
 import type { SkillCardSkill } from '~/types/skill-card'
+import { boardPost } from '#shared/trending-range'
 
 // Dev-only lab for SkillCard. 404s in production.
 // Every context below is a real embed on the site, with its real props.
@@ -27,6 +29,175 @@ const SKILLS: SkillCardSkill[] = [
 
 ]
 
+// Three rows from the production trending feed on 2026-10-06, with their posts.
+const BOARD_FEED = [
+  {
+    owner: 'lemomo-ai',
+    repo: 'lemo-opuscar',
+    name: 'lemo-opuscar',
+    registryPath: '/gh/lemomo-ai/lemo-opuscar',
+    description: 'Direct and produce a short film made entirely in code, in one of the styles of the Lemo-Opuscar library (e.g. Impasto Oil Painting 油画厚涂, Watercolor Brush 水彩笔刷, Chinese Ink Wash 中国水墨, Ukiyo-e 浮世绘, Whiteboard Explainer 白板讲解). Use when the user asks for a video, film, short, promo, explainer or animation (视频、短片、动画、宣传片) in a named style; when they want a film made about their own topic and haven\'t chosen a style (help them choose); or when they ask which film styles there are. Not for editing or converting existing video files.',
+    stars: 1188,
+    mentionsByDay: [
+      0,
+      1,
+      1,
+      1,
+      1,
+      2,
+      0,
+    ],
+    posts: [
+      {
+        url: 'https://x.com/ScaleWthAI/status/2106386087463772495',
+        authorHandle: 'ScaleWthAI',
+        authorName: 'Saman Ahmed',
+        authorAvatar: 'https://pbs.twimg.com/profile_images/2074400881127415808/k8socXL7_normal.jpg',
+        text: 'Claude Opus 5.5 is turning GitHub into a playground for creators.\n\nIn just one week, people shipped everything from coded music videos to full 3D games.\n\n1. PDoomVideo: the Opus 5.5 P(doom) music video, every frame in code (1.5k stars)\nhttps://t.co/D3jokz8BXG\n\n2. awesome-opus5-5-videos: 475 viral Opus 5.5 videos with their prompts (1k stars)\nhttps://t.co/TN6YIciyfj\n\n3. tidewater: a WebGPU fishing game built with Opus 5.5 (988 stars)\nhttps://t.co/z2XcLNsrRU\n\n4. claude-opus-5-…',
+        postedAt: 1791036552,
+        platform: 'x',
+        favouriteCount: 191,
+      },
+      {
+        url: 'https://bsky.app/profile/did:plc:rrpul7rxm2s4opncn6pwr475/post/3mx2apobtg72w',
+        authorHandle: 'todaystopainews.bsky.social',
+        authorName: 'Today\'s Top AI News',
+        authorAvatar: 'https://cdn.bsky.app/img/avatar/plain/did:plc:rrpul7rxm2s4opncn6pwr475/bafkreibhx5ue3qth44hxivzlcdqvqbnfmfeyq5ez35mvm2yuggsgvkkwbi',
+        text: 'Claude Code skill for short films (no video model): 43 film styles, each with a style prompt and demo film generated entirely in code by Claude Opus 5.5 (including OPUSCAR 98). Developed by Lemomo.\n\n#technology #anthropic #ai #artificialintelligence #opensource #news #claude\nGitHub - lemomo-ai/lemo-opuscar: Claude Code skill for short films with no video model: 43 film styl\nClaude Code skill for short films with no video model: 43 film styles, each a style prompt plus a demo…',
+        postedAt: 1791111607,
+        platform: 'bsky',
+        favouriteCount: 2,
+      },
+      {
+        url: 'https://bsky.app/profile/did:plc:apt3rm34z7q7azvcyrydbkaf/post/3mx26mwmxag24',
+        authorHandle: 'vulcanfeynman.bsky.social',
+        authorName: 'Vulcan Feynman',
+        authorAvatar: 'https://cdn.bsky.app/img/avatar/plain/did:plc:apt3rm34z7q7azvcyrydbkaf/bafkreif3rnhsni24xhopdljbp4hcza23zk2s2fdcs4x6rsfoqulvbmbld4',
+        text: '42/68\ngit clone github.com/lemomo-ai/le... clawd-case\ncd clawd-case\nexport LEMO_OPUSCAR_HOME="$PWD"\nsh plugin/skills/lemo-opuscar/scripts/setup.sh deps voice\nfor BANK in salamander freepats karoryfer vcsl vsco2ce; do\n  sh tools/fetch.sh instruments "$BANK"\ndone\nGitHub - lemomo-ai/lemo-opuscar: Claude Code skill for short films with no video model: 43 film styles, each a style prompt plus a demo film made entirely in code by Claude Opus 5.5 (incl. OPUSCAR 98)...\nClaude Code s…',
+        postedAt: 1791109364,
+        platform: 'bsky',
+        favouriteCount: 1,
+      },
+    ],
+  },
+  {
+    owner: 'nanaism',
+    repo: 'yomiyasu',
+    name: 'yomiyasu',
+    registryPath: '/gh/nanaism/yomiyasu',
+    description: 'AIが生成した不自然な日本語を、人間が読みやすく情報密度の高い自然な文章へ書き直すAgent Skill。「この文章を読みやすくして」「aiっぽさをなくして」「AI臭さを消して」「自然な日本語にして」「文章を脱臭して」という依頼や、技術記事、業務仕様書・PR説明文、エッセイ・noteの推敲時に使用する。非生物主語の解体、比喩的動詞の具体化、絵文字や文末コロンの完全排除、不要な補足カッコの削除、英単語前後の不自然な半角空白の排除、過剰な太字・箇条書き・否定対比の平文化を行い、文単体で誰が何をどうしたかが伝わる文章へ再構築する。',
+    stars: 1369,
+    mentionsByDay: [
+      0,
+      1,
+      1,
+      1,
+      2,
+      1,
+      0,
+    ],
+    posts: [
+      {
+        url: 'https://x.com/Marco_Ramilli/status/2106717225407172828',
+        authorHandle: 'Marco_Ramilli',
+        authorName: 'Marco Ramilli',
+        authorAvatar: 'https://pbs.twimg.com/profile_images/1975172551979536384/uGtyi7pM_normal.jpg',
+        text: '🤖 yomiyasu\n⭐ 1,355 stars\n\nTired of robotic AI-generated Japanese? Polish your LLM outputs into natural, human-grade prose with this seamless agent skill.\n\n🔗 https://t.co/RCSINWNrI7\n\n#AI #MachineLearning https://t.co/51ifeCwaiz',
+        postedAt: 1791115502,
+        platform: 'x',
+        favouriteCount: 5,
+      },
+      {
+        url: 'https://bsky.app/profile/did:plc:iy3szmwg4hajieka5kbhmcy5/post/3mwxbee7wbs25',
+        authorHandle: 'yug1224.com',
+        authorName: 'ぷーじ',
+        authorAvatar: 'https://cdn.bsky.app/img/avatar/plain/did:plc:iy3szmwg4hajieka5kbhmcy5/bafkreifxzudsbphb5qmp7g5x3jgg3r4chrbp7725qkymameyw53g23a7tu',
+        text: 'AI生成の日本語を自然な文章に整えてくれるAgent Skillらしい\n文章の硬さが気になる時に使えそうかな\n\nyug1224 starred nanaism/yomiyasu\nhttps://github.com/nanaism/yomiyasu\nGitHub - nanaism/yomiyasu: AI生成の日本語を自然な日本語へ推敲するAgent Skill / Agent Skill for Refining AI-Generated Japanese into Natural Japanese',
+        postedAt: 1791009224,
+        platform: 'bsky',
+        favouriteCount: 2,
+      },
+      {
+        url: 'https://bsky.app/profile/did:plc:3odpz5wxuofzbd7dat3chhzx/post/3mwwto32zyd2u',
+        authorHandle: 'sarubot.bsky.social',
+        authorName: 'さるぼっと@IT最新動向を配信',
+        authorAvatar: 'https://cdn.bsky.app/img/avatar/plain/did:plc:3odpz5wxuofzbd7dat3chhzx/bafkreicwxwa74xc2x3bymxnqjenavsi44idsfhh52pk3ejiaiz76wum4pe',
+        text: 'yomiyasu — AIの不自然な日本語を劇的に改善、今週スター急上昇中のAgent Skill！\n\n・単なる禁止語置換ではなく、文構造の修正や非生物主語の解体など7つの原則で推敲\n・Claude CodeやCursor等に組み込んで直接実行できるPython製ツール\n・技術記事や仕様書作成時の「AI臭さ」を排除し、推敲コストを大幅削減\n\n#LLM #GitHub\nyomiyasu\nAI生成の日本語を自然な日本語へ推敲するAgent Skill / Agent Skill for Refining AI-Generated Japanese into Natural Japanese',
+        postedAt: 1790994518,
+        platform: 'bsky',
+        favouriteCount: 1,
+      },
+    ],
+  },
+  {
+    owner: 'virgiliojr94',
+    repo: 'book-to-skill',
+    name: 'book-to-skill',
+    registryPath: '/gh/virgiliojr94/book-to-skill',
+    description: 'Converts books and documents (PDF, EPUB, DOCX, HTML, Markdown, plain text, RTF, MOBI/AZW with Calibre) into structured agent skills, extracting frameworks, mental models, principles, techniques, and anti-patterns. Use when the user wants to study a document through GitHub Copilot CLI, Amp, Claude Code, Hermes Agent, OpenCode, or OpenClaw, apply an author\'s frameworks while working, or build a reusable knowledge base from a file.',
+    stars: 33687,
+    mentionsByDay: [
+      0,
+      0,
+      0,
+      0,
+      2,
+      1,
+      0,
+    ],
+    posts: [
+      {
+        url: 'https://x.com/tom_doerr/status/2106234841888899211',
+        authorHandle: 'tom_doerr',
+        authorName: 'Tom Dörr',
+        authorAvatar: 'https://pbs.twimg.com/profile_images/1905090420142379008/Ydq5So7B_normal.jpg',
+        text: 'book-to-skill converts technical books into agent skills for tools like Claude Code to reference directly\n\nhttps://t.co/GFnX15PgCP https://t.co/ipieS50aYd',
+        postedAt: 1791000492,
+        platform: 'x',
+        favouriteCount: 705,
+      },
+      {
+        url: 'https://x.com/krip_tom/status/2106335895364497584',
+        authorHandle: 'krip_tom',
+        authorName: 'Tom ⟦■■■■□⟧ loading agents',
+        authorAvatar: 'https://pbs.twimg.com/profile_images/1999869092963012611/6z55afgE_normal.jpg',
+        text: 'Stop pasting the PDF into chat — turn the book into a skill the agent loads.\n\nbook-to-skill: open-source tool that turns a technical book PDF into a Claude Code skill, so the agent can study, reference, and apply it while coding.\n\nhttps://t.co/JgvV4hfw6b',
+        postedAt: 1791024585,
+        platform: 'x',
+        favouriteCount: 4,
+      },
+      {
+        url: 'https://x.com/som_dutt_/status/2106624262098542615',
+        authorHandle: 'som_dutt_',
+        authorName: 'Som Dutt | AI/ML Analyst',
+        authorAvatar: 'https://pbs.twimg.com/profile_images/1826872762545135616/4Ky0Gxte_normal.jpg',
+        text: 'Claude Code + book-to-skill: Convert Any Technical Book Into an Agent Skill Claude Can Reference Directly\n\nAnswers cost 24x–51x fewer tokens than pasting the whole book into context.\nYour agent opens only the chapter a question needs.\nThe structuring work happens once, at conversion.\n\n📊 What one conversion builds:\n→ SKILL.md: key mental models and a chapter map, ~4,000 tokens\n→ Chapter files: ~1,000 tokens each, pulled only when asked\n→ glossary.md: key terms with chapter r…',
+        postedAt: 1791093337,
+        platform: 'x',
+        favouriteCount: 1,
+      },
+    ],
+  },
+] as const
+
+// The day the fixture was read, so the post ages stay fixed and hydrate cleanly.
+const clock = 1_791_250_000
+const boardRows: TrendingBoardRow[] = BOARD_FEED.map(item => ({
+  key: item.registryPath,
+  owner: item.owner,
+  repo: item.repo,
+  name: item.name,
+  title: item.name,
+  to: item.registryPath,
+  subtitle: `${item.owner}/${item.repo}`,
+  description: item.description,
+  stars: item.stars,
+  starSeries: [],
+  names: [item.name],
+  skill: { owner: item.owner, repo: item.repo, name: item.name },
+  reason: { _tag: 'posts', posts: item.posts.map(post => boardPost(post, clock)), mentionsByDay: [...item.mentionsByDay] },
+}))
+
 function pick(key: string): SkillCardSkill {
   const skill = SKILLS.find(s => `${s.owner}/${s.repo}/${s.name}` === key)
   if (!skill)
@@ -57,7 +228,6 @@ const collection = [
   { skill: designHtml, note: 'For the moment a mock has to become real markup.' },
   { skill: slides, note: null },
 ]
-const board = [grillMe, impeccable, brainstorming, frontendDesign]
 const compact = [frontendDesign, impeccable, perf, designHtml, taste, cloudflare, slides, brainstorming]
 const dependencies = ['frontend-design', 'web-artifacts-builder', 'canvas-design', 'theme-factory']
 </script>
@@ -224,22 +394,9 @@ const dependencies = ['frontend-design', 'web-artifacts-builder', 'canvas-design
           Trending board
         </h2>
         <p class="lab-context__props">
-          /skills/trending, tracks · layout row · rank · trending · meta slot: why it ranked · run
+          /skills/trending, tracks · TrendingBoardItem · layout row · rank · meta slot: why it ranked · aside slot: posts · run
         </p>
-        <div>
-          <ol class="editorial-ledger list-none p-0">
-            <li v-for="(skill, index) in board" :key="skill.registryPath">
-              <SkillCard :skill layout="row" :rank="index + 1" :trending="index < 2" :actions="['run']">
-                <template v-if="index < 2" #meta>
-                  <BrailleSpark :counts="[0, 1, 3, 2, 5, 8, 13]" period="in 7 days" />
-                </template>
-                <template v-else #meta>
-                  <span>Ranked by GitHub stars</span>
-                </template>
-              </SkillCard>
-            </li>
-          </ol>
-        </div>
+        <BoardRankedList :rows="boardRows" surface="lab-board" />
       </section>
 
       <!-- 9. Compact index: trending "Earlier on this board", community, related -->
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4fa1e270..20363f8c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -195,22 +195,10 @@ function recentUpdateKey(item: RecentUpdateCard): string {
     : `skill:${item.owner}/${item.repo}/${item.name}`
 }
 
-function recentUpdatePath(item: RecentUpdateCard): string {
-  return item.kind === 'repo'
-    ? repoHubPath(item.owner, item.repo)
-    : item.registryPath
-}
-
-function recentUpdateTitle(item: RecentUpdateCard): string {
-  return item.kind === 'repo'
-    ? `${item.owner}/${item.repo}`
-    : item.displayName
-}
-
-function recentUpdateDescription(item: RecentUpdateCard): string {
-  if (item.kind === 'skill')
-    return item.changeSummary ?? item.description ?? `${item.owner}/${item.repo}`
+type RecentRepoUpdate = Extract<RecentUpdateCard, { kind: 'repo' }>
 
+/** What changed across a Repository: its commit summary, or the Skills it touched. */
+function recentRepoDescription(item: RecentRepoUpdate): string {
   if (item.changeSummary)
     return item.changeSummary
 
@@ -517,8 +505,19 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
             </div>
             <ul v-else-if="recentUpdates.length" class="home-freshness-ledger list-none p-0">
               <li v-for="item in recentUpdates.slice(0, 5)" :key="recentUpdateKey(item)">
+                <SkillCard
+                  v-if="item.kind === 'skill'"
+                  :skill="{ owner: item.owner, repo: item.repo, name: item.name, registryPath: item.registryPath, description: item.description, modifiedAt: item.occurredAt }"
+                  layout="compact"
+                  metric="updated"
+                  :note="item.changeSummary"
+                  :description="!item.changeSummary"
+                  surface="home-recent-updates"
+                />
+                <!-- A whole Repository changed, not one Skill, so it keeps its own line. -->
                 <NuxtLink
-                  :to="recentUpdatePath(item)"
+                  v-else
+                  :to="repoHubPath(item.owner, item.repo)"
                   class="home-freshness-row home-freshness-row--primary group"
                 >
                   <img
@@ -531,8 +530,8 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
                     decoding="async"
                   >
                   <span class="min-w-0 flex-1">
-                    <span class="home-freshness-row-title">{{ recentUpdateTitle(item) }}</span>
-                    <span class="home-freshness-row-description">{{ recentUpdateDescription(item) }}</span>
+                    <span class="home-freshness-row-title">{{ item.owner }}/{{ item.repo }}</span>
+                    <span class="home-freshness-row-description">{{ recentRepoDescription(item) }}</span>
                   </span>
                   <span class="home-freshness-time">{{ formatRelative(item.occurredAt) }}</span>
                   <UIcon name="i-lucide-arrow-up-right" class="home-freshness-arrow size-4 shrink-0" aria-hidden="true" />
@@ -592,26 +591,16 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
             </div>
             <ul v-else-if="recentPublishes.length" class="home-freshness-ledger home-freshness-ledger--secondary list-none p-0">
               <li v-for="item in recentPublishes.slice(0, 5)" :key="`${item.owner}/${item.repo}/${item.name}`">
-                <NuxtLink
-                  :to="item.registryPath"
-                  class="home-freshness-row home-freshness-row--secondary group"
+                <SkillCard
+                  :skill="item"
+                  layout="compact"
+                  metric="none"
+                  surface="home-recent-publishes"
                 >
-                  <img
-                    :src="githubAvatarProxyUrl(item.owner, 64)"
-                    alt=""
-                    width="32"
-                    height="32"
-                    class="home-freshness-avatar home-freshness-avatar--secondary"
-                    loading="lazy"
-                    decoding="async"
-                  >
-                  <span class="min-w-0 flex-1">
-                    <span class="home-freshness-row-title">{{ item.displayName }}</span>
-                    <span class="home-freshness-row-description">{{ item.owner }}/{{ item.repo }}</span>
-                  </span>
-                  <span class="home-freshness-time">{{ formatRelative(item.occurredAt) }}</span>
-                  <UIcon name="i-lucide-arrow-up-right" class="home-freshness-arrow size-4 shrink-0" aria-hidden="true" />
-                </NuxtLink>
+                  <template #meta>
+                    {{ formatRelative(item.occurredAt) }}
+                  </template>
+                </SkillCard>
               </li>
             </ul>
             <div v-else class="home-freshness-state home-freshness-state--secondary" role="status">
diff --git a/app/utils/skill-card-view.ts b/app/utils/skill-card-view.ts
index 00bf7df4..335e8d70 100644
--- a/app/utils/skill-card-view.ts
+++ b/app/utils/skill-card-view.ts
@@ -56,7 +56,7 @@ function metricView(skill: SkillCardSkill, metric: SkillCardMetric): SkillCardMe
     // Zero can mean the stars were never fetched, so it stays hidden.
     if (count <= 0)
       return null
-    return { _tag: 'stars', count, text: formatGithubStars(count), title: `${count.toLocaleString('en')} GitHub stars` }
+    return { _tag: 'stars', count, text: formatGithubStars(count), title: `${count.toLocaleString('en')} GitHub ${count === 1 ? 'star' : 'stars'}` }
   }
   if (metric === 'likes') {
     const count = skill.likeCount ?? 0
diff --git a/layers/marketing/app/components/TrendingBoardItem.vue b/layers/marketing/app/components/TrendingBoardItem.vue
index 84ea9d1e..1a3ac1ce 100644
--- a/layers/marketing/app/components/TrendingBoardItem.vue
+++ b/layers/marketing/app/components/TrendingBoardItem.vue
@@ -1,22 +1,19 @@
 <script setup lang="ts">
 import type { TrendingBoardRow } from '#shared/trending-range'
-import { githubAvatarProxyUrl } from '#shared/image-proxy'
+import type { SkillCardSkill } from '~/types/skill-card'
 import TrendingPostCarousel from './TrendingPostCarousel.vue'
 import TrendingStarSpark from './TrendingStarSpark.vue'
 
 /**
- * One board entry: the Skill on the left, the posts about it on the right.
- *
- * The row used to stack eight lines in five type styles, and the quoted post,
- * set brighter than the description, was the loudest text in it. Now the
- * Skill carries the weight, larger and first, and the posts sit beside it as
- * testimony, one card at a time.
+ * One board entry: the Skill as a SkillCard row, then the posts about it as
+ * testimony under its words. The row says why it is on the board in its meta
+ * line, and only that once.
  */
 const { row, rank, surface = 'trending-row' } = defineProps<{
   row: TrendingBoardRow
   /** One-based position on the board. */
   rank: number
-  /** Analytics surface for the run chip. */
+  /** Analytics surface for the run pill. */
   surface?: string
 }>()
 
@@ -25,6 +22,18 @@ const emit = defineEmits<{
   avatarError: [owner: string]
 }>()
 
+const skill = computed<SkillCardSkill>(() => ({
+  owner: row.owner,
+  repo: row.repo,
+  name: row.name,
+  registryPath: row.to,
+  description: row.description,
+  stars: row.stars,
+}))
+
+/** Only where the row stands for exactly one Skill; see `singleSkill`. */
+const actions = computed(() => row.skill ? ['run' as const] : [])
+
 const posts = computed(() => (row.reason._tag === 'posts' ? row.reason.posts : []))
 
 /**
@@ -42,9 +51,10 @@ const mentions = computed(() => {
   const days = row.reason._tag === 'posts' ? row.reason.mentionsByDay : null
   return days?.some(count => count > 0) ? days : null
 })
+const starLine = computed(() => !isSocial.value && row.starSeries.length > 0)
 /**
- * Whether the last slot of the metadata line has anything to say. A track
- * member says nothing there: its section heading already states the order.
+ * Whether the meta line has anything to say. A track member says nothing
+ * there: its section heading already states the order.
  */
 const hasSignal = computed(() => {
   if (row.reason._tag === 'member')
@@ -54,243 +64,37 @@ const hasSignal = computed(() => {
 </script>
 
 <template>
-  <div class="board-item">
-    <div class="board-row" :class="{ 'board-row--with-posts': posts.length > 0 }">
-      <!-- The list is an `<ol>`, so a screen reader already announces the position. -->
-      <span
-        class="board-row__rank"
-        :class="{ 'board-row__rank--lead': rank <= 3 }"
-        aria-hidden="true"
-      >{{ String(rank).padStart(2, '0') }}</span>
-
-      <div class="board-row__skill">
-        <NuxtLink :to="row.to" class="board-row__name">
-          {{ row.title }}
-        </NuxtLink>
-        <!--
-          Three slots in one order on every row: where the Skill lives, its
-          stars, then why it is on the board. A slot with nothing to say
-          renders nothing, and the last slot drops to its own line as a whole
-          when the row is too narrow for all three.
-        -->
-        <p class="board-row__meta">
-          <span class="board-row__source">
-            <img
-              :src="githubAvatarProxyUrl(row.owner, 40)"
-              alt=""
-              width="18"
-              height="18"
-              class="size-[1.125rem] shrink-0 rounded-full border border-default bg-muted"
-              loading="lazy"
-              decoding="async"
-              @error="emit('avatarError', row.owner)"
-            >
-            <span v-if="row.subtitle" class="truncate" :title="row.subtitle">{{ row.subtitle }}</span>
-          </span>
-          <span v-if="row.stars" class="board-row__stars">
-            <span>{{ `${row.stars.toLocaleString()} ★` }}</span>
-            <TrendingStarSpark v-if="!isSocial" :points="row.starSeries" />
-          </span>
-          <span v-if="hasSignal" class="board-row__signal">
-            <BrailleSpark v-if="mentions" :counts="mentions" period="in 7 days" />
-            <template v-else-if="row.reason._tag === 'reviewed'">
-              <span>{{ `${row.reason.skillCount.toLocaleString()} ${row.reason.skillCount === 1 ? 'skill' : 'skills'}` }}</span>
-              <span v-if="row.reason.updated">Updated {{ row.reason.updated }}</span>
-            </template>
-            <!--
-              The two reasons with no post say why the row is here in words, since
-              nothing beside them does. A surge has only its stars; filler has to
-              say what ranked it, or a starred repository passes for a trending one.
-            -->
-            <span v-else-if="row.reason._tag === 'surge'" class="board-row__surge">
-              {{ `Star surge: +${row.reason.gain.toLocaleString()} stars in a day` }}<template v-if="row.reason.when">, {{ row.reason.when }}</template>
-            </span>
-            <span v-else-if="row.reason._tag === 'filler'">Ranked by GitHub stars</span>
-          </span>
-        </p>
-        <p v-if="row.description" class="board-row__description">
-          {{ row.description }}
-        </p>
-        <!-- Only where the row stands for exactly one Skill; see `singleSkill`. -->
-        <RunChip
-          v-if="row.skill"
-          class="board-row__run"
-          :owner="row.skill.owner"
-          :repo="row.skill.repo"
-          :skill="row.skill.name"
-          :surface="surface"
-          variant="compact"
-        />
-      </div>
-
+  <SkillCard
+    :skill
+    layout="row"
+    :rank
+    :actions
+    :surface
+    @avatar-error="owner => emit('avatarError', owner)"
+  >
+    <template v-if="hasSignal || starLine" #meta>
+      <TrendingStarSpark v-if="starLine" :points="row.starSeries" />
+      <BrailleSpark v-if="mentions" :counts="mentions" period="in 7 days" />
+      <template v-else-if="row.reason._tag === 'reviewed'">
+        <span>{{ `${row.reason.skillCount.toLocaleString()} ${row.reason.skillCount === 1 ? 'skill' : 'skills'}` }}</span>
+        <span v-if="row.reason.updated">Updated {{ row.reason.updated }}</span>
+      </template>
+      <!--
+        The two reasons with no post say why the row is here in words, since
+        nothing beside them does. A surge has only its stars; filler has to
+        say what ranked it, or a starred repository passes for a trending one.
+      -->
+      <span v-else-if="row.reason._tag === 'surge'" class="text-default">
+        {{ `Star surge: +${row.reason.gain.toLocaleString()} stars in a day` }}<template v-if="row.reason.when">, {{ row.reason.when }}</template>
+      </span>
+      <span v-else-if="row.reason._tag === 'filler'">Ranked by GitHub stars</span>
+    </template>
+    <template v-if="posts.length" #aside>
       <TrendingPostCarousel
-        v-if="posts.length"
-        class="board-row__posts"
         :posts="posts"
         :names="row.names"
-        :label="`Posts about ${row.title}`"
+        :label="`Posts about /${row.name}`"
       />
-    </div>
-  </div>
+    </template>
+  </SkillCard>
 </template>
-
-<style scoped>
-/*
- * The row answers to the width it gets, not the viewport's. The board shares
- * the page with a sidebar on wide screens, so a viewport breakpoint put the
- * posts beside the Skill in a column too narrow for either.
- */
-.board-item {
-  container: board-item / inline-size;
-}
-
-/*
- * Narrow first: the rank sits in a gutter and the posts stack under the
- * Skill, so the Skill name, never a post, is the first thing under each rank.
- */
-.board-row {
-  display: grid;
-  grid-template-columns: 1.5rem minmax(0, 1fr);
-  column-gap: 0.75rem;
-  row-gap: 1rem;
-  align-items: start;
-  padding-block: 1.25rem;
-}
-
-.board-row__skill,
-.board-row__posts {
-  grid-column: 2;
-  min-inline-size: 0;
-}
-
-/*
- * A plain number, quiet beside the name it ranks. It shares the name's
- * baseline, so the two read as one line. The first three are inked a step
- * darker, never in rose: the rose belongs to the motifs, one dot each.
- */
-.board-row__rank,
-.board-row__skill {
-  grid-row: 1;
-  align-self: baseline;
-}
-
-.board-row__rank {
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  line-height: 1.3;
-  font-variant-numeric: tabular-nums;
-  color: var(--ui-text-muted);
-}
-
-.board-row__rank--lead {
-  font-weight: 600;
-  color: var(--ui-text-highlighted);
-}
-
-.board-row__name {
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.3;
-  letter-spacing: -0.015em;
-  color: var(--ui-text-highlighted);
-  overflow-wrap: anywhere;
-  transition: opacity 200ms;
-}
-
-@media (hover: hover) {
-  .board-row__name:hover {
-    opacity: 0.7;
-  }
-}
-
-.board-row__meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.25rem 0.75rem;
-  min-inline-size: 0;
-  margin-top: 0.375rem;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  line-height: 1.125rem;
-  color: var(--ui-text-muted);
-}
-
-/*
- * The source line breaks as if it were 11rem wide, then grows back to its full
- * length where the line has room. So a long repository name gets cut short
- * before it pushes the stars or the signal onto a line of their own.
- */
-.board-row__source {
-  display: inline-flex;
-  flex: 1 1 11rem;
-  align-items: center;
-  gap: 0.5rem;
-  min-inline-size: 0;
-  max-inline-size: max-content;
-}
-
-.board-row__stars {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: 0.5rem;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.board-row__signal {
-  display: inline-flex;
-  flex: 0 1 auto;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.25rem 0.75rem;
-  min-inline-size: 0;
-  white-space: nowrap;
-}
-
-.board-row__surge {
-  white-space: normal;
-  color: var(--ui-text);
-}
-
-/* Capped for rows with no posts, which otherwise run the whole board wide. */
-.board-row__description {
-  display: -webkit-box;
-  max-inline-size: 75ch;
-  margin-top: 0.5rem;
-  overflow: hidden;
-  font-size: 0.875rem;
-  line-height: 1.55;
-  color: var(--ui-text-muted);
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-}
-
-/* As wide as its command, not as wide as the column. */
-.board-row__run {
-  inline-size: fit-content;
-  max-inline-size: 100%;
-  margin-top: 0.75rem;
-}
-
-/*
- * Beside the Skill once the row is wide enough for both. The posts take what
- * the board has to spare, and the Skill column stays the wider one.
- */
-@container board-item (min-width: 52rem) {
-  .board-row {
-    column-gap: 2rem;
-  }
-
-  .board-row--with-posts {
-    grid-template-columns: 1.5rem minmax(0, 1.25fr) minmax(21rem, 1fr);
-  }
-
-  .board-row__posts {
-    grid-column: 3;
-    grid-row: 1;
-  }
-}
-</style>
diff --git a/layers/marketing/app/pages/skills/trending.vue b/layers/marketing/app/pages/skills/trending.vue
index 8c384597..0b248417 100644
--- a/layers/marketing/app/pages/skills/trending.vue
+++ b/layers/marketing/app/pages/skills/trending.vue
@@ -191,6 +191,8 @@ const board = computed<TrendingBoardRow[]>(() => {
         ...namedSkills.value.map((s): TrendingBoardRow => ({
           key: s.registryPath,
           owner: s.owner,
+          repo: s.repo,
+          name: s.name,
           title: s.canonicalName,
           to: s.registryPath,
           subtitle: `${s.owner}/${s.repo}`,
@@ -214,6 +216,8 @@ const board = computed<TrendingBoardRow[]>(() => {
         ...fallback.value.map((s): TrendingBoardRow => ({
           key: s.registryPath,
           owner: s.owner,
+          repo: s.repo,
+          name: s.name,
           title: s.canonicalName,
           to: s.registryPath,
           subtitle: `${s.owner}/${s.repo}`,
diff --git a/shared/track-board.ts b/shared/track-board.ts
index 426cefb8..14c34a74 100644
--- a/shared/track-board.ts
+++ b/shared/track-board.ts
@@ -145,6 +145,8 @@ function talkedRow(skill: TrackTalkedInput, clockSeconds: number): TrendingBoard
   return {
     key: skill.registryPath,
     owner: skill.owner,
+    repo: skill.repo,
+    name: skill.name,
     title: skill.canonicalName,
     to: skill.registryPath,
     subtitle: `${skill.owner}/${skill.repo}`,
@@ -166,6 +168,8 @@ function memberRow(member: TrackMemberInput): TrendingBoardRow {
   return {
     key: member.registryPath,
     owner: member.owner,
+    repo: member.repo,
+    name: member.name,
     title: member.displayName || member.name,
     to: member.registryPath,
     subtitle: `${member.owner}/${member.repo}`,
diff --git a/shared/trending-range.ts b/shared/trending-range.ts
index 28665657..2ab13a5f 100644
--- a/shared/trending-range.ts
+++ b/shared/trending-range.ts
@@ -369,6 +369,10 @@ export interface TrendingBoardRow {
   key: string
   /** Whose avatar the row shows. */
   owner: string
+  /** The Repository the row's Skill lives in. */
+  repo: string
+  /** The Skill directory name the row links to, the last segment of `owner/repo/name`. */
+  name: string
   /** The row's primary link text. */
   title: string
   /** Where the primary link goes. */
@@ -490,6 +494,8 @@ export function leaderboardBoardRows(
     return {
       key: `${item.owner}/${item.repo}/${item.topSkill.name}`,
       owner: item.owner,
+      repo: item.repo,
+      name: item.topSkill.name,
       title: item.topSkill.name,
       to: item.topSkill.registryPath,
       subtitle: `${item.owner}/${item.repo}`,
diff --git a/test/unit/community-creator-ui.test.ts b/test/unit/community-creator-ui.test.ts
index 9257ae03..dd2f1d5d 100644
--- a/test/unit/community-creator-ui.test.ts
+++ b/test/unit/community-creator-ui.test.ts
@@ -134,33 +134,13 @@ describe('community creator collection preview', () => {
 })
 
 describe('community creator top skill', () => {
-  it('links the most popular skill to its canonical page with compact star counts', async () => {
+  it('links the most popular skill to its canonical page, with its Repository and stars', async () => {
     const wrapper = await mountCreator()
 
-    const link = wrapper.get('a[href="/gh/antfu/skills/nuxt"]')
-    expect(link.text()).toContain('Nuxt')
-    expect(link.text()).toContain('antfu/skills')
-    expect(link.text()).toContain('1.2K GitHub stars')
-
-    wrapper.unmount()
-  })
-
-  it('uses the singular star unit and an uncompacted count below a thousand', async () => {
-    const wrapper = await mountCreator({
-      topSkill: { ...creatorFixture().topSkill!, stars: 1 },
-    })
-
-    expect(wrapper.text()).toContain('1 GitHub star')
-
-    wrapper.unmount()
-  })
-
-  it('falls back to the raw skill name when it has no display name', async () => {
-    const wrapper = await mountCreator({
-      topSkill: { ...creatorFixture().topSkill!, displayName: null },
-    })
-
-    expect(wrapper.get('a[href="/gh/antfu/skills/nuxt"]').text()).toContain('nuxt')
+    const section = wrapper.get('section[aria-label="Most starred skill by Harlan Wilton"]')
+    expect(section.get('a[href="/gh/antfu/skills/nuxt"]').text()).toBe('/nuxt')
+    expect(section.text()).toContain('skills')
+    expect(section.text()).toContain('1.2k GitHub stars')
 
     wrapper.unmount()
   })
diff --git a/test/unit/skill-card-view.test.ts b/test/unit/skill-card-view.test.ts
index f3c0577a..b39ce0b2 100644
--- a/test/unit/skill-card-view.test.ts
+++ b/test/unit/skill-card-view.test.ts
@@ -46,6 +46,10 @@ describe('skill card view', () => {
     expect(view().metric).toMatchObject({ _tag: 'stars', text: '12k', title: '12,345 GitHub stars' })
   })
 
+  it('counts stars in the singular for one star', () => {
+    expect(view({ stars: 1 }).metric).toMatchObject({ text: '1', title: '1 GitHub star' })
+  })
+
   it('counts likes in the singular for one like', () => {
     expect(view({}, { metric: 'likes' }).metric).toMatchObject({ _tag: 'likes', text: '1', title: '1 like' })
     expect(view({ likeCount: 0 }, { metric: 'likes' }).metric).toMatchObject({ text: '0', title: '0 likes' })

From c785cff9ef32909daf6b3702412c73cbce7b4ecb Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 13:23:43 +1100
Subject: [PATCH 3/4] fix(skills): hold the run pill slot so row metrics line
 up

Rows without a run pill pushed their star count to the row's edge, so a board mixing single and multi Skill repositories showed two metric columns. Every wide row now keeps the control slot, empty or not.
---
 app/components/SkillCard.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/components/SkillCard.vue b/app/components/SkillCard.vue
index cd983d9e..3388729a 100644
--- a/app/components/SkillCard.vue
+++ b/app/components/SkillCard.vue
@@ -173,12 +173,15 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
         <slot name="aside" />
       </div>
 
-      <!-- Always drawn on wide rows, so a row without a run pill still holds the column and its neighbours line up. -->
+      <!--
+        Drawn on every row, even empty: a wide row without a run pill still
+        holds the metric and control columns, so its neighbours line up.
+      -->
       <div class="skill-card__row-end" :class="{ 'skill-card__row-end--empty': view.metricKind === 'none' && !hasControls }">
         <span v-if="view.metricKind !== 'none'" class="skill-card__row-metric">
           <SkillCardMetricLabel v-if="view.metric" :metric="view.metric" short />
         </span>
-        <div v-if="hasControls" class="skill-card__controls">
+        <div class="skill-card__controls skill-card__row-controls">
           <slot name="actions" />
           <a
             v-if="view.sourceUrl"
@@ -500,9 +503,9 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
   }
 
   /* Room for the run pill on every row, whether or not this one offers it. */
-  .skill-card__row-end {
-    min-inline-size: calc(var(--skill-card-metric) + 4.5rem);
+  .skill-card__row-controls {
     justify-content: flex-end;
+    min-inline-size: 4rem;
   }
 
   .skill-card__row-end--empty {

From 03845a71dbe956cbc831e4b0d7319c54ed127750 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 13:57:25 +1100
Subject: [PATCH 4/4] fix(home): inset compact Skill entries inside the
 freshness ledgers

The global override lost to SkillCard's scoped styles, so each entry kept its -0.5rem bleed and ran 8px past the ledger on both sides. The rule now lives in the page's scoped styles, which outrank the card's. The Review logged this at 15/100.
---
 app/assets/css/main.css |  7 -------
 app/pages/index.vue     | 11 +++++++++++
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index a89ba057..3c9659aa 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1366,10 +1366,3 @@
   opacity: 0.28;
   pointer-events: none;
 }
-
-/* A compact SkillCard fills its ledger line, inset like the rows beside it. */
-.home-freshness-ledger .skill-card--compact {
-  margin-inline: 0;
-  border-radius: 0;
-  padding: 0.875rem 0.75rem;
-}
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 20363f8c..c79fef5a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -668,6 +668,17 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
 </template>
 
 <style scoped>
+/*
+ * A compact SkillCard fills its ledger line, inset like the Repository rows
+ * beside it. Scoped here, because a global rule loses to the card's own
+ * scoped styles and the card would bleed past the ledger's edges.
+ */
+.home-freshness-ledger :deep(.skill-card--compact) {
+  margin-inline: 0;
+  border-radius: 0;
+  padding: 0.875rem 0.75rem;
+}
+
 /* Above the lifecycle band, so the search panel overlays it instead of sliding under. */
 .home-hero {
   position: relative;