feat(home): cut the lifecycle band to three centered steps

COPY.md

@@ -29,12 +29,10 @@ These exact strings. Do not paraphrase them per page.
 | Promo panel note | No terminal? Paste this into your agent. | guidance only: the promo popover, under the install command and over the setup prompt |
 | Setup prompt | Read https://skilld.dev/agent.md and follow it to set up skilld for me. | guidance only: `agentSetupPrompt()` in `shared/agent-setup.ts` builds it for the promo popover and the homepage Agents section. `/agent.md` serves the steps it points at |
 | Hero Agent logos | The seven `AGENT_LOGOS` icons, then `+12` | guidance only: the quiet row under the homepage claims line. Links `#agents`. Its label names each Agent. 12 is `AGENT_TARGETS` minus `AGENT_LOGOS` |
-| Step 01: find | Find · Stay hyped. A curated registry, plus what devs talk about on X and Bluesky. | guidance only: the first step of the homepage lifecycle band. The step name comes first, then the pitch line, then the description. Links `/skills/trending`. The braille spark motif pairs with the pitch line |
-| Step 02: run | Run · No more skill bloat. Your Agent reads the Skill now. Nothing lands on disk. | guidance only: a homepage lifecycle step. Links `/cli#run`. It carries the band's one rose dot, because run is the default. The run chip motif pairs with the pitch line |
-| Step 03: install | Install or fork · One install writes to 19 Agents, pinned to a commit and checked before files land. Fork for an editable copy. | guidance only: a homepage lifecycle step. Links `/cli#install`. 19 is `AGENT_TARGETS` in the CLI's `crates/skilld-core/src/target.rs`. If that count changes, change this string |
-| Step 04: update | Keep current · Keep updated. Watch repos and get a digest when their Skills change, or run `npx skilld outdated`. | guidance only: a homepage lifecycle step. Links `/cli#update`. The page prints the command through `skillOutdatedCmd`. The change grid motif pairs with the pitch line |
-| Step 05: make | Make · Guides and three authoring Skills to write and review your own. | guidance only: a homepage lifecycle step. Links `/make-skill`. The three are `generate-package-skill`, `generate-project-skill` and `review-skill` |
-| Step 06: build | Build on · Built to be built on. CLI, API, SDK, MCP and the Claude Code plugin. | guidance only: a homepage lifecycle step. Links `/developers` |
+| Step 1: find | Find Skills · Curated, plus what devs talk about. | guidance only: the first step of the homepage lifecycle band. The step name comes first, then one line. Links `/skills` |
+| Step 2: run | Run, Fork or Install · Run leaves nothing on disk. Fork or install to keep it. | guidance only: a homepage lifecycle step. Links `/cli#run`. It carries the band's one rose dot, because run is the default |
+| Step 3: update | Keep up to date · Watch repos and get a digest when Skills change. | guidance only: a homepage lifecycle step. Links `/cli#update` |
+| Pitch lines | Stay hyped. · No more skill bloat. · Keep updated. · Built to be built on. | guidance only: approved pitch lines for find, run, update and build on. The DESIGN.md motifs pair with them |
 | Home section: trending | Trending skills this week. | guidance only: the homepage trending section heading |
 | Home section: agents | Works with your agent. · The CLI installs into 19 Agents. ChatGPT, Claude, and other MCP apps search the registry from the chat. | guidance only: the homepage Agents section heading and line. 19 is `AGENT_TARGETS.length` |
 | Agents way: prompt | Paste into any agent · Your agent reads the setup steps and picks the path that fits it. | guidance only: the first way in the homepage Agents section, over the setup prompt |
@@ -46,7 +44,7 @@ These exact strings. Do not paraphrase them per page.
 | Nav: CLI | CLI · Search, run, install, and keep Skills current. | guidance only: the first compact row in the Developers menu: name, line. Links `/cli`. The mobile menu shows the name only. The line is the CLI line, so change that first |
 | Nav: MCP server | MCP server · For ChatGPT, Claude, and any app that speaks MCP. | guidance only: a compact row in the Developers menu. Links `/developers?setup=mcp`. The line is the MCP setup card on `/developers` |
 | Nav: SDK | SDK · For your own code, with the TypeScript SDK or plain HTTP. | guidance only: a compact row in the Developers menu. Links `/developers?setup=api`. The line is the API setup card on `/developers` |
-| Nav: make | Make a skill · Write a Skill for your package or project, then keep it current. · Guides and three authoring Skills · Skillgen drafts updates after each release · Get the steps | guidance only: the large Developers menu card: name, line, its two routes, action. Links `/make-skill`, which routes to the guides or to `/skillgen`. The first route is the Step 05 description |
+| Nav: make | Make a skill · Write a Skill for your package or project, then keep it current. · Guides and three authoring Skills · Skillgen drafts updates after each release · Get the steps | guidance only: the large Developers menu card: name, line, its two routes, action. Links `/make-skill`, which routes to the guides or to `/skillgen`. The three are `generate-package-skill`, `generate-project-skill` and `review-skill` |
 | Make a skill: Skillgen route | Already ship a package Skill? · Keep it current with Skillgen · After each release tag, Skillgen opens a draft pull request that updates your Skill. npm packages only. | guidance only: the second question on `/make-skill`, under the Skill kinds. Links `/skillgen`. The badge reads "GitHub App" |
 | Nav: setup guides | All setup guides | guidance only: the link under the Developers menu cards. Links `/developers` |
 | Skillgen lead | Keep your package skill current. After each release tag, Skillgen opens a draft pull request that updates the Skill in your repository. You review it and decide what merges. | guidance only: the `/skillgen` line under the H1. Its first two sentences are the page's meta description. A "Make a skill" link above the H1 returns to `/make-skill` |
@@ -228,8 +226,7 @@ above is about naming our audience, not about the provenance claim.
 technical sense: npm, PyPI, crates, RubyGems. That names a category, not a community size, so
 the scoped ban above does not cover it.
 
-**Exception, "hyped".** Harlan approved "Stay hyped" for the find step of the homepage
-lifecycle band. It names what devs talk about on X and Bluesky, which we measure and show. Use "hyped" only for social trending. "Hot", "popular" and "top" stay banned.
+**Exception, "hyped".** Harlan approved "Stay hyped" as the pitch line for finding Skills. It names what devs talk about on X and Bluesky, which we measure and show. Use "hyped" only for social trending. "Hot", "popular" and "top" stay banned.
 
 ## Open questions
 

DESIGN.md

@@ -467,7 +467,7 @@ These are editorial sets, not necessarily database collections yet. If a set has
 - **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.
-- **A six-step lifecycle band replaces the four tiles**: under the hero, one band maps the whole product in its real order: find, run, install or fork, keep current, make, build on. The site and the CLI share one line. Each step is one link: a mono `01` marker and step name, then one sans line that opens with its pitch line where COPY.md has one. A line of stone dots joins the steps. Run, the default, carries the band's one rose dot, so no step lights rose on hover. Six columns from 1024px; below that a vertical list with the dots down the left. Keep the band no taller than the tiles it replaced: the hero and the band must fit a 1440×900 viewport. Harlan approved it on 2026-10-06.
+- **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.
 - **One Skill card**: `SkillCard` renders every Skill embed, in three layouts. Each opens with one identity unit: the avatar beside the mono name, over a byline of author and Repository. Then come at most two lines of description and one line of facts with a dashed `run` pill. The pill is the run chip's material without `npx skilld`. Its click copies the full command, and its dot stays stone until hover, focus or copy. Rows read in three zones, who, what and the facts, and stack like a borderless card under 40rem. Compact entries drop the description. Cards show no SKILL.md icon and no heart by default: with few accounts yet, a row of zero hearts reads as an empty room. Harlan chose this from five takes, one by Fable, on 2026-10-06. It supersedes the `/skills` table and its "What it does" column. Trending and track boards render the same rows: the reason a Skill ranked fills the meta line, and the posts about it sit under its words as an aside. The home freshness ledgers and the community top Skill use compact entries. Search results keep their own rows, because they are a keyboard picker, not an embed. This replaces the row layout in "Trending rows lead with the Skill", "Trending shares the /skills shell" and "Trending rows scan in one pass": posts now sit under the Skill's words, not beside it, and the dashed `run` pill replaces the full run chip. The /skills shell, the sidebar and the rank styling stand.

GLOSSARY.md

@@ -155,7 +155,7 @@ Collisions
 
 **Is:** Skills ranked by devs talking about them on X and Bluesky (ADR-0004). Never by installs.
 
-**Marketing phrase:** "hyped", as in the "Stay hyped" step. It names the same social signal.
+**Marketing phrase:** "hyped", as in the "Stay hyped" pitch line. It names the same social signal.
 
 **Never:** popular, hot, top, leaderboard.
 

app/components/HomeLifecycle.vue

@@ -1,25 +1,18 @@
 <script setup lang="ts">
-import { skillOutdatedCmd } from '#shared/skill-commands'
-
 /**
- * The whole of skilld in six steps, in the order a dev meets them: the site
- * finds Skills, the CLI runs, installs and updates them, and the last two
- * steps make and build on them.
+ * skilld in three steps, in the order a dev meets them: find a Skill, run
+ * it (or fork or install it), then keep it up to date.
  *
  * Stone dots join the steps. Run, the default path, carries the band's one
- * rose dot. The order is real, so the steps carry sequence markers.
+ * rose dot.
  */
-type StepId = 'find' | 'run' | 'install' | 'update' | 'make' | 'build'
+type StepId = 'find' | 'run' | 'update'
 
 interface LifecycleStep {
   id: StepId
   name: string
   to: string
-  /** An approved pitch line from COPY.md. It leads the description in ink. */
-  pitch?: string
   text: string
-  /** A CLI command printed after the text. It comes from `shared/skill-commands.ts`, so the grammar gate checks it. */
-  command?: string
 }
 
 /** The default path, and the band's one rose dot. */
@@ -28,74 +21,36 @@ const PICKED_STEP: StepId = 'run'
 const steps: LifecycleStep[] = [
   {
     id: 'find',
-    name: 'Find',
-    to: '/skills/trending',
-    pitch: 'Stay hyped.',
-    text: 'A curated registry, plus what devs talk about on X and Bluesky.',
+    name: 'Find Skills',
+    to: '/skills',
+    text: 'Curated, plus what devs talk about.',
   },
   {
     id: 'run',
-    name: 'Run',
+    name: 'Run, Fork or Install',
     to: '/cli#run',
-    pitch: 'No more skill bloat.',
-    text: 'Your Agent reads the Skill now. Nothing lands on disk.',
-  },
-  {
-    id: 'install',
-    name: 'Install or fork',
-    to: '/cli#install',
-    // 19 is AGENT_TARGETS in the CLI's crates/skilld-core/src/target.rs.
-    text: 'One install writes to 19 Agents, pinned to a commit and checked before files land. Fork for an editable copy.',
+    text: 'Run leaves nothing on disk. Fork or install to keep it.',
   },
   {
     id: 'update',
-    name: 'Keep current',
+    name: 'Keep up to date',
     to: '/cli#update',
-    pitch: 'Keep updated.',
-    text: 'Watch repos and get a digest when their Skills change, or run',
-    command: skillOutdatedCmd(),
-  },
-  {
-    id: 'make',
-    name: 'Make',
-    to: '/make-skill',
-    // generate-package-skill, generate-project-skill and review-skill.
-    text: 'Guides and three authoring Skills to write and review your own.',
-  },
-  {
-    id: 'build',
-    name: 'Build on',
-    to: '/developers',
-    pitch: 'Built to be built on.',
-    text: 'CLI, API, SDK, MCP and the Claude Code plugin.',
+    text: 'Watch repos and get a digest when Skills change.',
   },
 ]
-
-function marker(index: number): string {
-  return String(index + 1).padStart(2, '0')
-}
 </script>
 
 <template>
   <nav class="home-lifecycle" aria-label="What you can do here">
-    <ol class="home-lifecycle__list mx-auto max-w-6xl px-4 sm:px-6">
-      <li v-for="(step, index) in steps" :key="step.id" class="home-lifecycle__item">
+    <ol class="home-lifecycle__list mx-auto max-w-5xl px-4 sm:px-6">
+      <li v-for="step in steps" :key="step.id" class="home-lifecycle__item">
         <NuxtLink :to="step.to" class="home-lifecycle__step">
           <span class="home-lifecycle__rail" aria-hidden="true">
             <span class="home-lifecycle__node" :class="{ 'home-lifecycle__node--picked': step.id === PICKED_STEP }" />
           </span>
           <span class="home-lifecycle__body">
-            <span class="home-lifecycle__head">
-              <span class="home-lifecycle__marker" aria-hidden="true">{{ marker(index) }}</span>
-              <span class="home-lifecycle__name">{{ step.name }}</span>
-            </span>
-            <span class="home-lifecycle__text">
-              <template v-if="step.pitch">
-                <span class="home-lifecycle__pitch">{{ step.pitch }}</span>{{ ' ' }}
-              </template>{{ step.text }}<template v-if="step.command">
-                {{ ' ' }}<code class="home-lifecycle__command">{{ step.command }}</code>.
-              </template>
-            </span>
+            <span class="home-lifecycle__name">{{ step.name }}</span>
+            <span class="home-lifecycle__text">{{ step.text }}</span>
           </span>
         </NuxtLink>
       </li>
@@ -180,23 +135,11 @@ function marker(index: number): string {
   min-width: 0;
 }
 
-.home-lifecycle__head {
-  display: flex;
-  align-items: baseline;
-  gap: 0.625rem;
-  font-family: var(--font-mono);
-  line-height: 1.25rem;
-}
-
-.home-lifecycle__marker {
-  font-size: 0.6875rem;
-  font-variant-numeric: tabular-nums;
-  color: var(--ui-text-dimmed);
-}
-
 .home-lifecycle__name {
+  font-family: var(--font-mono);
   font-size: 0.875rem;
   font-weight: 500;
+  line-height: 1.25rem;
   color: var(--ui-text-highlighted);
   text-decoration-line: underline;
   text-decoration-color: transparent;
@@ -211,18 +154,6 @@ function marker(index: number): string {
   text-wrap: pretty;
 }
 
-.home-lifecycle__pitch {
-  font-weight: 500;
-  color: var(--ui-text);
-}
-
-.home-lifecycle__command {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--ui-text);
-  white-space: nowrap;
-}
-
 .home-lifecycle__step:hover .home-lifecycle__name,
 .home-lifecycle__step:focus-visible .home-lifecycle__name {
   text-decoration-color: currentColor;
@@ -238,40 +169,49 @@ function marker(index: number): string {
   outline-offset: 2px;
 }
 
-/* Desktop: six columns on one line of stone dots. */
+/* Desktop: three centred columns on one line of stone dots. */
 @media (min-width: 64rem) {
   .home-lifecycle {
-    --lifecycle-pad-end: 1.25rem;
+    --lifecycle-pad-inline: 1rem;
   }
 
   .home-lifecycle__list {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     padding-block: 1rem;
   }
 
   .home-lifecycle__step {
     display: flex;
     flex-direction: column;
+    align-items: center;
     gap: 0.75rem;
     height: 100%;
-    /* The margin stops the focus ring short of the next node. */
-    margin-inline-end: calc(var(--lifecycle-pad-end) - var(--lifecycle-ring-room));
+    margin-inline: 0;
+    padding-inline: var(--lifecycle-pad-inline);
+    text-align: center;
   }
 
   .home-lifecycle__rail {
+    align-self: stretch;
     height: var(--lifecycle-node);
   }
 
   .home-lifecycle__node {
     top: 0;
+    left: calc(50% - var(--lifecycle-node) / 2);
+  }
+
+  .home-lifecycle__text {
+    text-wrap: balance;
   }
 
-  /* Stone dots from this node across to the next column's node. */
+  /* Stone dots from this node across to the next column's node. The columns
+     share one width, so the next node sits one column width to the right. */
   .home-lifecycle__item:not(:last-child) .home-lifecycle__rail::after {
     top: 50%;
     bottom: auto;
-    left: calc(var(--lifecycle-node) + var(--lifecycle-gap));
-    right: calc(var(--lifecycle-gap) - var(--lifecycle-pad-end));
+    left: calc(50% + var(--lifecycle-node) / 2 + var(--lifecycle-gap));
+    right: calc(-50% - 2 * var(--lifecycle-pad-inline) + var(--lifecycle-node) / 2 + var(--lifecycle-gap));
     width: auto;
     height: 4px;
     transform: translateY(-50%);
@@ -280,21 +220,6 @@ function marker(index: number): string {
   }
 }
 
-/* Narrow desktops: "Install or fork" stays on one line. */
-@media (min-width: 64rem) and (max-width: 79.999rem) {
-  .home-lifecycle {
-    --lifecycle-pad-end: 1rem;
-  }
-
-  .home-lifecycle__head {
-    gap: 0.5rem;
-  }
-
-  .home-lifecycle__name {
-    font-size: 0.8125rem;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .home-lifecycle__node,
   .home-lifecycle__name {