From 40f77982b698b0ca1d6af10d41595880894154e6 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 02:51:09 +1100
Subject: [PATCH 1/2] feat(trending): use the /skills shell with a range
 sidebar

Harlan asked for the trending board to run full width like /skills, with
the week, month, and all time switch in a left sidebar and no right aside.

The sidebar carries the range links, the weekly CTA, and the skilld
install on wide screens. Narrow screens keep the range row above the
board and the CTA after the fifth row. Rows now switch on their own
width, so the posts sit beside the Skill only when both fit, and the
carousel shows two posts where it has room.

"Earlier on this board" stays under the board. It lists Skills that left
the ranking, not earlier weeks, and it is the crawl path to every Skill
the trending sitemap lists.
---
 DESIGN.md                                     |   1 +
 .../app/components/TrendingBoardItem.vue      | 135 ++--
 .../app/components/TrendingPostCarousel.vue   |  22 +-
 .../app/components/TrendingWeeklyCta.vue      |  65 +-
 .../marketing/app/pages/skills/trending.vue   | 604 ++++++++++--------
 shared/trending-range.ts                      |  15 +-
 6 files changed, 481 insertions(+), 361 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 2633144a..6698a7f9 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -458,3 +458,4 @@ These are editorial sets, not necessarily database collections yet. If a set has
 - **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.
 - **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.
 - **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.
diff --git a/layers/marketing/app/components/TrendingBoardItem.vue b/layers/marketing/app/components/TrendingBoardItem.vue
index b15e7918..ca13d8ed 100644
--- a/layers/marketing/app/components/TrendingBoardItem.vue
+++ b/layers/marketing/app/components/TrendingBoardItem.vue
@@ -43,73 +43,84 @@ const mentions = computed(() => {
 </script>
 
 <template>
-  <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>
-      <p class="board-row__meta">
-        <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">{{ row.subtitle }}</span>
-        <span v-if="row.stars" class="shrink-0 tabular-nums">{{ `${row.stars.toLocaleString()} ★` }}</span>
-        <BrailleSpark v-if="mentions" :counts="mentions" unit="mentions in 7 days" />
-        <TrendingStarSpark v-else-if="!isSocial" :points="row.starSeries" />
-        <template v-if="row.reason._tag === 'reviewed'">
-          <span class="shrink-0">{{ `${row.reason.skillCount.toLocaleString()} ${row.reason.skillCount === 1 ? 'skill' : 'skills'}` }}</span>
-          <span v-if="row.reason.updated" class="shrink-0">Updated {{ row.reason.updated }}</span>
-        </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>
+        <p class="board-row__meta">
+          <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">{{ row.subtitle }}</span>
+          <span v-if="row.stars" class="shrink-0 tabular-nums">{{ `${row.stars.toLocaleString()} ★` }}</span>
+          <BrailleSpark v-if="mentions" :counts="mentions" unit="mentions in 7 days" />
+          <TrendingStarSpark v-else-if="!isSocial" :points="row.starSeries" />
+          <template v-if="row.reason._tag === 'reviewed'">
+            <span class="shrink-0">{{ `${row.reason.skillCount.toLocaleString()} ${row.reason.skillCount === 1 ? 'skill' : 'skills'}` }}</span>
+            <span v-if="row.reason.updated" class="shrink-0">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 it is filler, or a popular repository passes for a trending one.
         -->
-        <span v-else-if="row.reason._tag === 'surge'" class="shrink-0 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'" class="shrink-0">Popular on GitHub</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="trending-row"
-        variant="compact"
+          <span v-else-if="row.reason._tag === 'surge'" class="shrink-0 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'" class="shrink-0">Popular on GitHub</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="trending-row"
+          variant="compact"
+        />
+      </div>
+
+      <TrendingPostCarousel
+        v-if="posts.length"
+        class="board-row__posts"
+        :posts="posts"
+        :names="row.names"
+        :label="`Posts about ${row.title}`"
       />
     </div>
-
-    <TrendingPostCarousel
-      v-if="posts.length"
-      class="board-row__posts"
-      :posts="posts"
-      :names="row.names"
-      :label="`Posts about ${row.title}`"
-    />
   </div>
 </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.
@@ -186,8 +197,10 @@ const mentions = computed(() => {
   margin-top: 0.875rem;
 }
 
+/* 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.625rem;
   overflow: hidden;
   font-size: 0.9375rem;
@@ -198,14 +211,18 @@ const mentions = computed(() => {
   line-clamp: 2;
 }
 
-@media (min-width: 64rem) {
+/*
+ * 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 {
     grid-template-columns: 3rem minmax(0, 1fr);
     column-gap: 2rem;
   }
 
   .board-row--with-posts {
-    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 21rem);
+    grid-template-columns: 3rem minmax(0, 1.25fr) minmax(21rem, 1fr);
   }
 
   .board-row__rank {
diff --git a/layers/marketing/app/components/TrendingPostCarousel.vue b/layers/marketing/app/components/TrendingPostCarousel.vue
index 715dfeb1..d3e3dc3f 100644
--- a/layers/marketing/app/components/TrendingPostCarousel.vue
+++ b/layers/marketing/app/components/TrendingPostCarousel.vue
@@ -13,6 +13,7 @@ import TrendingPostCard from './TrendingPostCard.vue'
  * it, and focus on a card scrolls that card into view.
  *
  * The next card peeks in from the edge, which is what says there is more.
+ * Where the carousel is wide enough, two cards show at once.
  */
 const { posts, names, label } = defineProps<{
   posts: readonly TrendingPost[]
@@ -23,7 +24,7 @@ const { posts, names, label } = defineProps<{
 }>()
 
 const track = useTemplateRef<HTMLElement>('track')
-const { x } = useScroll(track)
+const { x, arrivedState } = useScroll(track)
 const motion = usePreferredReducedMotion()
 
 /** Distance from one card to the next: its width plus the gap. */
@@ -80,7 +81,7 @@ function move(by: number) {
         square
         aria-label="Next post"
         class="post-carousel__button"
-        :disabled="current >= posts.length - 1"
+        :disabled="current >= posts.length - 1 || arrivedState.right"
         @click="() => move(1)"
       />
     </div>
@@ -89,6 +90,7 @@ function move(by: number) {
 
 <style scoped>
 .post-carousel {
+  container-type: inline-size;
   min-inline-size: 0;
 }
 
@@ -139,6 +141,22 @@ function move(by: number) {
   color: var(--ui-text-muted);
 }
 
+/*
+ * Two cards at a time once a card would otherwise stretch past a readable
+ * line. They grow to fill the track when only one or two exist, and a third
+ * still peeks in from the edge. Two posts side by side leave nothing to step
+ * through, so they show no controls.
+ */
+@container (min-width: 36rem) {
+  .post-carousel__slide {
+    flex: 1 0 46%;
+  }
+
+  .post-carousel:has(.post-carousel__slide:nth-child(2):last-child) .post-carousel__nav {
+    display: none;
+  }
+}
+
 /* A touch screen swipes the track, so only a pointer gets the buttons. */
 @media (hover: none) {
   .post-carousel__button {
diff --git a/layers/marketing/app/components/TrendingWeeklyCta.vue b/layers/marketing/app/components/TrendingWeeklyCta.vue
index b87af96b..7570fa4a 100644
--- a/layers/marketing/app/components/TrendingWeeklyCta.vue
+++ b/layers/marketing/app/components/TrendingWeeklyCta.vue
@@ -8,14 +8,10 @@ import { useElementVisibility } from '@vueuse/core'
  * The preview stays inert because it is supporting artwork. The CTA beside it
  * is the only promised action.
  *
- * A plain block, not an `<aside>`: the board renders it twice, beside the page
- * heading and between the board's halves, and one of them is always hidden.
- * Two complementary landmarks with the same name failed HTML validation.
+ * A plain block, not an `<aside>`: the board renders it twice, in the sidebar
+ * and between the board's halves, and one of them is always hidden. Two
+ * complementary landmarks with the same name failed HTML validation.
  */
-const { layout = 'stacked' } = defineProps<{
-  /** `row` sets the preview beside the copy, for the page heading. */
-  layout?: 'stacked' | 'row'
-}>()
 
 /**
  * The email loads in the browser, and only for the copy a reader can see.
@@ -54,7 +50,7 @@ const previewDocument = computed(() => card.value
 </script>
 
 <template>
-  <div class="trending-weekly-cta" :class="`trending-weekly-cta--${layout}`">
+  <div class="trending-weekly-cta">
     <div
       v-if="keepPreviewBox"
       ref="preview"
@@ -94,6 +90,7 @@ const previewDocument = computed(() => card.value
 
 <style scoped>
 .trending-weekly-cta {
+  container-type: inline-size;
   min-inline-size: 0;
   overflow: clip;
   border: 1px solid var(--ui-border);
@@ -133,44 +130,28 @@ const previewDocument = computed(() => card.value
 }
 
 /*
- * Beside the page heading: the email as a thumbnail, the copy beside it, and
- * no taller than the heading it sits next to. Rendered at full email width and
- * scaled to a quarter, since the picture only has to read as an inbox.
+ * The sidebar column is narrower than any phone. The copy tightens there so
+ * the button keeps its whole label on one line rather than truncating it.
  */
-.trending-weekly-cta--row {
-  display: grid;
-  grid-template-columns: 8.5rem minmax(0, 1fr);
-}
-
-/* Out of flow, so the copy alone sets the height; a transform never shrinks layout. */
-.trending-weekly-cta--row .trending-weekly-preview {
-  position: relative;
-  block-size: auto;
-  border-block-end: 0;
-  border-inline-end: 1px solid var(--ui-border);
-}
-
-.trending-weekly-cta--row .trending-weekly-frame {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  inline-size: 400%;
-  block-size: 44rem;
-  transform: scale(0.25);
-}
+@container (max-width: 16rem) {
+  .trending-weekly-copy {
+    padding: 0.75rem;
+  }
 
-.trending-weekly-cta--row .trending-weekly-copy {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
+  .trending-weekly-heading {
+    font-size: 0.9375rem;
+  }
 
-.trending-weekly-cta--row .trending-weekly-heading {
-  font-size: 0.9375rem;
-}
+  .trending-weekly-action {
+    gap: 0.375rem;
+    padding-inline: 0.5rem;
+    font-size: 0.75rem;
+  }
 
-.trending-weekly-cta--row .trending-weekly-action {
-  margin-top: 0.75rem;
+  .trending-weekly-action :deep(.iconify) {
+    inline-size: 1rem;
+    block-size: 1rem;
+  }
 }
 
 @media (forced-colors: active) {
diff --git a/layers/marketing/app/pages/skills/trending.vue b/layers/marketing/app/pages/skills/trending.vue
index d8bba791..7b0df39a 100644
--- a/layers/marketing/app/pages/skills/trending.vue
+++ b/layers/marketing/app/pages/skills/trending.vue
@@ -390,8 +390,8 @@ function formatDay(timestamp: number | null): string | null {
 /**
  * Rows above the weekly invitation on narrow screens.
  *
- * Wide screens carry the invitation beside the page heading. Narrow ones have
- * no beside, and above the board it pushed the first Skill below the fold, so
+ * Wide screens carry the invitation in the sidebar. Narrow ones have no
+ * sidebar, and above the board it pushed the first Skill below the fold, so
  * it waits until a reader has seen the head of the board.
  */
 const HEAD_ROWS = 5
@@ -409,30 +409,22 @@ const boardChunks = computed<BoardChunk[]>(() => [
 </script>
 
 <template>
-  <div>
-    <CompactPageHeader
-      :title="heading"
-      :description="headerDescription"
-      heading-id="trending-heading"
-    >
-      <!--
-        Beside the heading on wide screens, where the masthead had a blank
-        right half and the board lost a quarter of its width to a sidebar.
-        The server renders this page signed out for every visitor, so the
-        invitation keeps its space but stays invisible until the browser
-        knows who is looking; a weekly reader never sees it first.
-        `invisible` already hides it from assistive tech and the tab order, so
-        it carries no `aria-hidden`, which HTML validation rejects over a link.
-      -->
-      <template #aside>
-        <div class="trending-aside">
-          <div
-            v-if="showWeeklyCta"
-            class="trending-cta trending-cta--aside"
-            :class="{ invisible: auth._tag === 'pending' }"
-          >
-            <TrendingWeeklyCta layout="row" />
-          </div>
+  <!--
+    The same shell as /skills: the heading lines up with the results column,
+    a sticky sidebar sits left of the board, and nothing sits right of it, so
+    the board takes every column the sidebar leaves.
+  -->
+  <div class="overflow-clip">
+    <div class="w-full px-4 pb-10 pt-10 sm:px-6 lg:px-8 xl:px-10">
+      <header aria-labelledby="trending-heading" class="mx-auto mb-7 max-w-7xl lg:ml-56 lg:mr-0">
+        <h1 id="trending-heading" class="text-3xl font-semibold tracking-tight text-balance">
+          {{ heading }}
+        </h1>
+        <p class="mt-2 text-sm text-muted">
+          {{ headerDescription }}
+        </p>
+        <!-- Narrow screens have no sidebar, so the install sits under the heading. -->
+        <div class="mt-5 lg:hidden">
           <div class="trending-teach">
             <p class="font-mono text-xs text-muted">
               Teach your agent skilld
@@ -440,200 +432,240 @@ const boardChunks = computed<BoardChunk[]>(() => [
             <SkilldInstallChip surface="trending-header" />
           </div>
         </div>
-      </template>
-    </CompactPageHeader>
-
-    <section
-      class="mx-auto max-w-5xl px-4 py-8 sm:px-6 md:py-10"
-      aria-labelledby="trending-heading"
-    >
-      <!--
-        Real links, not a JS toggle. Each range is its own indexable document
-        with its own canonical, so a crawler has to be able to follow one.
-        Rendered above every state so a reader who lands on an empty range can
-        switch away from it. No heading above it: the h1 already names the
-        board, and "Top skills" restated it with a word the glossary bans.
-      -->
-      <div class="board-toolbar">
-        <nav class="range-switcher" aria-label="Time range">
-          <NuxtLink
-            v-for="option in TRENDING_RANGES"
-            :key="option.id"
-            :to="option.path"
-            class="range-link"
-            :class="{ 'range-link--current': option.id === range }"
-            :aria-current="option.id === range ? 'page' : undefined"
-          >
-            {{ option.label }}
-          </NuxtLink>
-        </nav>
-        <p v-if="!isEmpty && !error && boardMeta" class="data-label">
-          {{ boardMeta }}
-        </p>
-      </div>
-
-      <div v-if="error" class="editorial-state mt-6" role="alert">
-        <p class="font-medium">
-          Couldn't load the board.
-        </p>
-        <p class="mt-1 max-w-lg text-base leading-relaxed text-muted">
-          The ranking is unavailable right now. Check your connection and try again.
-        </p>
-        <UButton
-          label="Retry"
-          color="neutral"
-          variant="outline"
-          class="mt-4 min-h-11"
-          @click="() => refresh()"
-        />
-      </div>
-
-      <div v-else-if="isEmpty" class="editorial-state mt-6 flex flex-col justify-center" role="status">
-        <!-- Scattered dots that settle on one rose dot: the board is waiting for its first Skill. -->
-        <div class="relative mb-4 h-10">
-          <TextureConverge />
+      </header>
+
+      <div class="trending-layout relative grid items-start gap-6 lg:grid-cols-[14rem_minmax(0,1fr)] lg:gap-8">
+        <div class="trending-sidebar">
+          <!--
+            Real links, not a JS toggle. Each range is its own indexable
+            document with its own canonical, so a crawler has to be able to
+            follow one. Rendered above every state so a reader who lands on an
+            empty range can switch away from it. A column in the sidebar on
+            wide screens, a compact row above the board on narrow ones.
+          -->
+          <h2 id="range-heading" class="range-heading">
+            Time range
+          </h2>
+          <nav class="range-switcher" aria-labelledby="range-heading">
+            <NuxtLink
+              v-for="option in TRENDING_RANGES"
+              :key="option.id"
+              :to="option.path"
+              class="range-link"
+              :class="{ 'range-link--current': option.id === range }"
+              :aria-current="option.id === range ? 'page' : undefined"
+            >
+              <span>{{ option.label }}</span>
+              <span class="range-link__hint">{{ option.hint }}</span>
+            </NuxtLink>
+          </nav>
+
+          <!--
+            The server renders this page signed out for every visitor, so the
+            invitation keeps its space but stays invisible until the browser
+            knows who is looking; a weekly reader never sees it first.
+            `invisible` already hides it from assistive tech and the tab order,
+            so it carries no `aria-hidden`, which HTML validation rejects over
+            a link.
+          -->
+          <div class="trending-sidebar__foot">
+            <div
+              v-if="showWeeklyCta"
+              :class="{ invisible: auth._tag === 'pending' }"
+            >
+              <TrendingWeeklyCta />
+            </div>
+            <div class="trending-teach">
+              <p class="font-mono text-xs text-muted">
+                Teach your agent skilld
+              </p>
+              <SkilldInstallChip surface="trending-sidebar" />
+            </div>
+          </div>
         </div>
-        <template v-if="range === 'all'">
-          <p class="text-sm text-default">
-            No repositories have qualified yet.
-          </p>
-          <p class="mt-2 max-w-prose text-sm leading-relaxed text-muted">
-            A repository appears here after a reviewer confirms its purpose and its skill inventory.
-          </p>
-        </template>
-        <template v-else>
-          <p class="text-sm text-default">
-            Nothing is trending yet.
-          </p>
-          <p class="mt-2 max-w-prose text-sm leading-relaxed text-muted">
-            Skilld watches X and Bluesky for posts mentioning a skill, and GitHub for repositories
-            holding a single skill whose stars surge. Neither has anything to report in this range.
+
+        <section class="min-w-0 lg:pt-6" aria-labelledby="trending-heading">
+          <!-- No heading above the board: the h1 already names it. -->
+          <p v-if="!isEmpty && !error && boardMeta" class="data-label mb-3 flex min-h-7 items-center">
+            {{ boardMeta }}
           </p>
-        </template>
-        <div class="mt-4">
-          <UButton to="/skills" label="Browse the directory" color="neutral" variant="outline" class="min-h-11" />
-        </div>
-      </div>
 
-      <template v-else>
-        <template v-for="(chunk, chunkIndex) in boardChunks" :key="chunk.start">
-          <div
-            v-if="chunkIndex === 1 && showWeeklyCta"
-            class="trending-cta trending-cta--inline"
-            :class="{ invisible: auth._tag === 'pending' }"
-          >
-            <TrendingWeeklyCta />
+          <div v-if="error" class="editorial-state" role="alert">
+            <p class="font-medium">
+              Couldn't load the board.
+            </p>
+            <p class="mt-1 max-w-lg text-base leading-relaxed text-muted">
+              The ranking is unavailable right now. Check your connection and try again.
+            </p>
+            <UButton
+              label="Retry"
+              color="neutral"
+              variant="outline"
+              class="mt-4 min-h-11"
+              @click="() => refresh()"
+            />
           </div>
-          <ol class="board-list editorial-ledger list-none p-0" :start="chunk.start">
-            <li v-for="(row, offset) in chunk.rows" :key="row.key">
-              <TrendingBoardItem
-                :row="row"
-                :rank="chunk.start + offset"
-                @avatar-error="onAvatarError"
-              />
-            </li>
-          </ol>
-        </template>
-      </template>
-    </section>
-
-    <section
-      v-if="earlierRows.length"
-      class="border-t border-default"
-      aria-labelledby="earlier-heading"
-    >
-      <div class="mx-auto max-w-5xl px-4 py-12 sm:px-6">
-        <!--
-          An index, not a second board. These Skills already left the ranking,
-          so they sit smaller than it: three columns, one line of description,
-          no rank. Every entry is still a plain link, which is the list's job:
-          a crawler reaches each Skill the sitemap lists from here.
-        -->
-        <h2 id="earlier-heading" class="text-xl font-semibold tracking-tight">
-          Earlier on this board
-        </h2>
-        <p class="data-label mt-1">
-          {{ `${admitted?.total ?? earlierRows.length} skills` }}
-        </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>
-          </li>
-        </ul>
-        <nav
-          v-if="earlierPages.length > 1"
-          class="mt-6 flex flex-wrap gap-2"
-          aria-label="Earlier on this board, pages"
-        >
-          <NuxtLink
-            v-for="number in earlierPages"
-            :key="number"
-            :to="earlierPagePath(number)"
-            class="page-link"
-            :class="{ 'page-link--current': number === listPage }"
-            :aria-current="number === listPage ? 'page' : undefined"
+
+          <div v-else-if="isEmpty" class="editorial-state flex flex-col justify-center" role="status">
+            <!-- Scattered dots that settle on one rose dot: the board is waiting for its first Skill. -->
+            <div class="relative mb-4 h-10">
+              <TextureConverge />
+            </div>
+            <template v-if="range === 'all'">
+              <p class="text-sm text-default">
+                No repositories have qualified yet.
+              </p>
+              <p class="mt-2 max-w-prose text-sm leading-relaxed text-muted">
+                A repository appears here after a reviewer confirms its purpose and its skill inventory.
+              </p>
+            </template>
+            <template v-else>
+              <p class="text-sm text-default">
+                Nothing is trending yet.
+              </p>
+              <p class="mt-2 max-w-prose text-sm leading-relaxed text-muted">
+                Skilld watches X and Bluesky for posts mentioning a skill, and GitHub for repositories
+                holding a single skill whose stars surge. Neither has anything to report in this range.
+              </p>
+            </template>
+            <div class="mt-4">
+              <UButton to="/skills" label="Browse the directory" color="neutral" variant="outline" class="min-h-11" />
+            </div>
+          </div>
+
+          <template v-else>
+            <template v-for="(chunk, chunkIndex) in boardChunks" :key="chunk.start">
+              <div
+                v-if="chunkIndex === 1 && showWeeklyCta"
+                class="trending-cta--inline"
+                :class="{ invisible: auth._tag === 'pending' }"
+              >
+                <TrendingWeeklyCta />
+              </div>
+              <ol class="board-list editorial-ledger list-none p-0" :start="chunk.start">
+                <li v-for="(row, offset) in chunk.rows" :key="row.key">
+                  <TrendingBoardItem
+                    :row="row"
+                    :rank="chunk.start + offset"
+                    @avatar-error="onAvatarError"
+                  />
+                </li>
+              </ol>
+            </template>
+          </template>
+
+          <!--
+            An index, not a second board. These Skills already left the
+            ranking, so they sit smaller than it: one line of description, no
+            rank. Every entry is still a plain link, which is the list's job: a
+            crawler reaches each Skill the sitemap lists from here.
+          -->
+          <section
+            v-if="earlierRows.length"
+            class="mt-12 border-t border-default pt-10"
+            aria-labelledby="earlier-heading"
           >
-            {{ number }}
-          </NuxtLink>
-        </nav>
-      </div>
-    </section>
-
-    <!--
-      The eligibility rule, carried over with the `all` range from
-      /skills/leaderboard. The range claims its rows were reviewed, and a
-      reader has no way to check that claim unless the page states the rule.
-    -->
-    <section
-      v-if="range === 'all'"
-      class="border-t border-default bg-muted"
-      aria-labelledby="method-heading"
-    >
-      <div class="mx-auto grid max-w-5xl gap-8 px-4 py-12 sm:px-6 md:grid-cols-[minmax(0,0.7fr)_minmax(0,1.3fr)] md:py-16">
-        <div>
-          <h2 id="method-heading" class="text-2xl font-semibold tracking-tight sm:text-3xl">
-            A deliberately narrow list.
-          </h2>
-        </div>
-        <div class="max-w-2xl space-y-4 text-base leading-relaxed text-muted">
-          <p>
-            A reviewer must confirm that the owner is an individual GitHub user and the repository primarily publishes reusable, generic agent skills. Documentation, assets, scripts, and tests are allowed.
-          </p>
-          <p>
-            Organizations, vendor catalogs, app-specific collections, prompts, bookmarks, and general applications are excluded. Repositories rank by current GitHub stars.
-          </p>
-        </div>
+            <h2 id="earlier-heading" class="text-xl font-semibold tracking-tight">
+              Earlier on this board
+            </h2>
+            <p class="data-label mt-1">
+              {{ `${admitted?.total ?? earlierRows.length} skills` }}
+            </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>
+              </li>
+            </ul>
+            <nav
+              v-if="earlierPages.length > 1"
+              class="mt-6 flex flex-wrap gap-2"
+              aria-label="Earlier on this board, pages"
+            >
+              <NuxtLink
+                v-for="number in earlierPages"
+                :key="number"
+                :to="earlierPagePath(number)"
+                class="page-link"
+                :class="{ 'page-link--current': number === listPage }"
+                :aria-current="number === listPage ? 'page' : undefined"
+              >
+                {{ number }}
+              </NuxtLink>
+            </nav>
+          </section>
+
+          <!--
+            The eligibility rule, carried over with the `all` range from
+            /skills/leaderboard. The range claims its rows were reviewed, and a
+            reader has no way to check that claim unless the page states the rule.
+          -->
+          <section
+            v-if="range === 'all'"
+            class="mt-12 grid gap-6 border-t border-default pt-10 md:grid-cols-[minmax(0,0.7fr)_minmax(0,1.3fr)] md:gap-8"
+            aria-labelledby="method-heading"
+          >
+            <h2 id="method-heading" class="text-2xl font-semibold tracking-tight sm:text-3xl">
+              A deliberately narrow list.
+            </h2>
+            <div class="max-w-2xl space-y-4 text-base leading-relaxed text-muted">
+              <p>
+                A reviewer must confirm that the owner is an individual GitHub user and the repository primarily publishes reusable, generic agent skills. Documentation, assets, scripts, and tests are allowed.
+              </p>
+              <p>
+                Organizations, vendor catalogs, app-specific collections, prompts, bookmarks, and general applications are excluded. Repositories rank by current GitHub stars.
+              </p>
+            </div>
+          </section>
+        </section>
       </div>
-    </section>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.board-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem 1.5rem;
-  margin-bottom: 0.5rem;
+/* The full-bleed rule above the sidebar and the board, as on /skills. */
+.trending-layout::before {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  inline-size: 100vw;
+  transform: translateX(-50%);
+  border-block-start: 1px solid var(--ui-border);
+  content: '';
+  pointer-events: none;
+}
+
+.trending-sidebar {
+  min-inline-size: 0;
+  padding-top: 1.5rem;
+}
+
+/* Narrow screens show the range row alone; the heading names it for assistive tech. */
+.range-heading {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 
 /*
@@ -674,9 +706,116 @@ const boardChunks = computed<BoardChunk[]>(() => [
   color: var(--ui-text-highlighted);
 }
 
+.range-link__hint {
+  display: none;
+}
+
+.trending-sidebar__foot {
+  display: none;
+}
+
+.trending-teach {
+  display: grid;
+  gap: 0.5rem;
+  min-inline-size: 0;
+}
+
+.trending-cta--inline {
+  margin-block: 1.5rem;
+}
+
+/*
+ * Wide screens: the sidebar column from /skills, sticky under the site header.
+ * The ranges become a list with the window each covers, and the invitation
+ * and the install sit under them, where the board's right edge used to be
+ * spent on them.
+ */
+@media (min-width: 64rem) {
+  .trending-sidebar {
+    position: sticky;
+    inset-block-start: 4rem;
+    display: flex;
+    flex-direction: column;
+    block-size: calc(100dvh - 4rem);
+    overflow-y: auto;
+    padding-block-end: 1.5rem;
+    padding-inline-end: 1.5rem;
+    border-inline-end: 1px solid var(--ui-border);
+  }
+
+  .range-heading {
+    position: static;
+    display: flex;
+    align-items: center;
+    inline-size: auto;
+    block-size: auto;
+    min-block-size: 1.75rem;
+    margin-block-end: 0.5rem;
+    overflow: visible;
+    clip-path: none;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    color: var(--ui-text);
+  }
+
+  .range-switcher {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+  }
+
+  /* Set like the maintainer rows in the /skills sidebar: the name, then a mono line. */
+  .range-link {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    min-height: 2.75rem;
+    padding: 0.375rem 0.5rem;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    color: var(--ui-text-toned);
+  }
+
+  .range-link--current {
+    box-shadow: none;
+  }
+
+  @media (hover: hover) {
+    .range-link:hover {
+      background: var(--ui-bg-elevated);
+    }
+  }
+
+  .range-link__hint {
+    display: block;
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    font-weight: 400;
+    line-height: 1rem;
+    color: var(--ui-text-muted);
+  }
+
+  .trending-sidebar__foot {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.5rem;
+    margin-block-start: 2rem;
+  }
+
+  .trending-cta--inline {
+    display: none;
+  }
+}
+
 /*
  * Columns of hairline-divided entries rather than cards: more than six items
- * read better as rows, and these are an index beside the board, not picks.
+ * read better as rows, and these are an index under the board, not picks.
  */
 .earlier-index {
   display: grid;
@@ -766,7 +905,7 @@ const boardChunks = computed<BoardChunk[]>(() => [
 /*
  * The two halves of one board. Where nothing shows between them, the second
  * drops its top rule rather than doubling the first one's bottom: always when
- * no invitation renders, and on wide screens, where it moves to the heading.
+ * no invitation renders, and on wide screens, where it moves to the sidebar.
  */
 .board-list + .board-list {
   border-top: 0;
@@ -777,45 +916,4 @@ const boardChunks = computed<BoardChunk[]>(() => [
     border-top: 0;
   }
 }
-
-.trending-cta--inline {
-  margin-block: 1.5rem;
-}
-
-/*
- * Narrow screens carry the invitation between the board's halves; wide ones
- * carry it beside the heading. Exactly one shows at any width.
- */
-.trending-cta--aside {
-  display: none;
-}
-
-/*
- * The skilld install sits under the invitation on wide screens and alone under
- * the heading on narrow ones, where the invitation waits until row five.
- */
-.trending-aside {
-  display: grid;
-  gap: 1rem;
-}
-
-.trending-teach {
-  display: grid;
-  gap: 0.5rem;
-  min-inline-size: 0;
-}
-
-@media (min-width: 64rem) {
-  .trending-cta--aside {
-    display: block;
-  }
-
-  .trending-aside {
-    inline-size: 26rem;
-  }
-
-  .trending-cta--inline {
-    display: none;
-  }
-}
 </style>
diff --git a/shared/trending-range.ts b/shared/trending-range.ts
index faef26bc..2b267e8f 100644
--- a/shared/trending-range.ts
+++ b/shared/trending-range.ts
@@ -43,11 +43,11 @@ const SITE_ORIGIN = 'https://skilld.dev'
 /**
  * The category noun, held on one line.
  *
- * The space is U+00A0. `.compact-page-header__title` caps at 15ch and sets
- * `text-wrap: balance`, which balances line lengths without regard for where
- * a phrase ends: it broke "Trending agent / skills, August 2026" across the
- * noun itself. The non-breaking space moves the break to the comma. Measured
- * against the rendered heading, not assumed.
+ * The space is U+00A0. The heading sets `text-wrap: balance`, which balances
+ * line lengths without regard for where a phrase ends: at phone width it broke
+ * "Trending agent / skills, August 2026" across the noun itself. The
+ * non-breaking space moves the break to the comma. Measured against the
+ * rendered heading, not assumed.
  */
 export const SKILLS_NOUN = 'agent\u00A0skills'
 
@@ -55,6 +55,8 @@ export interface TrendingRangeMeta {
   readonly id: TrendingRange
   /** Switcher label. Short verb-free noun, per the UI chrome register. */
   readonly label: string
+  /** The line under the label in the sidebar: what the range covers. */
+  readonly hint: string
   /**
    * Hours of history the feed endpoint is asked for, or null for `all`, which
    * reads a different endpoint and has no window at all.
@@ -90,6 +92,7 @@ export const TRENDING_RANGES: readonly TrendingRangeMeta[] = [
   {
     id: 'week',
     label: 'Week',
+    hint: 'Last 7 days',
     windowHours: 24 * 7,
     windowDays: 7,
     path: '/skills/trending?range=week',
@@ -101,6 +104,7 @@ export const TRENDING_RANGES: readonly TrendingRangeMeta[] = [
   {
     id: 'month',
     label: 'Month',
+    hint: 'Last 30 days',
     windowHours: 24 * 30,
     windowDays: 30,
     path: '/skills/trending',
@@ -116,6 +120,7 @@ export const TRENDING_RANGES: readonly TrendingRangeMeta[] = [
     // noun is now "Agent Skill", matching the heading and the rest of the site.
     id: 'all',
     label: 'All time',
+    hint: 'By GitHub stars',
     windowHours: null,
     windowDays: null,
     path: '/skills/trending?range=all',

From 4d1e65a186d0eb2243d933c435144053e3760715 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 02:51:55 +1100
Subject: [PATCH 2/2] style(trending): indent the reason comment inside the row
 wrapper

---
 layers/marketing/app/components/TrendingBoardItem.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/layers/marketing/app/components/TrendingBoardItem.vue b/layers/marketing/app/components/TrendingBoardItem.vue
index ca13d8ed..d4c55fcf 100644
--- a/layers/marketing/app/components/TrendingBoardItem.vue
+++ b/layers/marketing/app/components/TrendingBoardItem.vue
@@ -76,10 +76,10 @@ const mentions = computed(() => {
             <span v-if="row.reason.updated" class="shrink-0">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 it is filler, or a popular repository passes for a trending one.
-        -->
+            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 it is filler, or a popular repository passes for a trending one.
+          -->
           <span v-else-if="row.reason._tag === 'surge'" class="shrink-0 text-default">
             {{ `Star surge: +${row.reason.gain.toLocaleString()} stars in a day` }}<template v-if="row.reason.when">, {{ row.reason.when }}</template>
           </span>