feat(nav): make the Developers menu a bento, one Make a skill entry

COPY.md

@@ -37,14 +37,14 @@ These exact strings. Do not paraphrase them per page.
 | Home section: trending | Trending skills this week. | guidance only: the homepage trending section heading |
 | Home section: changes | Keep up with skill changes. | guidance only: the homepage section heading for watching and the digest |
 | Home section: authoring | Write a skill for your project. | guidance only: the homepage section heading for making a Skill |
-| Nav: developers | Developers | guidance only: the header menu trigger, and the group label in the mobile menu. The menu holds the five cards below |
-| Nav: CLI | CLI · Search, run, install, and keep Skills current. · Install the CLI | guidance only: the first card in the Developers menu: name, line, action. Links `/cli`. The mobile menu shows the name only. The line is the CLI line and the action is the CLI install label, so change those first |
-| Nav: MCP server | MCP server · For ChatGPT, Claude, and any app that speaks MCP. · Add the MCP server | guidance only: a Developers menu card. Links `/developers?setup=mcp`. The line is the MCP setup card on `/developers`, and the action is its section heading |
-| Nav: SDK | SDK · For your own code, with the TypeScript SDK or plain HTTP. · Call the skilld API | guidance only: a Developers menu card. Links `/developers?setup=api`. The line is the API setup card on `/developers`, and the action is its section heading |
-| Nav: make | Make a skill · Guides and three authoring Skills to write and review your own. · Get the steps | guidance only: a Developers menu card. Links `/make-skill`. The line is the Step 05 description |
-| Nav: Skillgen | Skillgen · Keeps your package skill current with a draft pull request after each release. · Set up Skillgen | guidance only: the last Developers menu card. Links `/skillgen` |
+| Nav: developers | Developers | guidance only: the header menu trigger, and the group label in the mobile menu. The menu holds the four items below |
+| 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 |
+| 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 |
+| 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` |
 | Skillgen opt-in | Skillgen opens a draft pull request after each release tag. It runs only on the repositories you turn on here. | guidance only: the intro of the Skillgen view on `/me?view=skillgen`. The `/skillgen` step 02 says the same in its own words: Skillgen never runs on a repository you did not turn on |
 | CLI H1 | The skilld CLI | guidance only: the `/cli` H1 and its OG title |
 | CLI line | Search, run, install, and keep Skills current. | guidance only: the `/cli` line under the H1. It is the CLI's own `--help` line, so change it in the CLI first |

DESIGN.md

@@ -78,7 +78,7 @@ Practically:
 - One accent color used sparingly (10% of surface area, max)
 - UI chrome in monospace at small sizes; content in the sans-serif
 - Borders, not shadows, define boundaries
-- No glow, no gradient, no blur, no decorative flourish in UI chrome. The textures in "Brand System" are the only decoration, and each has one job. The cards in the header's Developers menu are the one exception: each carries one atmosphere layer
+- No glow, no gradient, no blur, no decorative flourish in UI chrome. The textures in "Brand System" are the only decoration, and each has one job. The Make a skill card in the header's Developers menu is the one exception: it carries one atmosphere layer and the File minimap
 - Compact components: tight padding, defined shapes, minimal radius
 - Whitespace is intentional structure, not generous filler
 
@@ -468,5 +468,6 @@ These are editorial sets, not necessarily database collections yet. If a set has
 - **Trending shares the /skills shell**: `/skills/trending` uses the full-width layout from `/skills`. Its heading replaces `CompactPageHeader` and lines up with the results column. A sticky 14rem sidebar holds the range links, then the weekly CTA and the skilld install. Nothing sits right of the board, so the board takes every column the sidebar leaves. Rows switch on their own width, and the post carousel shows two cards where it has room. On narrow screens the ranges are a compact row above the board, and the CTA stays after the fifth row. Harlan asked for this on 2026-10-06. It supersedes the 2026-10-01 call that dropped the 9/3 sidebar for taking a quarter of the board's width: that sidebar sat right of a 64rem board, and this one sits left of a board that runs the full page width.
 - **Trending rows scan in one pass**: the rank is a plain mono number, and the first three are a step darker. Each metadata line runs source, stars, then the signal that ranked the row, and an empty slot renders nothing. Descriptions stop at two lines, the run chip is as wide as its command, and the post carousel shows whole cards only. The sidebar invitation drops the email preview and the card. Its button is the rail's one solid rose element, so the install chip beside it inks its dot. Harlan asked for this polish on 2026-10-06.
 - **A six-step lifecycle band replaces the four tiles**: under the hero, one band maps the whole product in its real order: find, run, install or fork, keep current, make, build on. The site and the CLI share one line. Each step is one link: a mono `01` marker and step name, then one sans line that opens with its pitch line where COPY.md has one. A line of stone dots joins the steps. Run, the default, carries the band's one rose dot, so no step lights rose on hover. Six columns from 1024px; below that a vertical list with the dots down the left. Keep the band no taller than the tiles it replaced: the hero and the band must fit a 1440×900 viewport. Harlan approved it on 2026-10-06.
-- **A Developers menu groups the build surfaces**: the desktop header keeps Trending Skills and Find Skills as links, and folds CLI, MCP server, SDK, Make a skill and Skillgen 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`. Each item is a card with a lucide icon tile and one `.editorial-atmosphere` layer. The three ways to connect share the top row, and the two authoring cards share the row below. CLI takes rose because it is the recommended path; the others take ember or stone. The mobile menu lists the same five items as a plain group. Harlan asked for this on 2026-10-06.
+- **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.

app/components/_HeaderNavigation.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger } from 'reka-ui'
-import { developerMenuItems } from '~/utils/developer-menu'
+import { developerConnectItems, makeSkillMenuItem } from '~/utils/developer-menu'
 
 /**
  * The desktop header navigation. Developers is a button, so a keyboard opens
@@ -78,37 +78,72 @@ watch(() => route.fullPath, () => {
         -->
         <NavigationMenuContent
           aria-labelledby="header-developers-trigger"
-          class="developers-panel absolute right-0 top-[calc(50%+var(--ui-header-height)/2+0.5rem)] w-[44rem] rounded-lg bg-default p-2 shadow-lg ring ring-default before:absolute before:inset-x-0 before:bottom-full before:h-6 before:content-['']"
+          class="developers-panel absolute right-0 top-[calc(50%+var(--ui-header-height)/2+0.5rem)] w-[42rem] rounded-lg bg-default p-2 shadow-lg ring ring-default before:absolute before:inset-x-0 before:bottom-full before:h-6 before:content-['']"
         >
-          <!-- Six columns: three connect cards fill the top row, two author cards the row below. -->
-          <ul class="grid grid-cols-6 gap-2">
+          <!--
+            A bento: the three ways to connect stack as compact rows in the
+            first column, and the Make a skill card fills the second.
+          -->
+          <ul class="grid grid-cols-2 grid-rows-3 gap-1">
             <li
-              v-for="item in developerMenuItems"
+              v-for="(item, index) in developerConnectItems"
               :key="item.to"
               class="developers-card"
-              :class="item.group === 'connect' ? 'col-span-2' : 'col-span-3'"
-              :style="{ '--stagger': item.group === 'connect' ? 0 : 1 }"
+              :style="{ '--stagger': index }"
             >
               <NavigationMenuLink as-child>
                 <NuxtLink
                   :to="item.to"
+                  class="group flex h-full items-center gap-3 rounded-md p-3 transition-colors duration-200 hover:bg-elevated"
+                >
+                  <span class="flex size-8 shrink-0 items-center justify-center rounded-md border border-default bg-default text-highlighted">
+                    <UIcon :name="item.icon" class="size-4" />
+                  </span>
+                  <span class="flex min-w-0 flex-col">
+                    <span class="font-mono text-sm font-medium text-highlighted">{{ item.label }}</span>
+                    <span class="mt-0.5 text-[0.8125rem] leading-snug text-muted">{{ item.description }}</span>
+                  </span>
+                </NuxtLink>
+              </NavigationMenuLink>
+            </li>
+            <li
+              class="developers-card col-start-2 row-span-3 row-start-1"
+              :style="{ '--stagger': 0 }"
+            >
+              <NavigationMenuLink as-child>
+                <NuxtLink
+                  :to="makeSkillMenuItem.to"
                   class="group editorial-band flex h-full flex-col overflow-hidden rounded-lg border border-default p-4 transition-colors duration-200 hover:border-[var(--ui-text-muted)]"
                 >
                   <span
                     class="editorial-atmosphere"
-                    :data-palette="item.palette"
+                    data-palette="ember"
                     data-geometry="bloom"
                     data-intensity="ambient"
                     aria-hidden="true"
                   />
+                  <!-- The File minimap draws SKILL.md files, as on /make-skill. It sits in the corner, away from the text. -->
+                  <span class="developers-minimap absolute -right-2 -top-2 h-24 w-40" aria-hidden="true">
+                    <TextureFileMinimap />
+                  </span>
                   <span class="editorial-band__content flex h-full flex-col">
                     <span class="flex size-8 items-center justify-center rounded-md border border-default bg-default text-highlighted">
-                      <UIcon :name="item.icon" class="size-4" />
+                      <UIcon :name="makeSkillMenuItem.icon" class="size-4" />
+                    </span>
+                    <span class="mt-3 font-mono text-sm font-medium text-highlighted">{{ makeSkillMenuItem.label }}</span>
+                    <span class="mt-1 text-sm leading-snug text-muted">{{ makeSkillMenuItem.description }}</span>
+                    <span class="mt-4 flex flex-col gap-2 border-t border-default pt-3">
+                      <span
+                        v-for="entry in makeSkillMenuItem.routes"
+                        :key="entry.label"
+                        class="flex items-center gap-2 text-[0.8125rem] text-default"
+                      >
+                        <UIcon :name="entry.icon" class="size-3.5 shrink-0 text-muted" />
+                        {{ entry.label }}
+                      </span>
                     </span>
-                    <span class="mt-3 font-mono text-sm font-medium text-highlighted">{{ item.label }}</span>
-                    <span class="mt-1 text-sm leading-snug text-muted">{{ item.description }}</span>
                     <span class="mt-auto inline-flex items-center gap-1.5 pt-4 font-mono text-xs text-default">
-                      {{ item.action }}
+                      {{ makeSkillMenuItem.action }}
                       <UIcon name="i-lucide-arrow-right" class="size-3.5 transition-transform duration-200 group-hover:translate-x-0.5" />
                     </span>
                   </span>
@@ -160,6 +195,12 @@ watch(() => route.fullPath, () => {
   --editorial-atmosphere-opacity: 0.56;
 }
 
+/* Fade the minimap out toward the text, so it has no hard edge. */
+.developers-minimap {
+  mask-image: radial-gradient(closest-side, #000 35%, transparent);
+  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
+}
+
 @keyframes developers-panel-in {
   from {
     opacity: 0;

app/utils/developer-menu.ts

@@ -1,65 +1,48 @@
 /**
- * The header's Developers menu. Desktop shows each item as a card; the mobile
- * menu lists the same items. COPY.md owns every string here.
+ * The header's Developers menu. Desktop shows the three ways to connect as
+ * compact rows beside one Make a skill card; the mobile menu lists all four.
+ * COPY.md owns every string here.
  */
 export interface DeveloperMenuItem {
   label: string
   description: string
-  /** The card's call to action. */
-  action: string
   icon: string
   to: string
-  /** The card's `.editorial-atmosphere` palette. Rose marks the recommended path. */
-  palette: 'rose' | 'ember' | 'stone'
-  /** `connect` cards share the top row; `author` cards share the row below. */
-  group: 'connect' | 'author'
 }
 
-export const developerMenuItems: DeveloperMenuItem[] = [
+export const developerConnectItems: DeveloperMenuItem[] = [
   {
     label: 'CLI',
     description: 'Search, run, install, and keep Skills current.',
-    action: 'Install the CLI',
     icon: 'i-lucide-square-terminal',
     to: '/cli',
-    palette: 'rose',
-    group: 'connect',
   },
   {
     label: 'MCP server',
     description: 'For ChatGPT, Claude, and any app that speaks MCP.',
-    action: 'Add the MCP server',
     icon: 'i-lucide-plug',
     to: '/developers?setup=mcp',
-    palette: 'ember',
-    group: 'connect',
   },
   {
     label: 'SDK',
     description: 'For your own code, with the TypeScript SDK or plain HTTP.',
-    action: 'Call the skilld API',
     icon: 'i-lucide-braces',
     to: '/developers?setup=api',
-    palette: 'stone',
-    group: 'connect',
-  },
-  {
-    label: 'Make a skill',
-    // generate-package-skill, generate-project-skill and review-skill.
-    description: 'Guides and three authoring Skills to write and review your own.',
-    action: 'Get the steps',
-    icon: 'i-lucide-pen-line',
-    to: '/make-skill',
-    palette: 'stone',
-    group: 'author',
-  },
-  {
-    label: 'Skillgen',
-    description: 'Keeps your package skill current with a draft pull request after each release.',
-    action: 'Set up Skillgen',
-    icon: 'i-lucide-git-pull-request-draft',
-    to: '/skillgen',
-    palette: 'ember',
-    group: 'author',
   },
 ]
+
+/** `/make-skill` routes each maintainer to the guides or to Skillgen, so the menu links it once. */
+export const makeSkillMenuItem = {
+  label: 'Make a skill',
+  description: 'Write a Skill for your package or project, then keep it current.',
+  action: 'Get the steps',
+  icon: 'i-lucide-pen-line',
+  to: '/make-skill',
+  routes: [
+    // generate-package-skill, generate-project-skill and review-skill.
+    { icon: 'i-lucide-book-open', label: 'Guides and three authoring Skills' },
+    { icon: 'i-lucide-git-pull-request-draft', label: 'Skillgen drafts updates after each release' },
+  ],
+} as const
+
+export const developerMenuItems: DeveloperMenuItem[] = [...developerConnectItems, makeSkillMenuItem]