From 0af1fffaed7a5c20ce7c256f7d049403dd25b33f Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 21:41:44 +1100
Subject: [PATCH 1/2] feat(home): show the top three Skills from the week board

The homepage showed six trending repository cards, which named no Skill and offered no run command. The week board already ranks Skills with their posts, so the homepage now shows its head. The board mapping moves to shared so both pages rank the same way.
---
 app/assets/css/main.css                       |  41 -------
 app/pages/index.vue                           |  96 ++++++----------
 .../marketing/app/pages/skills/trending.vue   |  83 ++------------
 shared/trending-range.ts                      | 103 ++++++++++++++++++
 test/unit/trending-range.test.ts              |  89 ++++++++++++++-
 5 files changed, 234 insertions(+), 178 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 53bce69d..b40b36ee 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -951,47 +951,6 @@
   text-decoration-color: currentColor;
 }
 
-/* Trending cards: the repository link covers the card, and the source link
-   sits above it. */
-.home-trending-card {
-  position: relative;
-  display: flex;
-  height: 100%;
-  min-width: 0;
-  flex-direction: column;
-  border: 1px solid var(--ui-border);
-  border-radius: var(--ui-radius);
-  padding: 1rem;
-  transition: border-color 200ms ease-out;
-}
-
-.home-trending-card__link::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-}
-
-.home-trending-card__action {
-  position: relative;
-  z-index: 1;
-}
-
-@media (hover: hover) {
-  .home-trending-card:has(.home-trending-card__link:hover) {
-    border-color: var(--ui-text-muted);
-  }
-}
-
-.home-trending-card:has(.home-trending-card__link:focus-visible) {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: 2px;
-}
-
-.home-trending-card__link:focus-visible {
-  outline: none;
-}
-
 /* The homepage authoring link opens the setup wizard. */
 .home-make-strip {
   display: grid;
diff --git a/app/pages/index.vue b/app/pages/index.vue
index ba57b981..a1d01980 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -4,7 +4,8 @@ import type { RecentUpdateCard, RecentUpdatesResponse } from '~~/server/api/feed
 import type { TrendingFeedResponse } from '~~/server/api/feed/trending.get'
 import { agentSetupPrompt } from '#shared/agent-setup'
 import { WRITING_COMPARISON_LINK } from '#shared/comparison-navigation'
-import { avatarProxyUrl, githubAvatarProxyUrl } from '#shared/image-proxy'
+import { avatarProxyUrl } from '#shared/image-proxy'
+import { feedBoardRows, trendingRangeMeta } from '#shared/trending-range'
 import OutcomeClusterGrid from '../components/OutcomeClusterGrid.vue'
 import { AGENT_LOGOS } from '../utils/agent-logos'
 import { MORE_AGENT_COUNT } from '../utils/agent-reach'
@@ -34,6 +35,9 @@ defineOgImage('Page.takumi', {
   description: 'Try any skill before you install it. Your agent can search for its own.',
 }, { alt: 'skilld, agent skills for you and your agent' })
 
+/** Skills the trending section shows: the head of the week board. */
+const HOME_BOARD_ROWS = 3
+
 const serverTimingHeader = useResponseHeader('Server-Timing')
 const homeDataStartedAt = performance.now()
 const homeDataTimings: string[] = []
@@ -75,14 +79,19 @@ const [
   // Server-rendered rather than lazy: the section is one of the few places on
   // the homepage whose content changes hourly, and the endpoint is cached at
   // the edge for 5 minutes, so it costs a cache read rather than a query.
-  withHomeDataTiming('home-trending', useFetch<TrendingFeedResponse>('/api/feed/trending', {
-    key: 'home-trending-v2',
+  withHomeDataTiming('home-trending', useFetch('/api/feed/trending', {
+    key: 'home-trending-v3',
     // The hero texture prints Skill names from every repo it gets, so it asks
-    // for more repos than the six-card section below it.
+    // for more repos than the board below it shows Skills. No window: the
+    // feed defaults to the week, which is the board this section heads.
     query: { limit: 24 },
-    // Repositories only. The named Skills, with their posts and star series,
-    // serve `/skills/trending` and would ride in this page's payload unread.
-    pick: ['items'],
+    // The board ships only its head. The rest of the named Skills, with their
+    // posts and star series, serve `/skills/trending` and would ride in this
+    // page's payload unread.
+    transform: (feed: TrendingFeedResponse) => ({
+      items: feed.items,
+      board: feedBoardRows(feed).slice(0, HOME_BOARD_ROWS),
+    }),
   })),
 ])
 
@@ -95,20 +104,25 @@ const recentUpdates = computed(() => updatesData.value?.items ?? [])
 const recentPublishes = computed(() => publishesData.value?.items ?? [])
 
 const trendingRepos = computed(() => trendingData.value?.items ?? [])
-/** The section below the fold stays a six-card grid whatever the texture uses. */
-const trendingSectionRepos = computed(() => trendingRepos.value.slice(0, 6))
+
+/** Owners whose avatar failed, which means the GitHub account is gone; see `/skills/trending`. */
+const missingAvatars = ref(new Set<string>())
+function onAvatarError(owner: string) {
+  missingAvatars.value = new Set(missingAvatars.value).add(owner)
+}
+const trendingBoard = computed(() =>
+  (trendingData.value?.board ?? []).filter(row => !missingAvatars.value.has(row.owner)),
+)
 
 /**
- * The section is hidden entirely below this many entries. A trending strip
- * showing one repo reads as a broken feature, and an empty-state box on the
- * homepage costs more attention than it returns.
+ * The section is hidden entirely when the board comes up short. A trending
+ * strip showing one Skill reads as a broken feature, and an empty-state box on
+ * the homepage costs more attention than it returns. Counted from what the
+ * server sent, so a dead avatar never hides the section after it rendered.
  */
-const MIN_TRENDING_TO_SHOW = 3
-const showTrending = computed(() => trendingRepos.value.length >= MIN_TRENDING_TO_SHOW)
+const showTrending = computed(() => (trendingData.value?.board.length ?? 0) >= HOME_BOARD_ROWS)
 
-function trendingShareLabel(authorCount: number): string {
-  return authorCount === 1 ? '1 dev shared it' : `${authorCount} devs shared it`
-}
+const weekBoardPath = trendingRangeMeta('week').path
 
 /** Real Skill names from this week's trending repositories, for the hero texture. */
 const heroTextureNames = computed(() =>
@@ -279,51 +293,11 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
         </div>
 
         <template v-else>
-          <ol class="mt-8 grid list-none gap-4 p-0 sm:grid-cols-2">
-            <li v-for="repo in trendingSectionRepos" :key="`${repo.owner}/${repo.repo}`" class="min-w-0">
-              <article class="home-trending-card">
-                <div class="flex min-w-0 items-center gap-2">
-                  <img
-                    :src="githubAvatarProxyUrl(repo.owner, 64)"
-                    alt=""
-                    width="24"
-                    height="24"
-                    class="size-6 shrink-0 rounded-full border border-default bg-muted"
-                    loading="lazy"
-                    decoding="async"
-                  >
-                  <NuxtLink
-                    :to="repoHubPath(repo.owner, repo.repo)"
-                    class="home-trending-card__link min-w-0 flex-1 truncate font-medium text-default"
-                  >
-                    {{ repo.owner }}/{{ repo.repo }}
-                  </NuxtLink>
-                  <span class="shrink-0 font-mono text-xs text-muted tabular-nums">
-                    {{ repo.skillCount }} {{ repo.skillCount === 1 ? 'skill' : 'skills' }}
-                  </span>
-                </div>
-                <p v-if="repo.evidence" class="mt-2 line-clamp-2 text-sm leading-relaxed text-muted">
-                  {{ repo.evidence.text }}
-                </p>
-                <p class="mt-auto flex flex-wrap items-center gap-x-3 gap-y-1 pt-3 text-xs text-muted">
-                  <span>{{ trendingShareLabel(repo.authorCount) }}</span>
-                  <span v-if="repo.evidence" class="font-mono">@{{ repo.evidence.authorHandle }}</span>
-                  <a
-                    v-if="repo.evidence"
-                    :href="repo.evidence.url"
-                    target="_blank"
-                    rel="noopener"
-                    class="home-trending-card__action inline-flex min-h-6 items-center gap-1 font-mono underline underline-offset-4 hover:text-default"
-                  >
-                    Source
-                    <UIcon name="i-lucide-arrow-up-right" class="size-3.5 shrink-0" aria-hidden="true" />
-                  </a>
-                </p>
-              </article>
-            </li>
-          </ol>
+          <div class="mt-8">
+            <BoardRankedList :rows="trendingBoard" surface="home-trending-row" @avatar-error="onAvatarError" />
+          </div>
           <UButton
-            to="/skills/trending"
+            :to="weekBoardPath"
             label="All trending skills"
             color="neutral"
             variant="ghost"
diff --git a/layers/marketing/app/pages/skills/trending.vue b/layers/marketing/app/pages/skills/trending.vue
index 0b248417..efd3c26e 100644
--- a/layers/marketing/app/pages/skills/trending.vue
+++ b/layers/marketing/app/pages/skills/trending.vue
@@ -4,17 +4,15 @@ 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 { relativeDay } from '#shared/trending-post'
 import {
-  boardPost,
   DEMOTED_STARRED_REPOSITORIES,
+  feedBoardRows,
   isEvidenced,
   leaderboardBoardRows,
   MIN_INDEXABLE_ROWS,
   monthStamp,
   resolveTrendingPage,
   resolveTrendingRange,
-  singleSkill,
   TRENDING_BOARD_LIMIT,
   TRENDING_RANGES,
   trendingRangeDescription,
@@ -156,81 +154,16 @@ function onAvatarError(owner: string) {
   missingAvatars.value = new Set(missingAvatars.value).add(owner)
 }
 
-const namedSkills = computed(() =>
-  (feed.value?.namedSkills ?? []).filter(s => !missingAvatars.value.has(s.owner)),
-)
-
-/**
- * Fallback minus anything already on the page.
- *
- * The two lists are drawn from overlapping sources, and production served
- * `ppt-master`, `hallmark` and `karpathy-guidelines` in both at once, with
- * different numbers against each (`+865 stars` above, `46,712 stars` below).
- * The same skill twice is not two findings.
- */
-const fallback = computed(() => {
-  const shown = new Set(namedSkills.value.map(s => s.registryPath))
-  return (feed.value?.fallback ?? []).filter(s =>
-    !shown.has(s.registryPath) && !missingAvatars.value.has(s.owner),
-  )
-})
-
 /**
- * One board, in one rank sequence.
- *
- * Evidenced rows always sit above star-only rows, never interleaved by score.
- * Ranking a 200,000-star repository against "two people named it" would let
- * raw popularity win the page every week, which is what the `all` range is
- * already for. Filling the tail with starred skills is honest; letting them
- * outrank the evidence is not.
+ * One board, in one rank sequence; see `feedBoardRows` for the order and
+ * the filler rule. Rows whose owner is gone drop before the cap, so a dead
+ * account never costs the board a row.
  */
 const board = computed<TrendingBoardRow[]>(() => {
-  const rows = leaderboard.value
-    ? leaderboardBoardRows(leaderboard.value.items)
-    : [
-        ...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}`,
-          description: s.description,
-          stars: s.stars,
-          // `?? []` covers an edge-cached feed from before these fields
-          // existed, for the five minutes one can outlive a deploy.
-          starSeries: s.starSeries ?? [],
-          names: [s.name, s.canonicalName],
-          // A post or a single-Skill surge put this exact Skill here, so the
-          // run command never guesses.
-          skill: { owner: s.owner, repo: s.repo, name: s.name },
-          reason: s.evidence
-            ? { _tag: 'posts', posts: [s.evidence, ...(s.morePosts ?? [])].map(post => boardPost(post, clock.value)), mentionsByDay: s.mentionsByDay ?? null }
-            : s.starGain !== null
-              ? { _tag: 'surge', gain: s.starGain, when: s.starGainDay ? relativeDay(s.starGainDay, clock.value) : null }
-              : { _tag: 'filler' },
-        })),
-        // Filler says so. A starred repository shown because the socials were
-        // quiet must never pass for one that devs posted about.
-        ...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}`,
-          description: s.description,
-          stars: s.stars,
-          starSeries: s.starSeries ?? [],
-          names: [s.name, s.canonicalName],
-          skill: singleSkill(s.owner, s.repo, s.name, s.repoSkillCount ?? 0),
-          reason: { _tag: 'filler' },
-        })),
-      ].slice(0, BOARD_LIMIT)
-
-  return rows.filter(row => !missingAvatars.value.has(row.owner))
+  const alive = (row: TrendingBoardRow) => !missingAvatars.value.has(row.owner)
+  if (leaderboard.value)
+    return leaderboardBoardRows(leaderboard.value.items).filter(alive)
+  return feed.value ? feedBoardRows(feed.value).filter(alive).slice(0, BOARD_LIMIT) : []
 })
 
 const earlierRows = computed(() => {
diff --git a/shared/trending-range.ts b/shared/trending-range.ts
index 2ab13a5f..1207a124 100644
--- a/shared/trending-range.ts
+++ b/shared/trending-range.ts
@@ -423,6 +423,109 @@ export function isEvidenced(row: TrendingBoardRow): boolean {
   return row.reason._tag !== 'filler' && row.reason._tag !== 'member'
 }
 
+/**
+ * The fields `feedBoardRows` reads off a named Skill in the trending feed.
+ *
+ * Structural, like {@link LeaderboardRowInput}, so the mapper never imports
+ * the server route. The optional fields cover an edge-cached feed from before
+ * they existed, for the five minutes one can outlive a deploy.
+ */
+export interface FeedSkillInput {
+  owner: string
+  repo: string
+  name: string
+  canonicalName: string
+  registryPath: string
+  description: string | null
+  stars: number | null
+  starGain: number | null
+  starGainDay: number | null
+  evidence: BoardPostInput | null
+  morePosts?: readonly BoardPostInput[]
+  mentionsByDay?: readonly number[] | null
+  starSeries?: readonly StarPoint[]
+}
+
+/** The fields `feedBoardRows` reads off a star-ranked filler Skill. */
+export interface FeedFallbackInput {
+  owner: string
+  repo: string
+  name: string
+  canonicalName: string
+  registryPath: string
+  description: string | null
+  stars: number
+  repoSkillCount?: number
+  starSeries?: readonly StarPoint[]
+}
+
+export interface FeedBoardInput {
+  namedSkills: readonly FeedSkillInput[]
+  fallback: readonly FeedFallbackInput[]
+  /** Unix seconds the ranking was computed at. Every date on the board is measured against it. */
+  computedAt: number
+}
+
+/**
+ * The week and month boards, in one rank sequence.
+ *
+ * Evidenced rows always sit above star-only rows, never interleaved by score.
+ * Ranking a 200,000-star repository against "two people named it" would let
+ * raw popularity win the board every week, which is what the `all` range is
+ * already for. Filling the tail with starred skills is honest; letting them
+ * outrank the evidence is not.
+ *
+ * Filler drops any Skill already named. The two lists are drawn from
+ * overlapping sources, and production served `ppt-master`, `hallmark` and
+ * `karpathy-guidelines` in both at once, with different numbers against each.
+ * The same skill twice is not two findings.
+ */
+export function feedBoardRows(feed: FeedBoardInput): TrendingBoardRow[] {
+  const clock = feed.computedAt
+  const named = feed.namedSkills.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}`,
+    description: s.description,
+    stars: s.stars,
+    starSeries: s.starSeries ?? [],
+    names: [s.name, s.canonicalName],
+    // A post or a single-Skill surge put this exact Skill here, so the run
+    // command never guesses.
+    skill: { owner: s.owner, repo: s.repo, name: s.name },
+    reason: s.evidence
+      ? { _tag: 'posts', posts: [s.evidence, ...(s.morePosts ?? [])].map(post => boardPost(post, clock)), mentionsByDay: s.mentionsByDay ?? null }
+      : s.starGain !== null
+        ? { _tag: 'surge', gain: s.starGain, when: s.starGainDay ? relativeDay(s.starGainDay, clock) : null }
+        : { _tag: 'filler' },
+  }))
+  const shown = new Set(named.map(row => row.to))
+  // Filler says so. A starred repository shown because the socials were quiet
+  // must never pass for one that devs posted about.
+  const filler = feed.fallback
+    .filter(s => !shown.has(s.registryPath))
+    .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}`,
+      description: s.description,
+      stars: s.stars,
+      starSeries: s.starSeries ?? [],
+      names: [s.name, s.canonicalName],
+      skill: singleSkill(s.owner, s.repo, s.name, s.repoSkillCount ?? 0),
+      reason: { _tag: 'filler' },
+    }))
+  return [...named, ...filler]
+}
+
 /**
  * The fields `leaderboardBoardRows` reads off a `SkillsLeaderboardItem`.
  *
diff --git a/test/unit/trending-range.test.ts b/test/unit/trending-range.test.ts
index cb52ed88..198cfff3 100644
--- a/test/unit/trending-range.test.ts
+++ b/test/unit/trending-range.test.ts
@@ -1,6 +1,7 @@
-import type { LeaderboardRowInput } from '#shared/trending-range'
+import type { FeedFallbackInput, FeedSkillInput, LeaderboardRowInput } from '#shared/trending-range'
 import { describe, expect, it } from 'vitest'
 import {
+  feedBoardRows,
   isEvidenced,
   leaderboardBoardRows,
   resolveTrendingPage,
@@ -197,6 +198,92 @@ describe('leaderboard rows on the trending board', () => {
   })
 })
 
+const FEED_CLOCK = 1_790_000_000
+
+function namedSkill(overrides: Partial<FeedSkillInput> = {}): FeedSkillInput {
+  return {
+    owner: 'pbakaus',
+    repo: 'impeccable',
+    name: 'impeccable',
+    canonicalName: 'impeccable',
+    registryPath: '/gh/pbakaus/impeccable/impeccable',
+    description: 'Design taste for agents.',
+    stars: 3_200,
+    starGain: null,
+    starGainDay: null,
+    evidence: null,
+    ...overrides,
+  }
+}
+
+function fallbackSkill(overrides: Partial<FeedFallbackInput> = {}): FeedFallbackInput {
+  return {
+    owner: 'mattpocock',
+    repo: 'skills',
+    name: 'tdd',
+    canonicalName: 'tdd',
+    registryPath: '/gh/mattpocock/skills/tdd',
+    description: 'Test first.',
+    stars: 40_000,
+    repoSkillCount: 12,
+    ...overrides,
+  }
+}
+
+describe('feed rows on the week and month boards', () => {
+  it('ranks every named skill above the star filler, whatever the stars', () => {
+    const rows = feedBoardRows({
+      namedSkills: [namedSkill({ stars: 10 })],
+      fallback: [fallbackSkill({ stars: 200_000 })],
+      computedAt: FEED_CLOCK,
+    })
+
+    expect(rows.map(row => row.key)).toEqual(['/gh/pbakaus/impeccable/impeccable', '/gh/mattpocock/skills/tdd'])
+  })
+
+  it('drops filler that repeats a named skill', () => {
+    const rows = feedBoardRows({
+      namedSkills: [namedSkill()],
+      fallback: [fallbackSkill({ registryPath: '/gh/pbakaus/impeccable/impeccable' }), fallbackSkill()],
+      computedAt: FEED_CLOCK,
+    })
+
+    expect(rows.map(row => row.key)).toEqual(['/gh/pbakaus/impeccable/impeccable', '/gh/mattpocock/skills/tdd'])
+  })
+
+  it('quotes the post that named a skill, dated against the feed clock', () => {
+    const post = {
+      url: 'https://x.com/someone/status/1',
+      text: 'impeccable fixed my landing page',
+      platform: 'x' as const,
+      authorHandle: 'someone',
+      authorAvatar: null,
+      favouriteCount: 4,
+      postedAt: FEED_CLOCK - 86_400,
+    }
+    const [row] = feedBoardRows({ namedSkills: [namedSkill({ evidence: post })], fallback: [], computedAt: FEED_CLOCK })
+
+    expect(row!.reason).toMatchObject({ _tag: 'posts', posts: [{ handle: 'someone', when: '1d ago' }] })
+    expect(isEvidenced(row!)).toBe(true)
+  })
+
+  it('states the surge when stars, not posts, named the skill', () => {
+    const [row] = feedBoardRows({ namedSkills: [namedSkill({ starGain: 865 })], fallback: [], computedAt: FEED_CLOCK })
+
+    expect(row!.reason).toMatchObject({ _tag: 'surge', gain: 865 })
+  })
+
+  it('gives filler a run command target only when its repository holds one skill', () => {
+    const rows = feedBoardRows({
+      namedSkills: [],
+      fallback: [fallbackSkill(), fallbackSkill({ repo: 'solo', registryPath: '/gh/mattpocock/solo/tdd', repoSkillCount: 1 })],
+      computedAt: FEED_CLOCK,
+    })
+
+    expect(rows.map(row => row.skill)).toEqual([null, { owner: 'mattpocock', repo: 'solo', name: 'tdd' }])
+  })
+})
+
 describe('the skill a row may print a run command for', () => {
   it('is the skill when its repository holds only that one', () => {
     expect(singleSkill('pbakaus', 'impeccable', 'impeccable', 1))

From b854fd7039cc006be38db2055b5f1c954eddbac1 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 22:20:10 +1100
Subject: [PATCH 2/2] feat(trending): fold each row's posts behind poster faces

Every trending row carried a full post card under it, which tripled its height on the board, the homepage, and track pages. A row now spends one line on the description and one on why it ranked: up to three poster circles that open the carousel, then the first post as a quote. The braille spark moves beside the Skill name. Closed posts stay in the server HTML.
---
 DESIGN.md                                     |   5 +-
 app/components/BrailleSpark.vue               |   9 +-
 app/components/SkillCard.vue                  |  36 ++++-
 .../skill-card/_SkillCardIdentity.vue         |   1 +
 .../app/components/TrendingBoardItem.vue      |  91 ++++++-----
 .../app/components/TrendingPostFaces.vue      | 143 ++++++++++++++++++
 .../app/components/TrendingPostQuote.vue      |  80 ++++++++++
 7 files changed, 319 insertions(+), 46 deletions(-)
 create mode 100644 layers/marketing/app/components/TrendingPostFaces.vue
 create mode 100644 layers/marketing/app/components/TrendingPostQuote.vue

diff --git a/DESIGN.md b/DESIGN.md
index 2cbc76f4..e474d91c 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -456,17 +456,18 @@ These are editorial sets, not necessarily database collections yet. If a set has
 - **The accent rail is banned**: a 2px rose border down a card's leading edge borrowed the shape of an error or callout border, and at a tall card's height it was the loudest thing on the page. `.lead-emphasis` spends the same accent as light instead of as a bar: a corner wash at 9% and a top hairline that fades out within a fifth of the width. Banned 2026-08-20.
 - **Install commands are syntax-coloured, always**: `npx`, `skilld`, `add`, and the flags stay quiet; the target and the skill name carry the accent, because that is the only part that differs between two commands. The accent rose is darkened to `oklch(0.44 0.17 17.32)` in light and lightened to `oklch(0.8 0.12 17.32)` in dark, since the button rose is 3.2:1 on `bg-muted` at small mono sizes.
 - **Weekly CTAs point at the email, never at a sign-in**: `See this week's` opens the public preview. A button labelled "get" that opens an OAuth wall is a promise the page does not keep, and Loop 1 admits no gate (VISION principle 3).
-- **Trending rows lead with the Skill**: the Skill column outweighs the posts, which scroll beside it in a per-row carousel as testimony. The one acquisition CTA, an inert email preview beside `Sign in with GitHub`, sits in the page header on wide screens and after the fifth row on narrow ones. Confirmed 2026-08-21; the 9/3 sidebar gave way on 2026-10-01 because it took a quarter of the board's width.
+- **Trending rows lead with the Skill**: the Skill column outweighs the posts, which wait behind the poster faces as testimony. The one acquisition CTA, an inert email preview beside `Sign in with GitHub`, sits in the page header on wide screens and after the fifth row on narrow ones. Confirmed 2026-08-21; the 9/3 sidebar gave way on 2026-10-01 because it took a quarter of the board's width.
 - **The dot is the atom**: stone dots are the noise, and one rose dot is the Skill you picked. The mark, the textures and the motifs all follow it, with one rose element per motif. Confirmed in the brand lab on 2026-10-06.
 - **The prompt caret replaces the rose chevron**: the mark is an ink caret plus one rose dot. In the lockup the dot trails the wordmark as a cursor. Harlan chose the trailing dot over a rose tittle on the `i`, so the dot reads as a cursor. Confirmed 2026-10-06.
 - **One geometry feeds every placement**: `shared/brand-mark.ts` holds the coordinates and the outlined wordmark. `AppLogo`, the OG lockup and every file in `public/` come from it, and `pnpm brand:assets` writes the files. The old chevron lived in hand-written copies, and their rose shades and wordmark weights had drifted apart. Confirmed 2026-10-06.
 - **Three textures replace the noise field**: Braille names for the hero, OG cards and the CLI; Converge for dividers and loading; File minimap for Skill pages and per-Skill OG cards. One job each, so no texture becomes wallpaper. Confirmed 2026-10-06.
 - **The lockup dot is an OG card's one rose element**: the 4px rose top bar, the rose quote rails and the rose avatar ring went stone. On the Splash card, the braille field radiates from the lockup's dot, so the texture spends no second rose. Confirmed 2026-10-06.
 - **OG cards repeat the homepage hero**: every card centres the lockup, a Plus Jakarta Sans title and its detail, with Braille names in the margins. Harlan chose this over a left-aligned editorial card and a card that leads with the run command. It supersedes the per-card textures above: the Skill card's file minimap, the Make a skill card's large `SKILL.md`, and the separate Splash and Make a skill templates are gone. Confirmed 2026-10-06.
-- **The braille spark replaces the trending flame**: seven braille bars for seven days of mentions, today in rose. The emoji exception for Trending is retired. The spark keeps the sourced mention count beside it, which the flame never carried. Confirmed 2026-10-06.
+- **The braille spark replaces the trending flame**: seven braille bars for seven days of mentions, today in rose. The emoji exception for Trending is retired. The spark keeps the sourced mention count beside it, which the flame never carried. On a trending row the poster faces carry that count, so the spark beside the name drops it. Confirmed 2026-10-06.
 - **Run and install read as different materials**: run is a dashed border with a hollow dot, because nothing stays; install is a solid border with a filled dot, because files land. Run is preselected. Confirmed 2026-10-06.
 - **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.
+- **Trending rows take two lines of words**: the first line says what the Skill does, and the second says why it ranked. A row ranked by posts shows at most three poster circles, the third counting the rest, then the first post as one quote line. The circles open the post carousel, and the quote line steps aside while the carousel shows. The braille spark sits beside the Skill name, where the shorter name line has room. Every post stays in the server HTML. A row dropped from 292px to 78px on desktop and from 377px to 163px on a phone. Harlan picked this from a lab of five takes on 2026-10-06. It supersedes the two-line descriptions and the carousel under every row.
 - **A three-step lifecycle band replaces the four tiles**: under the hero, one band maps the product in its real order: find Skills, run, fork or install, keep up to date. Each step is one link: a mono step name, then one short sans line. No markers, pitch lines or commands. 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. From 1024px, three centered columns sit under the centered hero; below that, a vertical list with the dots down the left. The hero and the band must fit a 1440×900 viewport. Harlan cut it from six steps on 2026-10-06, because six columns of mixed type read as too busy.
 - **A Developers menu groups the build surfaces**: the desktop header keeps Trending Skills and Find Skills as links, and folds CLI, MCP server, SDK and Make a skill into one Developers menu, as nuxtseo.com does. The trigger is a button, so a keyboard opens the panel without leaving the page; the panel's last link reaches `/developers`. Harlan asked for this on 2026-10-06.
 - **The Developers menu is a bento**: the three ways to connect stack as compact rows, each a lucide icon tile, a name and one line. Make a skill fills the second column as the one large card, with an ember atmosphere and the File minimap in its corner. It names both routes: the guides and Skillgen. `/make-skill` is the one entry for authors and routes to either, so Skillgen has no card of its own. The mobile menu lists the same four items as a plain group. Harlan chose this over five uniform cards on 2026-10-06.
diff --git a/app/components/BrailleSpark.vue b/app/components/BrailleSpark.vue
index 46f3e896..aecc3ec5 100644
--- a/app/components/BrailleSpark.vue
+++ b/app/components/BrailleSpark.vue
@@ -17,6 +17,7 @@ const {
   unit = SPARK_MENTIONS,
   period,
   showUnit = true,
+  showTotal = true,
 } = defineProps<{
   /** Seven daily counts, oldest first, today last. */
   counts: readonly number[]
@@ -28,6 +29,12 @@ const {
   period?: string
   /** Show the unit after the count. Hide it only where a column heading names it. */
   showUnit?: boolean
+  /**
+   * Show the count beside the bars. Hide it only where something beside the
+   * spark already counts, such as the poster faces on a trending row. The
+   * screen reader label keeps the count either way.
+   */
+  showTotal?: boolean
 }>()
 
 const week = computed(() => sparkWeek(counts))
@@ -44,7 +51,7 @@ const label = computed(() => `${counted.value}. Per day, oldest first: ${week.va
 <template>
   <span class="braille-spark" role="img" :aria-label="label">
     <span class="braille-spark__bars" aria-hidden="true"><span v-for="(cell, index) in cells" :key="index" :class="cell.empty ? 'braille-spark__track' : index === cells.length - 1 && 'braille-spark__today'">{{ cell.glyph }}</span></span>
-    <span class="braille-spark__total" aria-hidden="true">{{ totalText }}</span>
+    <span v-if="showTotal" class="braille-spark__total" aria-hidden="true">{{ totalText }}</span>
   </span>
 </template>
 
diff --git a/app/components/SkillCard.vue b/app/components/SkillCard.vue
index 51f03031..09a8ac8b 100644
--- a/app/components/SkillCard.vue
+++ b/app/components/SkillCard.vue
@@ -30,6 +30,7 @@ const {
   actions,
   // Vue casts an absent boolean to false; an explicit undefined keeps the layout default.
   description = undefined,
+  descriptionLines = 2,
   rank,
   note,
   trending = false,
@@ -43,6 +44,12 @@ const {
   actions?: readonly SkillCardAction[]
   /** Defaults to on, except in compact entries. */
   description?: boolean
+  /**
+   * Cards and rows only: lines of description before the clamp. One where
+   * the entry spends its second line on something else, such as the posts
+   * that put a trending Skill on the board.
+   */
+  descriptionLines?: 1 | 2
   /** One-based position in a ranked list. */
   rank?: number
   /** Why the Skill is here, in a curator's or editor's words. */
@@ -58,6 +65,8 @@ const emit = defineEmits<{
 }>()
 
 const slots = defineSlots<{
+  /** A small mark beside the name, such as a braille spark. */
+  flag?: () => unknown
   /** Inline facts beside the metric, such as "Watching for changes" or a braille spark. */
   meta?: () => unknown
   /** A block under the description, such as dependencies. */
@@ -87,8 +96,10 @@ const rankText = computed(() => view.value.rank == null ? null : String(view.val
 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)
+/** A braille spark in the meta or flag slot already spends the entry's rose. */
+const markAccent = computed(() => !slots.meta && !slots.flag)
+/** The description clamp, unless a note above it takes the second line. */
+const descriptionClamp = computed(() => descriptionLines === 1 ? 'line-clamp-1' : 'line-clamp-2')
 
 /**
  * Rows in one list share their metric column, so its width comes from what
@@ -102,13 +113,17 @@ 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" @avatar-error="emit('avatarError', view.owner)" />
+      <SkillCardIdentity :view :size="32" :accent="markAccent" wrap class="min-w-0 flex-1" @avatar-error="emit('avatarError', view.owner)">
+        <template v-if="$slots.flag" #flag>
+          <slot name="flag" />
+        </template>
+      </SkillCardIdentity>
     </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'">
+    <p v-if="view.description" class="skill-card__description" :class="view.note ? 'mt-1 line-clamp-1' : ['mt-3', descriptionClamp]">
       {{ view.description }}
     </p>
 
@@ -151,13 +166,17 @@ 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" @avatar-error="emit('avatarError', view.owner)" />
+      <SkillCardIdentity :view :size="36" :accent="markAccent" wrap class="skill-card__row-id" @avatar-error="emit('avatarError', view.owner)">
+        <template v-if="$slots.flag" #flag>
+          <slot name="flag" />
+        </template>
+      </SkillCardIdentity>
 
       <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'">
+        <p v-if="view.description" class="skill-card__description" :class="view.note ? 'mt-0.5 line-clamp-1' : descriptionClamp">
           {{ view.description }}
         </p>
         <div v-if="$slots.footer" class="skill-card__raise mt-2">
@@ -434,6 +453,11 @@ const metricWidth = computed(() => view.value.metricKind === 'none' ? '0rem' : v
   margin-block-start: 0.875rem;
 }
 
+/* An aside whose one block is hidden, such as posts behind a toggle, takes no space. */
+.skill-card__row-aside:has(> [hidden]:only-child) {
+  display: none;
+}
+
 .skill-card__row-end {
   grid-area: end;
   display: flex;
diff --git a/app/components/skill-card/_SkillCardIdentity.vue b/app/components/skill-card/_SkillCardIdentity.vue
index 2bdc4edb..2d4aa287 100644
--- a/app/components/skill-card/_SkillCardIdentity.vue
+++ b/app/components/skill-card/_SkillCardIdentity.vue
@@ -47,6 +47,7 @@ const where = computed(() => view.author ? view.repo : view.source)
         </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" />
+        <span v-if="$slots.flag" class="skill-id__flag"><slot name="flag" /></span>
       </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">
diff --git a/layers/marketing/app/components/TrendingBoardItem.vue b/layers/marketing/app/components/TrendingBoardItem.vue
index 1a3ac1ce..98ed611a 100644
--- a/layers/marketing/app/components/TrendingBoardItem.vue
+++ b/layers/marketing/app/components/TrendingBoardItem.vue
@@ -2,12 +2,15 @@
 import type { TrendingBoardRow } from '#shared/trending-range'
 import type { SkillCardSkill } from '~/types/skill-card'
 import TrendingPostCarousel from './TrendingPostCarousel.vue'
+import TrendingPostFaces from './TrendingPostFaces.vue'
+import TrendingPostQuote from './TrendingPostQuote.vue'
 import TrendingStarSpark from './TrendingStarSpark.vue'
 
 /**
- * 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.
+ * One board entry in two lines of words: what the Skill does, then why it is
+ * on the board. A row ranked by posts shows who posted and quotes the first
+ * one; the faces open every post. The posts used to show as a card under
+ * every row and tripled its height.
  */
 const { row, rank, surface = 'trending-row' } = defineProps<{
   row: TrendingBoardRow
@@ -38,29 +41,30 @@ const posts = computed(() => (row.reason._tag === 'posts' ? row.reason.posts : [
 
 /**
  * Each row draws the signal that ranked it, and only that one. Mentions ranked
- * a row with posts, so it gets the braille spark. Stars ranked a surge or a
- * filler row, so those keep the star line. Two charts on one line would ask the
- * reader which one put the row here.
+ * a row with posts, so it gets the braille spark beside its name. Stars ranked
+ * a surge or a filler row, so those keep the star line. Two charts on one row
+ * would ask the reader which one put the row here.
  *
  * A month board ranks posts older than the spark's seven days. A week of
- * blank cells draws nothing beside a bare zero, so that row shows no spark and
- * its posts carry their own dates.
+ * blank cells draws nothing, so that row shows no spark and its faces carry
+ * the evidence alone.
  */
-const isSocial = computed(() => row.reason._tag === 'posts')
 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)
+const starLine = computed(() => row.reason._tag !== 'posts' && row.starSeries.length > 0)
+
 /**
- * Whether the meta line has anything to say. A track member says nothing
- * there: its section heading already states the order.
+ * Whether the second line has anything to say. A track member says nothing
+ * there: its section heading already states the order. Its description keeps
+ * both lines instead.
  */
-const hasSignal = computed(() => {
-  if (row.reason._tag === 'member')
-    return false
-  return !isSocial.value || mentions.value !== null
-})
+const hasReason = computed(() => row.reason._tag !== 'member' || starLine.value)
+
+const open = ref(false)
+const postsId = useId()
+const postsLabel = computed(() => `${posts.value.length} ${posts.value.length === 1 ? 'post' : 'posts'} about /${row.name}`)
 </script>
 
 <template>
@@ -70,31 +74,44 @@ const hasSignal = computed(() => {
     :rank
     :actions
     :surface
+    :description-lines="hasReason ? 1 : 2"
     @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 v-if="mentions" #flag>
+      <BrailleSpark :counts="mentions" period="in 7 days" :show-total="false" />
+    </template>
+    <template v-if="hasReason" #meta>
+      <template v-if="posts.length">
+        <TrendingPostFaces :posts :open :controls="postsId" :label="postsLabel" @toggle="() => { open = !open }" />
+        <!-- The first card repeats this post, so the line steps aside while the cards show. -->
+        <TrendingPostQuote v-if="!open" :post="posts[0]!" :names="row.names" />
+      </template>
+      <template v-else>
+        <TrendingStarSpark v-if="starLine" :points="row.starSeries" />
+        <template v-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>
-      <!--
-        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>
+    <!-- In the server HTML while closed, so every post the board ranked on stays readable to a crawler. -->
     <template v-if="posts.length" #aside>
-      <TrendingPostCarousel
-        :posts="posts"
-        :names="row.names"
-        :label="`Posts about /${row.name}`"
-      />
+      <div :id="postsId" :hidden="!open">
+        <TrendingPostCarousel
+          :posts="posts"
+          :names="row.names"
+          :label="`Posts about /${row.name}`"
+        />
+      </div>
     </template>
   </SkillCard>
 </template>
diff --git a/layers/marketing/app/components/TrendingPostFaces.vue b/layers/marketing/app/components/TrendingPostFaces.vue
new file mode 100644
index 00000000..6c87e736
--- /dev/null
+++ b/layers/marketing/app/components/TrendingPostFaces.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { TrendingPost } from '#shared/trending-range'
+import { avatarProxyUrl } from '#shared/image-proxy'
+
+/**
+ * The people who posted about a Skill, as overlapping faces, and the toggle
+ * that opens their posts.
+ *
+ * Never more than three circles, so every row's quote starts in the same
+ * place. Past three posts the third circle counts the rest. The faces carry
+ * the count, which is why the spark beside the name drops its own.
+ */
+const { posts, open, controls, label } = defineProps<{
+  posts: readonly TrendingPost[]
+  /** Whether the posts it controls are showing. */
+  open: boolean
+  /** Id of the element holding the posts. */
+  controls: string
+  /** Accessible name, such as "6 posts about /brag". */
+  label: string
+}>()
+
+const emit = defineEmits<{
+  toggle: []
+}>()
+
+/** Circles in the stack at most. */
+const MAX_CIRCLES = 3
+
+const faces = computed(() => posts.slice(0, posts.length > MAX_CIRCLES ? MAX_CIRCLES - 1 : MAX_CIRCLES))
+const rest = computed(() => posts.length - faces.value.length)
+</script>
+
+<template>
+  <button
+    type="button"
+    class="post-faces"
+    :aria-expanded="open"
+    :aria-controls="controls"
+    :aria-label="label"
+    @click="emit('toggle')"
+  >
+    <span class="post-faces__stack" aria-hidden="true">
+      <span v-for="post in faces" :key="post.url" class="post-faces__circle">
+        <img
+          v-if="post.authorAvatar"
+          :src="avatarProxyUrl(post.authorAvatar)"
+          alt=""
+          width="20"
+          height="20"
+          loading="lazy"
+          decoding="async"
+        >
+        <template v-else>{{ post.handle.slice(0, 1).toUpperCase() }}</template>
+      </span>
+      <span v-if="rest > 0" class="post-faces__circle post-faces__rest">+{{ rest }}</span>
+    </span>
+    <UIcon name="i-lucide-chevron-down" class="post-faces__chevron size-3.5" :class="{ 'post-faces__chevron--open': open }" aria-hidden="true" />
+  </button>
+</template>
+
+<style scoped>
+.post-faces {
+  display: inline-flex;
+  flex: none;
+  min-block-size: 1.75rem;
+  align-items: center;
+  gap: 0.25rem;
+  margin-block: -0.25rem;
+  margin-inline-start: -0.25rem;
+  padding-inline: 0.25rem;
+  border-radius: var(--ui-radius);
+  color: var(--ui-text-muted);
+  transition: background-color 200ms ease-out, color 200ms ease-out;
+}
+
+@media (hover: hover) {
+  .post-faces:hover {
+    background: var(--ui-bg-muted);
+    color: var(--ui-text);
+  }
+}
+
+@media (pointer: coarse) {
+  .post-faces {
+    min-block-size: 2.75rem;
+  }
+}
+
+.post-faces__stack {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Each circle ringed in the page colour, so the overlap reads as a stack. */
+.post-faces__circle {
+  display: inline-flex;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 9999px;
+  outline: 2px solid var(--ui-bg);
+  background: var(--ui-bg-accented);
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  color: var(--ui-text-muted);
+}
+
+.post-faces__circle + .post-faces__circle {
+  margin-inline-start: -0.375rem;
+}
+
+.post-faces__circle img {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+.post-faces__rest {
+  font-size: 0.5625rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  color: var(--ui-text);
+}
+
+.post-faces__chevron {
+  transition: transform 200ms ease-out;
+}
+
+.post-faces__chevron--open {
+  transform: rotate(180deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .post-faces,
+  .post-faces__chevron {
+    transition: none;
+  }
+}
+</style>
diff --git a/layers/marketing/app/components/TrendingPostQuote.vue b/layers/marketing/app/components/TrendingPostQuote.vue
new file mode 100644
index 00000000..b33538f2
--- /dev/null
+++ b/layers/marketing/app/components/TrendingPostQuote.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { TrendingPost } from '#shared/trending-range'
+import { postExcerpt } from '#shared/trending-post'
+
+/**
+ * One post as one line: who said it, then what they said, cut where the row
+ * ends. The excerpt starts at the Skill's name when the post reaches it late,
+ * so the line shows why the post counts.
+ */
+const { post, names } = defineProps<{
+  post: TrendingPost
+  /** Names the Skill answers to, marked where the post says them. */
+  names: readonly string[]
+}>()
+
+/** Characters of excerpt. The line ends before this on most rows. */
+const BUDGET = 110
+
+const segments = computed(() => postExcerpt({ text: post.text, names, budget: BUDGET }))
+</script>
+
+<template>
+  <a :href="post.url" target="_blank" rel="nofollow noopener" class="post-quote">
+    <span class="post-quote__by">@{{ post.handle }}</span>
+    <span class="post-quote__text">
+      <template v-for="(segment, index) in segments" :key="index">
+        <mark v-if="segment._tag === 'mention'" class="post-quote__mention">{{ segment.value }}</mark>
+        <template v-else>{{ segment.value }}</template>
+      </template>
+    </span>
+  </a>
+</template>
+
+<style scoped>
+/* Basis zero, so in a wrapping line it shrinks beside the faces rather than dropping below them. */
+.post-quote {
+  display: flex;
+  flex: 1 1 0;
+  min-inline-size: 0;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  color: var(--ui-text-muted);
+}
+
+.post-quote__by {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ui-text);
+}
+
+.post-quote__text {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 200ms ease-out;
+}
+
+@media (hover: hover) {
+  .post-quote:hover .post-quote__text {
+    color: var(--ui-text);
+  }
+}
+
+.post-quote__mention {
+  background: none;
+  font-weight: 600;
+  color: var(--ui-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .post-quote__text {
+    transition: none;
+  }
+}
+</style>