From 4f2a6ca519c561d6ba9508e71b61dbb8e457918f Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Tue, 6 Oct 2026 17:39:29 +1100 Subject: [PATCH] feat(nav): make the Developers menu a bento, one Make a skill entry Five same-size cards read as five equal choices. CLI, MCP server and SDK are ways to connect; Make a skill and Skillgen serve one maintainer goal. The menu now stacks the connect paths as compact rows beside one large Make a skill card, and /make-skill routes to the guides or to the Skillgen GitHub App. --- COPY.md | 14 ++--- DESIGN.md | 5 +- app/components/_HeaderNavigation.vue | 65 ++++++++++++++++++----- app/utils/developer-menu.ts | 57 +++++++------------- layers/marketing/app/pages/make-skill.vue | 36 ++++++++++++- layers/marketing/app/pages/skillgen.vue | 9 ++++ test/a11y.spec.ts | 1 - 7 files changed, 126 insertions(+), 61 deletions(-) diff --git a/COPY.md b/COPY.md index f3b3d662..1303c6b0 100644 --- a/COPY.md +++ b/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 | diff --git a/DESIGN.md b/DESIGN.md index c8f33823..bfd87c19 100644 --- a/DESIGN.md +++ b/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 @@ -461,4 +461,5 @@ 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. diff --git a/app/components/_HeaderNavigation.vue b/app/components/_HeaderNavigation.vue index 45a76a09..2a05761c 100644 --- a/app/components/_HeaderNavigation.vue +++ b/app/components/_HeaderNavigation.vue @@ -1,6 +1,6 @@