From 028a8fef9b4fc368d300e2a12d7399526d2cd3fe Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Thu, 26 Mar 2026 15:33:19 -0500
Subject: [PATCH 1/9] Update OpenHands URL from `all-hands.dev` to
 `openhands.dev`

The old URL `https://www.all-hands.dev/` now redirects to
`https://openhands.dev/`.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/snippets/LogoCarousel.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/snippets/LogoCarousel.jsx b/docs/snippets/LogoCarousel.jsx
index d6121fd..6691490 100644
--- a/docs/snippets/LogoCarousel.jsx
+++ b/docs/snippets/LogoCarousel.jsx
@@ -42,7 +42,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "OpenHands",
-      url: "https://www.all-hands.dev/",
+      url: "https://openhands.dev/",
       lightSrc: "/images/logos/openhands/openhands-logo-light.svg",
       darkSrc: "/images/logos/openhands/openhands-logo-dark.svg",
       instructionsUrl: "https://docs.openhands.dev/overview/skills",

From 15065098a23a0009c7295d054da789bcacb79ebd Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Mon, 30 Mar 2026 16:19:07 -0500
Subject: [PATCH 2/9] Add `description` field to each logo carousel entry

Vendor descriptions sourced verbatim from each client's own website or
GitHub repository. The `description` field is placed immediately after
`name` in each entry, grouping identity metadata together.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/snippets/LogoCarousel.jsx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/docs/snippets/LogoCarousel.jsx b/docs/snippets/LogoCarousel.jsx
index 6691490..9a590eb 100644
--- a/docs/snippets/LogoCarousel.jsx
+++ b/docs/snippets/LogoCarousel.jsx
@@ -10,6 +10,7 @@ export const LogoCarousel = () => {
   const logos = [
     {
       name: "Junie",
+      description: "Junie is an LLM-agnostic coding agent built for real-world development. It is built on top of the IntelliJ Platform, so it understands your project the same way your editor does.",
       url: "https://junie.jetbrains.com/",
       lightSrc: "/images/logos/junie/junie-logo-on-white.svg",
       darkSrc: "/images/logos/junie/junie-logo-on-dark.svg",
@@ -17,6 +18,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Gemini CLI",
+      description: "An open-source AI agent that brings the power of Gemini directly into your terminal.",
       url: "https://geminicli.com",
       lightSrc: "/images/logos/gemini-cli/gemini-cli-logo_light.svg",
       darkSrc: "/images/logos/gemini-cli/gemini-cli-logo_dark.svg",
@@ -25,6 +27,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Autohand Code CLI",
+      description: "Autohand Code CLI is an autonomous LLM-powered coding agent that lives in your terminal. It uses the ReAct (Reason + Act) pattern to understand your codebase, plan changes, and execute them with your approval.",
       url: "https://autohand.ai/",
       lightSrc: "/images/logos/autohand/autohand-light.svg",
       darkSrc: "/images/logos/autohand/autohand-dark.svg",
@@ -34,6 +37,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "OpenCode",
+      description: "OpenCode is an open source agent that helps you write code in your terminal, IDE, or desktop.",
       url: "https://opencode.ai/",
       lightSrc: "/images/logos/opencode/opencode-wordmark-light.svg",
       darkSrc: "/images/logos/opencode/opencode-wordmark-dark.svg",
@@ -42,6 +46,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "OpenHands",
+      description: "OpenHands is the open platform for cloud coding agents. Scale from one to thousands of agents — open source, model-agnostic, and enterprise-ready.",
       url: "https://openhands.dev/",
       lightSrc: "/images/logos/openhands/openhands-logo-light.svg",
       darkSrc: "/images/logos/openhands/openhands-logo-dark.svg",
@@ -50,6 +55,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Mux",
+      description: "Mux makes it easy to run parallel coding agents, each with its own isolated workspace, right from your browser or desktop. Mux is open source and LLM provider-agnostic.",
       url: "https://mux.coder.com/",
       lightSrc: "/images/logos/mux/mux-editor-light.svg",
       darkSrc: "/images/logos/mux/mux-editor-dark.svg",
@@ -59,6 +65,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Cursor",
+      description: "Built to make you extraordinarily productive, Cursor is the best way to code with AI.",
       url: "https://cursor.com/",
       lightSrc: "/images/logos/cursor/LOCKUP_HORIZONTAL_2D_LIGHT.svg",
       darkSrc: "/images/logos/cursor/LOCKUP_HORIZONTAL_2D_DARK.svg",
@@ -66,6 +73,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Amp",
+      description: "Amp is the frontier coding agent that lets you wield the full power of leading models.",
       url: "https://ampcode.com/",
       lightSrc: "/images/logos/amp/amp-logo-light.svg",
       darkSrc: "/images/logos/amp/amp-logo-dark.svg",
@@ -74,6 +82,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Letta",
+      description: "Letta is the platform for building stateful agents: AI with advanced memory that can learn and self-improve over time.",
       url: "https://www.letta.com/",
       lightSrc: "/images/logos/letta/Letta-logo-RGB_OffBlackonTransparent.svg",
       darkSrc: "/images/logos/letta/Letta-logo-RGB_GreyonTransparent.svg",
@@ -82,6 +91,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Firebender",
+      description: "Firebender is the first Android-native coding agent that writes features, tests them in the emulator, and fixes issues automatically.",
       url: "https://firebender.com/",
       lightSrc: "/images/logos/firebender/firebender-wordmark-light.svg",
       darkSrc: "/images/logos/firebender/firebender-wordmark-dark.svg",
@@ -89,6 +99,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Goose",
+      description: "An open source, extensible AI agent that goes beyond code suggestions — install, execute, edit, and test with any LLM.",
       url: "https://block.github.io/goose/",
       lightSrc: "/images/logos/goose/goose-logo-black.png",
       darkSrc: "/images/logos/goose/goose-logo-white.png",
@@ -97,6 +108,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "GitHub",
+      description: "GitHub Copilot works alongside you directly in your editor, suggesting whole lines or entire functions for you.",
       url: "https://github.com/",
       lightSrc: "/images/logos/github/GitHub_Lockup_Dark.svg",
       darkSrc: "/images/logos/github/GitHub_Lockup_Light.svg",
@@ -105,6 +117,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "VS Code",
+      description: "Visual Studio Code combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle.",
       url: "https://code.visualstudio.com/",
       lightSrc: "/images/logos/vscode/vscode.svg",
       darkSrc: "/images/logos/vscode/vscode-alt.svg",
@@ -113,6 +126,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Claude Code",
+      description: "Claude Code is an agentic coding tool that reads your codebase, edits files, runs commands, and integrates with your development tools. Available in your terminal, IDE, desktop app, and browser.",
       url: "https://claude.ai/code",
       lightSrc: "/images/logos/claude-code/Claude-Code-logo-Slate.svg",
       darkSrc: "/images/logos/claude-code/Claude-Code-logo-Ivory.svg",
@@ -120,6 +134,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Claude",
+      description: "Claude is Anthropic's AI, built for problem solvers. Tackle complex challenges, analyze data, write code, and think through your hardest work.",
       url: "https://claude.ai/",
       lightSrc: "/images/logos/claude-ai/Claude-logo-Slate.svg",
       darkSrc: "/images/logos/claude-ai/Claude-logo-Ivory.svg",
@@ -127,6 +142,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "OpenAI Codex",
+      description: "Codex is OpenAI's coding agent for software development.",
       url: "https://developers.openai.com/codex",
       lightSrc: "/images/logos/oai-codex/OAI_Codex-Lockup_400px.svg",
       darkSrc: "/images/logos/oai-codex/OAI_Codex-Lockup_400px_Darkmode.svg",
@@ -135,12 +151,14 @@ export const LogoCarousel = () => {
     },
     {
       name: "Piebald",
+      description: "The ultimate agentic AI control experience for developers.",
       url: "https://piebald.ai",
       lightSrc: "/images/logos/piebald/Piebald_wordmark_light.svg",
       darkSrc: "/images/logos/piebald/Piebald_wordmark_dark.svg",
     },
     {
       name: "Factory",
+      description: "Build faster with AI coding agents. Factory Droids automate coding, testing, and deployment for startups and enterprises.",
       url: "https://factory.ai/",
       lightSrc: "/images/logos/factory/factory-logo-light.svg",
       darkSrc: "/images/logos/factory/factory-logo-dark.svg",
@@ -148,6 +166,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "pi",
+      description: "Pi is a minimal terminal coding harness. Adapt pi to your workflows, not the other way around.",
       url: "https://shittycodingagent.ai/",
       lightSrc: "/images/logos/pi/pi-logo-light.svg",
       darkSrc: "/images/logos/pi/pi-logo-dark.svg",
@@ -157,6 +176,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Databricks",
+      description: "Genie Code is an autonomous AI partner purpose-built for data work in Databricks.",
       url: "https://databricks.com/",
       lightSrc: "/images/logos/databricks/databricks-logo-light.svg",
       darkSrc: "/images/logos/databricks/databricks-logo-dark.svg",
@@ -164,6 +184,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Agentman",
+      description: "AI agents that run your entire medical practice back office with no EHR integration — eligibility, claims, prior authorization, denial recovery, inbox management, patient communications, Rx refills — so doctors and staff can focus on patients.",
       url: "https://agentman.ai/",
       lightSrc: "/images/logos/agentman/agentman-wordmark-light.svg",
       darkSrc: "/images/logos/agentman/agentman-wordmark-dark.svg",
@@ -171,6 +192,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "TRAE",
+      description: "Trae is an adaptive AI IDE that transforms how you work, collaborating with you to run faster.",
       url: "https://trae.ai/",
       lightSrc: "/images/logos/trae/trae-logo-lightmode.svg",
       darkSrc: "/images/logos/trae/trae-logo-darkmode.svg",
@@ -179,6 +201,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Spring AI",
+      description: "The Spring AI project aims to streamline the development of applications that incorporate artificial intelligence functionality without unnecessary complexity.",
       url: "https://docs.spring.io/spring-ai/reference",
       lightSrc: "/images/logos/spring-ai/spring-ai-logo-light.svg",
       darkSrc: "/images/logos/spring-ai/spring-ai-logo-dark.svg",
@@ -187,6 +210,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Roo Code",
+      description: "Roo Code puts an entire AI dev team right in your editor, outpacing closed tools with deep project-wide context, multi-step agentic coding, and unmatched developer-centric flexibility.",
       url: "https://roocode.com",
       lightSrc: "/images/logos/roo-code/roo-code-logo-black.svg",
       darkSrc: "/images/logos/roo-code/roo-code-logo-white.svg",
@@ -195,6 +219,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Mistral AI Vibe",
+      description: "Mistral Vibe is a command-line coding assistant powered by Mistral's models. It provides a conversational interface to your codebase, allowing you to use natural language to explore, modify, and interact with your projects through a powerful set of tools.",
       url: "https://github.com/mistralai/mistral-vibe",
       lightSrc: "/images/logos/mistral-vibe/vibe-logo_black.svg",
       darkSrc: "/images/logos/mistral-vibe/vibe-logo_white.svg",
@@ -204,6 +229,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Command Code",
+      description: "Command Code is a coding agent that continuously learns your coding taste. Our meta neuro-symbolic AI model taste-1 with continuous reinforcement learning combines LLMs with your coding taste.",
       url: "https://commandcode.ai/",
       lightSrc: "/images/logos/command-code/command-code-logo-for-light.svg",
       darkSrc: "/images/logos/command-code/command-code-logo-for-dark.svg",
@@ -212,6 +238,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Ona",
+      description: "Run a team of AI software engineers in the cloud. Orchestrated, governed, secured at the kernel.",
       url: "https://ona.com",
       lightSrc: "/images/logos/ona/ona-wordmark-light.svg",
       darkSrc: "/images/logos/ona/ona-wordmark-dark.svg",
@@ -220,6 +247,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "VT Code",
+      description: "VT Code is an open-source coding agent with LLM-native code understanding and robust shell safety. Supports multiple LLM providers with automatic failover and efficient context management.",
       url: "https://github.com/vinhnx/vtcode",
       lightSrc: "/images/logos/vtcode/vt_code_light.svg",
       darkSrc: "/images/logos/vtcode/vt_code_dark.svg",
@@ -228,6 +256,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Qodo",
+      description: "Qodo is an agentic code integrity platform for reviewing, testing, and writing code, integrating AI across development workflows to strengthen code quality at every stage.",
       url: "https://www.qodo.ai/",
       lightSrc: "/images/logos/qodo/qodo-logo-light.png",
       darkSrc: "/images/logos/qodo/qodo-logo-dark.svg",
@@ -235,6 +264,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Laravel Boost",
+      description: "Laravel Boost accelerates AI-assisted development by providing the essential guidelines and agent skills that help AI agents write high-quality Laravel applications that adhere to Laravel best practices.",
       url: "https://github.com/laravel/boost",
       lightSrc: "/images/logos/laravel-boost/boost-light-mode.svg",
       darkSrc: "/images/logos/laravel-boost/boost-dark-mode.svg",
@@ -243,6 +273,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Emdash",
+      description: "Emdash is a provider-agnostic desktop app that lets you run multiple coding agents in parallel, each isolated in its own git worktree, either locally or over SSH on a remote machine.",
       url: "https://emdash.sh",
       lightSrc: "/images/logos/emdash/emdash-logo-light.svg",
       darkSrc: "/images/logos/emdash/emdash-logo-dark.svg",
@@ -251,6 +282,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Snowflake",
+      description: "Cortex Code is an AI-driven intelligent agent integrated into the Snowflake platform, optimized for complex data engineering, analytics, machine learning, and agent-building tasks.",
       url: "https://docs.snowflake.com/en/user-guide/cortex-code/cortex-code",
       lightSrc: "/images/logos/snowflake/snowflake-logo-light.svg",
       darkSrc: "/images/logos/snowflake/snowflake-logo-dark.svg",
@@ -258,6 +290,7 @@ export const LogoCarousel = () => {
     },
     {
       name: "Kiro",
+      description: "Kiro helps you do your best work by bringing structure to AI coding with spec-driven development.",
       url: "https://kiro.dev/",
       lightSrc: "/images/logos/kiro/kiro-logo-light.svg",
       darkSrc: "/images/logos/kiro/kiro-logo-dark.svg",

From 8c2596540b63bc84607cb617badb32dc33accfb5 Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Wed, 1 Apr 2026 09:34:02 -0500
Subject: [PATCH 3/9] Replace per-logo `width` with relative `scale` in logo
 carousel

The logo carousel previously used a per-logo `width` property (e.g.
`"120px"`, `"200px"`) with a fallback default of `"150px"`. This made
logo sizing an absolute, context-specific value tied to the carousel
layout.

Replace `width` with a relative `scale` multiplier (e.g. `0.8`, `1.33`)
that each consuming component can apply to its own base width. This
prepares for sharing the logo data array between `LogoCarousel` and
other components, where the base width might differ. Logos without a
`scale` property default to 1.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/snippets/LogoCarousel.jsx | 44 +++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/docs/snippets/LogoCarousel.jsx b/docs/snippets/LogoCarousel.jsx
index 9a590eb..ece6d11 100644
--- a/docs/snippets/LogoCarousel.jsx
+++ b/docs/snippets/LogoCarousel.jsx
@@ -31,7 +31,7 @@ export const LogoCarousel = () => {
       url: "https://autohand.ai/",
       lightSrc: "/images/logos/autohand/autohand-light.svg",
       darkSrc: "/images/logos/autohand/autohand-dark.svg",
-      width: "120px",
+      scale: 0.8,
       instructionsUrl: "https://autohand.ai/docs/working-with-autohand-code/agent-skills.html",
       sourceCodeUrl: "https://github.com/autohandai/code-cli",
     },
@@ -59,7 +59,7 @@ export const LogoCarousel = () => {
       url: "https://mux.coder.com/",
       lightSrc: "/images/logos/mux/mux-editor-light.svg",
       darkSrc: "/images/logos/mux/mux-editor-dark.svg",
-      width: "120px",
+      scale: 0.8,
       instructionsUrl: "https://mux.coder.com/agent-skills",
       sourceCodeUrl: "https://github.com/coder/mux",
     },
@@ -77,7 +77,7 @@ export const LogoCarousel = () => {
       url: "https://ampcode.com/",
       lightSrc: "/images/logos/amp/amp-logo-light.svg",
       darkSrc: "/images/logos/amp/amp-logo-dark.svg",
-      width: "120px",
+      scale: 0.8,
       instructionsUrl: "https://ampcode.com/manual#agent-skills",
     },
     {
@@ -170,7 +170,7 @@ export const LogoCarousel = () => {
       url: "https://shittycodingagent.ai/",
       lightSrc: "/images/logos/pi/pi-logo-light.svg",
       darkSrc: "/images/logos/pi/pi-logo-dark.svg",
-      width: "80px",
+      scale: 0.55,
       instructionsUrl: "https://github.com/badlogic/pi-mono/blob/main/packages/coding-agent/docs/skills.md",
       sourceCodeUrl: "https://github.com/badlogic/pi-mono",
     },
@@ -223,7 +223,7 @@ export const LogoCarousel = () => {
       url: "https://github.com/mistralai/mistral-vibe",
       lightSrc: "/images/logos/mistral-vibe/vibe-logo_black.svg",
       darkSrc: "/images/logos/mistral-vibe/vibe-logo_white.svg",
-      width: "80px",
+      scale: 0.55,
       instructionsUrl: "https://github.com/mistralai/mistral-vibe",
       sourceCodeUrl: "https://github.com/mistralai/mistral-vibe",
     },
@@ -233,7 +233,7 @@ export const LogoCarousel = () => {
       url: "https://commandcode.ai/",
       lightSrc: "/images/logos/command-code/command-code-logo-for-light.svg",
       darkSrc: "/images/logos/command-code/command-code-logo-for-dark.svg",
-      width: "200px",
+      scale: 1.33,
       instructionsUrl: "https://commandcode.ai/docs/skills",
     },
     {
@@ -242,7 +242,7 @@ export const LogoCarousel = () => {
       url: "https://ona.com",
       lightSrc: "/images/logos/ona/ona-wordmark-light.svg",
       darkSrc: "/images/logos/ona/ona-wordmark-dark.svg",
-      width: "120px",
+      scale: 0.8,
       instructionsUrl: "https://ona.com/docs/ona/agents-md#skills-for-repository-specific-workflows",
     },
     {
@@ -322,22 +322,28 @@ export const LogoCarousel = () => {
     <>
       <div className="logo-carousel">
         <div className="logo-carousel-track" style={{ animation: 'logo-scroll 50s linear infinite' }}>
-          {row1Doubled.map((logo, i) => (
-            <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
-              <img className="block dark:hidden object-contain" style={{ width: logo.width || '150px', maxWidth: '100%' }} src={logo.lightSrc} alt={logo.name} noZoom />
-              <img className="hidden dark:block object-contain" style={{ width: logo.width || '150px', maxWidth: '100%' }} src={logo.darkSrc} alt={logo.name} noZoom />
-            </a>
-          ))}
+          {row1Doubled.map((logo, i) => {
+            const imgStyle = { width: 150 * (logo.scale || 1), maxWidth: "100%" };
+            return (
+              <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
+                <img className="block dark:hidden object-contain" style={imgStyle} src={logo.lightSrc} alt={logo.name} noZoom />
+                <img className="hidden dark:block object-contain" style={imgStyle} src={logo.darkSrc} alt={logo.name} noZoom />
+              </a>
+            );
+          })}
         </div>
       </div>
       <div className="logo-carousel">
         <div className="logo-carousel-track" style={{ animation: 'logo-scroll 60s linear infinite reverse' }}>
-          {row2Doubled.map((logo, i) => (
-            <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
-              <img className="block dark:hidden object-contain" style={{ width: logo.width || '150px', maxWidth: '100%' }} src={logo.lightSrc} alt={logo.name} noZoom />
-              <img className="hidden dark:block object-contain" style={{ width: logo.width || '150px', maxWidth: '100%' }} src={logo.darkSrc} alt={logo.name} noZoom />
-            </a>
-          ))}
+          {row2Doubled.map((logo, i) => {
+            const imgStyle = { width: 150 * (logo.scale || 1), maxWidth: "100%" };
+            return (
+              <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
+                <img className="block dark:hidden object-contain" style={imgStyle} src={logo.lightSrc} alt={logo.name} noZoom />
+                <img className="hidden dark:block object-contain" style={imgStyle} src={logo.darkSrc} alt={logo.name} noZoom />
+              </a>
+            );
+          })}
         </div>
       </div>
     </>

From 15ddb749282ec5578cc1ccc1eae261545eccbfc8 Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Wed, 1 Apr 2026 11:04:56 -0500
Subject: [PATCH 4/9] Move logo sizing from `<img>` to wrapper `<div>` in logo
 carousel

Use a wrapper `<div>` to control each logo's width instead of styling
the `<img>` elements directly. This also replaces inline styles on the
`<a>` elements with Tailwind utility classes (`no-underline`,
`border-none`) and simplifies the map callbacks.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/snippets/LogoCarousel.jsx | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/docs/snippets/LogoCarousel.jsx b/docs/snippets/LogoCarousel.jsx
index ece6d11..886f43f 100644
--- a/docs/snippets/LogoCarousel.jsx
+++ b/docs/snippets/LogoCarousel.jsx
@@ -322,28 +322,26 @@ export const LogoCarousel = () => {
     <>
       <div className="logo-carousel">
         <div className="logo-carousel-track" style={{ animation: 'logo-scroll 50s linear infinite' }}>
-          {row1Doubled.map((logo, i) => {
-            const imgStyle = { width: 150 * (logo.scale || 1), maxWidth: "100%" };
-            return (
-              <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
-                <img className="block dark:hidden object-contain" style={imgStyle} src={logo.lightSrc} alt={logo.name} noZoom />
-                <img className="hidden dark:block object-contain" style={imgStyle} src={logo.darkSrc} alt={logo.name} noZoom />
+          {row1Doubled.map((logo, i) => (
+            <div key={`${logo.name}-${i}`} style={{ width: 150 * (logo.scale || 1), maxWidth: "100%" }}>
+              <a href={logo.url} className="block no-underline border-none w-full h-full">
+                <img className="block dark:hidden object-contain w-full h-full" src={logo.lightSrc} alt={logo.name} noZoom />
+                <img className="hidden dark:block object-contain w-full h-full" src={logo.darkSrc} alt={logo.name} noZoom />
               </a>
-            );
-          })}
+            </div>
+          ))}
         </div>
       </div>
       <div className="logo-carousel">
         <div className="logo-carousel-track" style={{ animation: 'logo-scroll 60s linear infinite reverse' }}>
-          {row2Doubled.map((logo, i) => {
-            const imgStyle = { width: 150 * (logo.scale || 1), maxWidth: "100%" };
-            return (
-              <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
-                <img className="block dark:hidden object-contain" style={imgStyle} src={logo.lightSrc} alt={logo.name} noZoom />
-                <img className="hidden dark:block object-contain" style={imgStyle} src={logo.darkSrc} alt={logo.name} noZoom />
+          {row2Doubled.map((logo, i) => (
+            <div key={`${logo.name}-${i}`} style={{ width: 150 * (logo.scale || 1), maxWidth: "100%" }}>
+              <a href={logo.url} className="block no-underline border-none w-full h-full">
+                <img className="block dark:hidden object-contain w-full h-full" src={logo.lightSrc} alt={logo.name} noZoom />
+                <img className="hidden dark:block object-contain w-full h-full" src={logo.darkSrc} alt={logo.name} noZoom />
               </a>
-            );
-          })}
+            </div>
+          ))}
         </div>
       </div>
     </>

From ee7d80cb8baf92d0cb57e8f8f043957d76dd1742 Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Wed, 1 Apr 2026 12:21:53 -0500
Subject: [PATCH 5/9] Override Mintlify's default `<img>` margins in logo
 carousel

Mintlify adds 36px top and bottom margins to `<img>` elements in the
main content area. This caused unwanted vertical spacing in the logo
carousel rows. Adding `!my-0` to each `<img>` removes those margins.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/snippets/LogoCarousel.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/snippets/LogoCarousel.jsx b/docs/snippets/LogoCarousel.jsx
index 886f43f..8eff47c 100644
--- a/docs/snippets/LogoCarousel.jsx
+++ b/docs/snippets/LogoCarousel.jsx
@@ -325,8 +325,8 @@ export const LogoCarousel = () => {
           {row1Doubled.map((logo, i) => (
             <div key={`${logo.name}-${i}`} style={{ width: 150 * (logo.scale || 1), maxWidth: "100%" }}>
               <a href={logo.url} className="block no-underline border-none w-full h-full">
-                <img className="block dark:hidden object-contain w-full h-full" src={logo.lightSrc} alt={logo.name} noZoom />
-                <img className="hidden dark:block object-contain w-full h-full" src={logo.darkSrc} alt={logo.name} noZoom />
+                <img className="block dark:hidden object-contain w-full h-full !my-0" src={logo.lightSrc} alt={logo.name} noZoom />
+                <img className="hidden dark:block object-contain w-full h-full !my-0" src={logo.darkSrc} alt={logo.name} noZoom />
               </a>
             </div>
           ))}
@@ -337,8 +337,8 @@ export const LogoCarousel = () => {
           {row2Doubled.map((logo, i) => (
             <div key={`${logo.name}-${i}`} style={{ width: 150 * (logo.scale || 1), maxWidth: "100%" }}>
               <a href={logo.url} className="block no-underline border-none w-full h-full">
-                <img className="block dark:hidden object-contain w-full h-full" src={logo.lightSrc} alt={logo.name} noZoom />
-                <img className="hidden dark:block object-contain w-full h-full" src={logo.darkSrc} alt={logo.name} noZoom />
+                <img className="block dark:hidden object-contain w-full h-full !my-0" src={logo.lightSrc} alt={logo.name} noZoom />
+                <img className="hidden dark:block object-contain w-full h-full !my-0" src={logo.darkSrc} alt={logo.name} noZoom />
               </a>
             </div>
           ))}

From b10b93a438ff7a432525856830916b475ba30a85 Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Wed, 1 Apr 2026 15:15:26 -0500
Subject: [PATCH 6/9] Extract client data from `LogoCarousel` into shared
 `clients.jsx`

Move the hardcoded client data array out of `LogoCarousel.jsx` into a
separate `docs/snippets/clients.jsx` module so it can be reused by other
components. `LogoCarousel` now accepts a `clients` prop, and `home.mdx`
imports and passes the shared data. Also extract a `Logo` sub-component
to reduce duplication of the light/dark `<img>` pair.

Update `CONTRIBUTING.md` to point contributors to `clients.jsx`.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 CONTRIBUTING.md                |   2 +-
 docs/home.mdx                  |   3 +-
 docs/snippets/LogoCarousel.jsx | 329 ++-------------------------------
 docs/snippets/clients.jsx      | 297 +++++++++++++++++++++++++++++
 4 files changed, 318 insertions(+), 313 deletions(-)
 create mode 100644 docs/snippets/clients.jsx

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 33f25b0..27d7fd5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -30,7 +30,7 @@ If your product or platform has implemented Agent Skills compatibility, you can
 Submit a pull request with:
 
 1. **Logo files** — SVG preferred; PNG acceptable (min 200×200px). Provide light and dark variants and follow the existing format in `docs/images/logos/`.
-2. **A carousel entry** — Add your logo to the array in [`docs/snippets/LogoCarousel.jsx`](docs/snippets/LogoCarousel.jsx).
+2. **A client entry** — Add your product to the array in [`docs/snippets/clients.jsx`](docs/snippets/clients.jsx).
 3. **Product information** — In your PR description, include your product name, a link to your product, and a link to documentation showing your Skills implementation.
 
 We may ask for a demo or screenshot to verify the implementation. Logo requests are reviewed by the Anthropic team.
diff --git a/docs/home.mdx b/docs/home.mdx
index d706bfe..06ee8dd 100644
--- a/docs/home.mdx
+++ b/docs/home.mdx
@@ -3,6 +3,7 @@ title: "Overview"
 description: "A simple, open format for giving agents new capabilities and expertise."
 ---
 
+import { clients } from '/snippets/clients.jsx';
 import { LogoCarousel } from '/snippets/LogoCarousel.jsx';
 
 Agent Skills are folders of instructions, scripts, and resources that agents can discover and use to do things more accurately and efficiently.
@@ -28,7 +29,7 @@ Agents are increasingly capable, but often don't have the context they need to d
 
 Agent Skills are supported by leading AI development tools.
 
-<LogoCarousel />
+<LogoCarousel clients={clients} />
 
 ## Open development
 
diff --git a/docs/snippets/LogoCarousel.jsx b/docs/snippets/LogoCarousel.jsx
index 8eff47c..10d541f 100644
--- a/docs/snippets/LogoCarousel.jsx
+++ b/docs/snippets/LogoCarousel.jsx
@@ -1,305 +1,11 @@
 {/*
   LogoCarousel component for the Agent Skills documentation.
-  Shuffles logos on each page load for fair exposure.
-
-  To add a new logo:
-  1. Add logo files to /images/logos/[logo-name]/
-  2. Add entry to the logos array below
+  Shuffles clients on each page load for fair exposure.
 */}
-export const LogoCarousel = () => {
-  const logos = [
-    {
-      name: "Junie",
-      description: "Junie is an LLM-agnostic coding agent built for real-world development. It is built on top of the IntelliJ Platform, so it understands your project the same way your editor does.",
-      url: "https://junie.jetbrains.com/",
-      lightSrc: "/images/logos/junie/junie-logo-on-white.svg",
-      darkSrc: "/images/logos/junie/junie-logo-on-dark.svg",
-      instructionsUrl: "https://junie.jetbrains.com/docs/agent-skills.html",
-    },
-    {
-      name: "Gemini CLI",
-      description: "An open-source AI agent that brings the power of Gemini directly into your terminal.",
-      url: "https://geminicli.com",
-      lightSrc: "/images/logos/gemini-cli/gemini-cli-logo_light.svg",
-      darkSrc: "/images/logos/gemini-cli/gemini-cli-logo_dark.svg",
-      instructionsUrl: "https://geminicli.com/docs/cli/skills/",
-      sourceCodeUrl: "https://github.com/google-gemini/gemini-cli",
-    },
-    {
-      name: "Autohand Code CLI",
-      description: "Autohand Code CLI is an autonomous LLM-powered coding agent that lives in your terminal. It uses the ReAct (Reason + Act) pattern to understand your codebase, plan changes, and execute them with your approval.",
-      url: "https://autohand.ai/",
-      lightSrc: "/images/logos/autohand/autohand-light.svg",
-      darkSrc: "/images/logos/autohand/autohand-dark.svg",
-      scale: 0.8,
-      instructionsUrl: "https://autohand.ai/docs/working-with-autohand-code/agent-skills.html",
-      sourceCodeUrl: "https://github.com/autohandai/code-cli",
-    },
-    {
-      name: "OpenCode",
-      description: "OpenCode is an open source agent that helps you write code in your terminal, IDE, or desktop.",
-      url: "https://opencode.ai/",
-      lightSrc: "/images/logos/opencode/opencode-wordmark-light.svg",
-      darkSrc: "/images/logos/opencode/opencode-wordmark-dark.svg",
-      instructionsUrl: "https://opencode.ai/docs/skills/",
-      sourceCodeUrl: "https://github.com/sst/opencode",
-    },
-    {
-      name: "OpenHands",
-      description: "OpenHands is the open platform for cloud coding agents. Scale from one to thousands of agents — open source, model-agnostic, and enterprise-ready.",
-      url: "https://openhands.dev/",
-      lightSrc: "/images/logos/openhands/openhands-logo-light.svg",
-      darkSrc: "/images/logos/openhands/openhands-logo-dark.svg",
-      instructionsUrl: "https://docs.openhands.dev/overview/skills",
-      sourceCodeUrl: "https://github.com/OpenHands/OpenHands",
-    },
-    {
-      name: "Mux",
-      description: "Mux makes it easy to run parallel coding agents, each with its own isolated workspace, right from your browser or desktop. Mux is open source and LLM provider-agnostic.",
-      url: "https://mux.coder.com/",
-      lightSrc: "/images/logos/mux/mux-editor-light.svg",
-      darkSrc: "/images/logos/mux/mux-editor-dark.svg",
-      scale: 0.8,
-      instructionsUrl: "https://mux.coder.com/agent-skills",
-      sourceCodeUrl: "https://github.com/coder/mux",
-    },
-    {
-      name: "Cursor",
-      description: "Built to make you extraordinarily productive, Cursor is the best way to code with AI.",
-      url: "https://cursor.com/",
-      lightSrc: "/images/logos/cursor/LOCKUP_HORIZONTAL_2D_LIGHT.svg",
-      darkSrc: "/images/logos/cursor/LOCKUP_HORIZONTAL_2D_DARK.svg",
-      instructionsUrl: "https://cursor.com/docs/context/skills",
-    },
-    {
-      name: "Amp",
-      description: "Amp is the frontier coding agent that lets you wield the full power of leading models.",
-      url: "https://ampcode.com/",
-      lightSrc: "/images/logos/amp/amp-logo-light.svg",
-      darkSrc: "/images/logos/amp/amp-logo-dark.svg",
-      scale: 0.8,
-      instructionsUrl: "https://ampcode.com/manual#agent-skills",
-    },
-    {
-      name: "Letta",
-      description: "Letta is the platform for building stateful agents: AI with advanced memory that can learn and self-improve over time.",
-      url: "https://www.letta.com/",
-      lightSrc: "/images/logos/letta/Letta-logo-RGB_OffBlackonTransparent.svg",
-      darkSrc: "/images/logos/letta/Letta-logo-RGB_GreyonTransparent.svg",
-      instructionsUrl: "https://docs.letta.com/letta-code/skills/",
-      sourceCodeUrl: "https://github.com/letta-ai/letta",
-    },
-    {
-      name: "Firebender",
-      description: "Firebender is the first Android-native coding agent that writes features, tests them in the emulator, and fixes issues automatically.",
-      url: "https://firebender.com/",
-      lightSrc: "/images/logos/firebender/firebender-wordmark-light.svg",
-      darkSrc: "/images/logos/firebender/firebender-wordmark-dark.svg",
-      instructionsUrl: "https://docs.firebender.com/multi-agent/skills",
-    },
-    {
-      name: "Goose",
-      description: "An open source, extensible AI agent that goes beyond code suggestions — install, execute, edit, and test with any LLM.",
-      url: "https://block.github.io/goose/",
-      lightSrc: "/images/logos/goose/goose-logo-black.png",
-      darkSrc: "/images/logos/goose/goose-logo-white.png",
-      instructionsUrl: "https://block.github.io/goose/docs/guides/context-engineering/using-skills/",
-      sourceCodeUrl: "https://github.com/block/goose",
-    },
-    {
-      name: "GitHub",
-      description: "GitHub Copilot works alongside you directly in your editor, suggesting whole lines or entire functions for you.",
-      url: "https://github.com/",
-      lightSrc: "/images/logos/github/GitHub_Lockup_Dark.svg",
-      darkSrc: "/images/logos/github/GitHub_Lockup_Light.svg",
-      instructionsUrl: "https://docs.github.com/en/copilot/concepts/agents/about-agent-skills",
-      sourceCodeUrl: "https://github.com/microsoft/vscode-copilot-chat",
-    },
-    {
-      name: "VS Code",
-      description: "Visual Studio Code combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle.",
-      url: "https://code.visualstudio.com/",
-      lightSrc: "/images/logos/vscode/vscode.svg",
-      darkSrc: "/images/logos/vscode/vscode-alt.svg",
-      instructionsUrl: "https://code.visualstudio.com/docs/copilot/customization/agent-skills",
-      sourceCodeUrl: "https://github.com/microsoft/vscode",
-    },
-    {
-      name: "Claude Code",
-      description: "Claude Code is an agentic coding tool that reads your codebase, edits files, runs commands, and integrates with your development tools. Available in your terminal, IDE, desktop app, and browser.",
-      url: "https://claude.ai/code",
-      lightSrc: "/images/logos/claude-code/Claude-Code-logo-Slate.svg",
-      darkSrc: "/images/logos/claude-code/Claude-Code-logo-Ivory.svg",
-      instructionsUrl: "https://code.claude.com/docs/en/skills",
-    },
-    {
-      name: "Claude",
-      description: "Claude is Anthropic's AI, built for problem solvers. Tackle complex challenges, analyze data, write code, and think through your hardest work.",
-      url: "https://claude.ai/",
-      lightSrc: "/images/logos/claude-ai/Claude-logo-Slate.svg",
-      darkSrc: "/images/logos/claude-ai/Claude-logo-Ivory.svg",
-      instructionsUrl: "https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview",
-    },
-    {
-      name: "OpenAI Codex",
-      description: "Codex is OpenAI's coding agent for software development.",
-      url: "https://developers.openai.com/codex",
-      lightSrc: "/images/logos/oai-codex/OAI_Codex-Lockup_400px.svg",
-      darkSrc: "/images/logos/oai-codex/OAI_Codex-Lockup_400px_Darkmode.svg",
-      instructionsUrl: "https://developers.openai.com/codex/skills/",
-      sourceCodeUrl: "https://github.com/openai/codex",
-    },
-    {
-      name: "Piebald",
-      description: "The ultimate agentic AI control experience for developers.",
-      url: "https://piebald.ai",
-      lightSrc: "/images/logos/piebald/Piebald_wordmark_light.svg",
-      darkSrc: "/images/logos/piebald/Piebald_wordmark_dark.svg",
-    },
-    {
-      name: "Factory",
-      description: "Build faster with AI coding agents. Factory Droids automate coding, testing, and deployment for startups and enterprises.",
-      url: "https://factory.ai/",
-      lightSrc: "/images/logos/factory/factory-logo-light.svg",
-      darkSrc: "/images/logos/factory/factory-logo-dark.svg",
-      instructionsUrl: "https://docs.factory.ai/cli/configuration/skills.md",
-    },
-    {
-      name: "pi",
-      description: "Pi is a minimal terminal coding harness. Adapt pi to your workflows, not the other way around.",
-      url: "https://shittycodingagent.ai/",
-      lightSrc: "/images/logos/pi/pi-logo-light.svg",
-      darkSrc: "/images/logos/pi/pi-logo-dark.svg",
-      scale: 0.55,
-      instructionsUrl: "https://github.com/badlogic/pi-mono/blob/main/packages/coding-agent/docs/skills.md",
-      sourceCodeUrl: "https://github.com/badlogic/pi-mono",
-    },
-    {
-      name: "Databricks",
-      description: "Genie Code is an autonomous AI partner purpose-built for data work in Databricks.",
-      url: "https://databricks.com/",
-      lightSrc: "/images/logos/databricks/databricks-logo-light.svg",
-      darkSrc: "/images/logos/databricks/databricks-logo-dark.svg",
-      instructionsUrl: "https://docs.databricks.com/aws/en/assistant/skills",
-    },
-    {
-      name: "Agentman",
-      description: "AI agents that run your entire medical practice back office with no EHR integration — eligibility, claims, prior authorization, denial recovery, inbox management, patient communications, Rx refills — so doctors and staff can focus on patients.",
-      url: "https://agentman.ai/",
-      lightSrc: "/images/logos/agentman/agentman-wordmark-light.svg",
-      darkSrc: "/images/logos/agentman/agentman-wordmark-dark.svg",
-      instructionsUrl: "https://agentman.ai/agentskills",
-    },
-    {
-      name: "TRAE",
-      description: "Trae is an adaptive AI IDE that transforms how you work, collaborating with you to run faster.",
-      url: "https://trae.ai/",
-      lightSrc: "/images/logos/trae/trae-logo-lightmode.svg",
-      darkSrc: "/images/logos/trae/trae-logo-darkmode.svg",
-      instructionsUrl: "https://www.trae.ai/blog/trae_tutorial_0115",
-      sourceCodeUrl: "https://github.com/bytedance/trae-agent",
-    },
-    {
-      name: "Spring AI",
-      description: "The Spring AI project aims to streamline the development of applications that incorporate artificial intelligence functionality without unnecessary complexity.",
-      url: "https://docs.spring.io/spring-ai/reference",
-      lightSrc: "/images/logos/spring-ai/spring-ai-logo-light.svg",
-      darkSrc: "/images/logos/spring-ai/spring-ai-logo-dark.svg",
-      instructionsUrl: "https://spring.io/blog/2026/01/13/spring-ai-generic-agent-skills/",
-      sourceCodeUrl: "https://github.com/spring-projects/spring-ai",
-    },
-    {
-      name: "Roo Code",
-      description: "Roo Code puts an entire AI dev team right in your editor, outpacing closed tools with deep project-wide context, multi-step agentic coding, and unmatched developer-centric flexibility.",
-      url: "https://roocode.com",
-      lightSrc: "/images/logos/roo-code/roo-code-logo-black.svg",
-      darkSrc: "/images/logos/roo-code/roo-code-logo-white.svg",
-      instructionsUrl: "https://docs.roocode.com/features/skills",
-      sourceCodeUrl: "https://github.com/RooCodeInc/Roo-Code",
-    },
-    {
-      name: "Mistral AI Vibe",
-      description: "Mistral Vibe is a command-line coding assistant powered by Mistral's models. It provides a conversational interface to your codebase, allowing you to use natural language to explore, modify, and interact with your projects through a powerful set of tools.",
-      url: "https://github.com/mistralai/mistral-vibe",
-      lightSrc: "/images/logos/mistral-vibe/vibe-logo_black.svg",
-      darkSrc: "/images/logos/mistral-vibe/vibe-logo_white.svg",
-      scale: 0.55,
-      instructionsUrl: "https://github.com/mistralai/mistral-vibe",
-      sourceCodeUrl: "https://github.com/mistralai/mistral-vibe",
-    },
-    {
-      name: "Command Code",
-      description: "Command Code is a coding agent that continuously learns your coding taste. Our meta neuro-symbolic AI model taste-1 with continuous reinforcement learning combines LLMs with your coding taste.",
-      url: "https://commandcode.ai/",
-      lightSrc: "/images/logos/command-code/command-code-logo-for-light.svg",
-      darkSrc: "/images/logos/command-code/command-code-logo-for-dark.svg",
-      scale: 1.33,
-      instructionsUrl: "https://commandcode.ai/docs/skills",
-    },
-    {
-      name: "Ona",
-      description: "Run a team of AI software engineers in the cloud. Orchestrated, governed, secured at the kernel.",
-      url: "https://ona.com",
-      lightSrc: "/images/logos/ona/ona-wordmark-light.svg",
-      darkSrc: "/images/logos/ona/ona-wordmark-dark.svg",
-      scale: 0.8,
-      instructionsUrl: "https://ona.com/docs/ona/agents-md#skills-for-repository-specific-workflows",
-    },
-    {
-      name: "VT Code",
-      description: "VT Code is an open-source coding agent with LLM-native code understanding and robust shell safety. Supports multiple LLM providers with automatic failover and efficient context management.",
-      url: "https://github.com/vinhnx/vtcode",
-      lightSrc: "/images/logos/vtcode/vt_code_light.svg",
-      darkSrc: "/images/logos/vtcode/vt_code_dark.svg",
-      instructionsUrl: "https://github.com/vinhnx/vtcode/blob/main/docs/skills/SKILLS_GUIDE.md",
-      sourceCodeUrl: "https://github.com/vinhnx/VTCode",
-    },
-    {
-      name: "Qodo",
-      description: "Qodo is an agentic code integrity platform for reviewing, testing, and writing code, integrating AI across development workflows to strengthen code quality at every stage.",
-      url: "https://www.qodo.ai/",
-      lightSrc: "/images/logos/qodo/qodo-logo-light.png",
-      darkSrc: "/images/logos/qodo/qodo-logo-dark.svg",
-      instructionsUrl: "https://www.qodo.ai/blog/how-i-use-qodos-agent-skills-to-auto-fix-issues-in-pull-requests/",
-    },
-    {
-      name: "Laravel Boost",
-      description: "Laravel Boost accelerates AI-assisted development by providing the essential guidelines and agent skills that help AI agents write high-quality Laravel applications that adhere to Laravel best practices.",
-      url: "https://github.com/laravel/boost",
-      lightSrc: "/images/logos/laravel-boost/boost-light-mode.svg",
-      darkSrc: "/images/logos/laravel-boost/boost-dark-mode.svg",
-      instructionsUrl: "https://laravel.com/docs/12.x/boost#agent-skills",
-      sourceCodeUrl: "https://github.com/laravel/boost",
-    },
-    {
-      name: "Emdash",
-      description: "Emdash is a provider-agnostic desktop app that lets you run multiple coding agents in parallel, each isolated in its own git worktree, either locally or over SSH on a remote machine.",
-      url: "https://emdash.sh",
-      lightSrc: "/images/logos/emdash/emdash-logo-light.svg",
-      darkSrc: "/images/logos/emdash/emdash-logo-dark.svg",
-      instructionsUrl: "https://docs.emdash.sh/skills",
-      sourceCodeUrl: "https://github.com/generalaction/emdash",
-    },
-    {
-      name: "Snowflake",
-      description: "Cortex Code is an AI-driven intelligent agent integrated into the Snowflake platform, optimized for complex data engineering, analytics, machine learning, and agent-building tasks.",
-      url: "https://docs.snowflake.com/en/user-guide/cortex-code/cortex-code",
-      lightSrc: "/images/logos/snowflake/snowflake-logo-light.svg",
-      darkSrc: "/images/logos/snowflake/snowflake-logo-dark.svg",
-      instructionsUrl: "https://docs.snowflake.com/en/user-guide/cortex-code/extensibility#extensibility-skills",
-    },
-    {
-      name: "Kiro",
-      description: "Kiro helps you do your best work by bringing structure to AI coding with spec-driven development.",
-      url: "https://kiro.dev/",
-      lightSrc: "/images/logos/kiro/kiro-logo-light.svg",
-      darkSrc: "/images/logos/kiro/kiro-logo-dark.svg",
-      instructionsUrl: "https://kiro.dev/docs/skills/",
-    },
-  ];
+export const LogoCarousel = ({clients}) => {
 
-  /* Shuffle logos on component mount */
-  const [shuffled, setShuffled] = useState(logos);
+  /* Shuffle clients on component mount */
+  const [shuffled, setShuffled] = useState(clients);
 
   useEffect(() => {
     const shuffle = (items) => {
@@ -310,9 +16,16 @@ export const LogoCarousel = () => {
       }
       return copy;
     };
-    setShuffled(shuffle(logos));
+    setShuffled(shuffle(clients));
   }, []);
 
+  const Logo = ({ client }) => (
+    <a href={client.url} className="block no-underline border-none w-full h-full">
+      <img className="block dark:hidden object-contain w-full h-full !my-0" src={client.lightSrc} alt={client.name} noZoom />
+      <img className="hidden dark:block object-contain w-full h-full !my-0" src={client.darkSrc} alt={client.name} noZoom />
+    </a>
+  );
+
   const row1 = shuffled.filter((_, i) => i % 2 === 0);
   const row2 = shuffled.filter((_, i) => i % 2 === 1);
   const row1Doubled = [...row1, ...row1];
@@ -322,24 +35,18 @@ export const LogoCarousel = () => {
     <>
       <div className="logo-carousel">
         <div className="logo-carousel-track" style={{ animation: 'logo-scroll 50s linear infinite' }}>
-          {row1Doubled.map((logo, i) => (
-            <div key={`${logo.name}-${i}`} style={{ width: 150 * (logo.scale || 1), maxWidth: "100%" }}>
-              <a href={logo.url} className="block no-underline border-none w-full h-full">
-                <img className="block dark:hidden object-contain w-full h-full !my-0" src={logo.lightSrc} alt={logo.name} noZoom />
-                <img className="hidden dark:block object-contain w-full h-full !my-0" src={logo.darkSrc} alt={logo.name} noZoom />
-              </a>
+          {row1Doubled.map((client, i) => (
+            <div key={`${client.name}-${i}`} style={{ width: 150 * (client.scale || 1), maxWidth: "100%" }}>
+              <Logo client={client} />
             </div>
           ))}
         </div>
       </div>
       <div className="logo-carousel">
         <div className="logo-carousel-track" style={{ animation: 'logo-scroll 60s linear infinite reverse' }}>
-          {row2Doubled.map((logo, i) => (
-            <div key={`${logo.name}-${i}`} style={{ width: 150 * (logo.scale || 1), maxWidth: "100%" }}>
-              <a href={logo.url} className="block no-underline border-none w-full h-full">
-                <img className="block dark:hidden object-contain w-full h-full !my-0" src={logo.lightSrc} alt={logo.name} noZoom />
-                <img className="hidden dark:block object-contain w-full h-full !my-0" src={logo.darkSrc} alt={logo.name} noZoom />
-              </a>
+          {row2Doubled.map((client, i) => (
+            <div key={`${client.name}-${i}`} style={{ width: 150 * (client.scale || 1), maxWidth: "100%" }}>
+              <Logo client={client} />
             </div>
           ))}
         </div>
diff --git a/docs/snippets/clients.jsx b/docs/snippets/clients.jsx
new file mode 100644
index 0000000..956ff8f
--- /dev/null
+++ b/docs/snippets/clients.jsx
@@ -0,0 +1,297 @@
+/*
+  Shared client data for the Agent Skills documentation.
+
+  To add a new client:
+  1. Add logo files to /images/logos/[logo-name]/
+  2. Add entry to the clients array below
+*/
+export const clients = [
+  {
+    name: "Junie",
+    description: "Junie is an LLM-agnostic coding agent built for real-world development. It is built on top of the IntelliJ Platform, so it understands your project the same way your editor does.",
+    url: "https://junie.jetbrains.com/",
+    lightSrc: "/images/logos/junie/junie-logo-on-white.svg",
+    darkSrc: "/images/logos/junie/junie-logo-on-dark.svg",
+    instructionsUrl: "https://junie.jetbrains.com/docs/agent-skills.html",
+  },
+  {
+    name: "Gemini CLI",
+    description: "An open-source AI agent that brings the power of Gemini directly into your terminal.",
+    url: "https://geminicli.com",
+    lightSrc: "/images/logos/gemini-cli/gemini-cli-logo_light.svg",
+    darkSrc: "/images/logos/gemini-cli/gemini-cli-logo_dark.svg",
+    instructionsUrl: "https://geminicli.com/docs/cli/skills/",
+    sourceCodeUrl: "https://github.com/google-gemini/gemini-cli",
+  },
+  {
+    name: "Autohand Code CLI",
+    description: "Autohand Code CLI is an autonomous LLM-powered coding agent that lives in your terminal. It uses the ReAct (Reason + Act) pattern to understand your codebase, plan changes, and execute them with your approval.",
+    url: "https://autohand.ai/",
+    lightSrc: "/images/logos/autohand/autohand-light.svg",
+    darkSrc: "/images/logos/autohand/autohand-dark.svg",
+    scale: 0.8,
+    instructionsUrl: "https://autohand.ai/docs/working-with-autohand-code/agent-skills.html",
+    sourceCodeUrl: "https://github.com/autohandai/code-cli",
+  },
+  {
+    name: "OpenCode",
+    description: "OpenCode is an open source agent that helps you write code in your terminal, IDE, or desktop.",
+    url: "https://opencode.ai/",
+    lightSrc: "/images/logos/opencode/opencode-wordmark-light.svg",
+    darkSrc: "/images/logos/opencode/opencode-wordmark-dark.svg",
+    instructionsUrl: "https://opencode.ai/docs/skills/",
+    sourceCodeUrl: "https://github.com/sst/opencode",
+  },
+  {
+    name: "OpenHands",
+    description: "OpenHands is the open platform for cloud coding agents. Scale from one to thousands of agents — open source, model-agnostic, and enterprise-ready.",
+    url: "https://openhands.dev/",
+    lightSrc: "/images/logos/openhands/openhands-logo-light.svg",
+    darkSrc: "/images/logos/openhands/openhands-logo-dark.svg",
+    instructionsUrl: "https://docs.openhands.dev/overview/skills",
+    sourceCodeUrl: "https://github.com/OpenHands/OpenHands",
+  },
+  {
+    name: "Mux",
+    description: "Mux makes it easy to run parallel coding agents, each with its own isolated workspace, right from your browser or desktop. Mux is open source and LLM provider-agnostic.",
+    url: "https://mux.coder.com/",
+    lightSrc: "/images/logos/mux/mux-editor-light.svg",
+    darkSrc: "/images/logos/mux/mux-editor-dark.svg",
+    scale: 0.8,
+    instructionsUrl: "https://mux.coder.com/agent-skills",
+    sourceCodeUrl: "https://github.com/coder/mux",
+  },
+  {
+    name: "Cursor",
+    description: "Built to make you extraordinarily productive, Cursor is the best way to code with AI.",
+    url: "https://cursor.com/",
+    lightSrc: "/images/logos/cursor/LOCKUP_HORIZONTAL_2D_LIGHT.svg",
+    darkSrc: "/images/logos/cursor/LOCKUP_HORIZONTAL_2D_DARK.svg",
+    instructionsUrl: "https://cursor.com/docs/context/skills",
+  },
+  {
+    name: "Amp",
+    description: "Amp is the frontier coding agent that lets you wield the full power of leading models.",
+    url: "https://ampcode.com/",
+    lightSrc: "/images/logos/amp/amp-logo-light.svg",
+    darkSrc: "/images/logos/amp/amp-logo-dark.svg",
+    scale: 0.8,
+    instructionsUrl: "https://ampcode.com/manual#agent-skills",
+  },
+  {
+    name: "Letta",
+    description: "Letta is the platform for building stateful agents: AI with advanced memory that can learn and self-improve over time.",
+    url: "https://www.letta.com/",
+    lightSrc: "/images/logos/letta/Letta-logo-RGB_OffBlackonTransparent.svg",
+    darkSrc: "/images/logos/letta/Letta-logo-RGB_GreyonTransparent.svg",
+    instructionsUrl: "https://docs.letta.com/letta-code/skills/",
+    sourceCodeUrl: "https://github.com/letta-ai/letta",
+  },
+  {
+    name: "Firebender",
+    description: "Firebender is the first Android-native coding agent that writes features, tests them in the emulator, and fixes issues automatically.",
+    url: "https://firebender.com/",
+    lightSrc: "/images/logos/firebender/firebender-wordmark-light.svg",
+    darkSrc: "/images/logos/firebender/firebender-wordmark-dark.svg",
+    instructionsUrl: "https://docs.firebender.com/multi-agent/skills",
+  },
+  {
+    name: "Goose",
+    description: "An open source, extensible AI agent that goes beyond code suggestions — install, execute, edit, and test with any LLM.",
+    url: "https://block.github.io/goose/",
+    lightSrc: "/images/logos/goose/goose-logo-black.png",
+    darkSrc: "/images/logos/goose/goose-logo-white.png",
+    instructionsUrl: "https://block.github.io/goose/docs/guides/context-engineering/using-skills/",
+    sourceCodeUrl: "https://github.com/block/goose",
+  },
+  {
+    name: "GitHub",
+    description: "GitHub Copilot works alongside you directly in your editor, suggesting whole lines or entire functions for you.",
+    url: "https://github.com/",
+    lightSrc: "/images/logos/github/GitHub_Lockup_Dark.svg",
+    darkSrc: "/images/logos/github/GitHub_Lockup_Light.svg",
+    instructionsUrl: "https://docs.github.com/en/copilot/concepts/agents/about-agent-skills",
+    sourceCodeUrl: "https://github.com/microsoft/vscode-copilot-chat",
+  },
+  {
+    name: "VS Code",
+    description: "Visual Studio Code combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle.",
+    url: "https://code.visualstudio.com/",
+    lightSrc: "/images/logos/vscode/vscode.svg",
+    darkSrc: "/images/logos/vscode/vscode-alt.svg",
+    instructionsUrl: "https://code.visualstudio.com/docs/copilot/customization/agent-skills",
+    sourceCodeUrl: "https://github.com/microsoft/vscode",
+  },
+  {
+    name: "Claude Code",
+    description: "Claude Code is an agentic coding tool that reads your codebase, edits files, runs commands, and integrates with your development tools. Available in your terminal, IDE, desktop app, and browser.",
+    url: "https://claude.ai/code",
+    lightSrc: "/images/logos/claude-code/Claude-Code-logo-Slate.svg",
+    darkSrc: "/images/logos/claude-code/Claude-Code-logo-Ivory.svg",
+    instructionsUrl: "https://code.claude.com/docs/en/skills",
+  },
+  {
+    name: "Claude",
+    description: "Claude is Anthropic's AI, built for problem solvers. Tackle complex challenges, analyze data, write code, and think through your hardest work.",
+    url: "https://claude.ai/",
+    lightSrc: "/images/logos/claude-ai/Claude-logo-Slate.svg",
+    darkSrc: "/images/logos/claude-ai/Claude-logo-Ivory.svg",
+    instructionsUrl: "https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview",
+  },
+  {
+    name: "OpenAI Codex",
+    description: "Codex is OpenAI's coding agent for software development.",
+    url: "https://developers.openai.com/codex",
+    lightSrc: "/images/logos/oai-codex/OAI_Codex-Lockup_400px.svg",
+    darkSrc: "/images/logos/oai-codex/OAI_Codex-Lockup_400px_Darkmode.svg",
+    instructionsUrl: "https://developers.openai.com/codex/skills/",
+    sourceCodeUrl: "https://github.com/openai/codex",
+  },
+  {
+    name: "Piebald",
+    description: "The ultimate agentic AI control experience for developers.",
+    url: "https://piebald.ai",
+    lightSrc: "/images/logos/piebald/Piebald_wordmark_light.svg",
+    darkSrc: "/images/logos/piebald/Piebald_wordmark_dark.svg",
+  },
+  {
+    name: "Factory",
+    description: "Build faster with AI coding agents. Factory Droids automate coding, testing, and deployment for startups and enterprises.",
+    url: "https://factory.ai/",
+    lightSrc: "/images/logos/factory/factory-logo-light.svg",
+    darkSrc: "/images/logos/factory/factory-logo-dark.svg",
+    instructionsUrl: "https://docs.factory.ai/cli/configuration/skills.md",
+  },
+  {
+    name: "pi",
+    description: "Pi is a minimal terminal coding harness. Adapt pi to your workflows, not the other way around.",
+    url: "https://shittycodingagent.ai/",
+    lightSrc: "/images/logos/pi/pi-logo-light.svg",
+    darkSrc: "/images/logos/pi/pi-logo-dark.svg",
+    scale: 0.55,
+    instructionsUrl: "https://github.com/badlogic/pi-mono/blob/main/packages/coding-agent/docs/skills.md",
+    sourceCodeUrl: "https://github.com/badlogic/pi-mono",
+  },
+  {
+    name: "Databricks",
+    description: "Genie Code is an autonomous AI partner purpose-built for data work in Databricks.",
+    url: "https://databricks.com/",
+    lightSrc: "/images/logos/databricks/databricks-logo-light.svg",
+    darkSrc: "/images/logos/databricks/databricks-logo-dark.svg",
+    instructionsUrl: "https://docs.databricks.com/aws/en/assistant/skills",
+  },
+  {
+    name: "Agentman",
+    description: "AI agents that run your entire medical practice back office with no EHR integration — eligibility, claims, prior authorization, denial recovery, inbox management, patient communications, Rx refills — so doctors and staff can focus on patients.",
+    url: "https://agentman.ai/",
+    lightSrc: "/images/logos/agentman/agentman-wordmark-light.svg",
+    darkSrc: "/images/logos/agentman/agentman-wordmark-dark.svg",
+    instructionsUrl: "https://agentman.ai/agentskills",
+  },
+  {
+    name: "TRAE",
+    description: "Trae is an adaptive AI IDE that transforms how you work, collaborating with you to run faster.",
+    url: "https://trae.ai/",
+    lightSrc: "/images/logos/trae/trae-logo-lightmode.svg",
+    darkSrc: "/images/logos/trae/trae-logo-darkmode.svg",
+    instructionsUrl: "https://www.trae.ai/blog/trae_tutorial_0115",
+    sourceCodeUrl: "https://github.com/bytedance/trae-agent",
+  },
+  {
+    name: "Spring AI",
+    description: "The Spring AI project aims to streamline the development of applications that incorporate artificial intelligence functionality without unnecessary complexity.",
+    url: "https://docs.spring.io/spring-ai/reference",
+    lightSrc: "/images/logos/spring-ai/spring-ai-logo-light.svg",
+    darkSrc: "/images/logos/spring-ai/spring-ai-logo-dark.svg",
+    instructionsUrl: "https://spring.io/blog/2026/01/13/spring-ai-generic-agent-skills/",
+    sourceCodeUrl: "https://github.com/spring-projects/spring-ai",
+  },
+  {
+    name: "Roo Code",
+    description: "Roo Code puts an entire AI dev team right in your editor, outpacing closed tools with deep project-wide context, multi-step agentic coding, and unmatched developer-centric flexibility.",
+    url: "https://roocode.com",
+    lightSrc: "/images/logos/roo-code/roo-code-logo-black.svg",
+    darkSrc: "/images/logos/roo-code/roo-code-logo-white.svg",
+    instructionsUrl: "https://docs.roocode.com/features/skills",
+    sourceCodeUrl: "https://github.com/RooCodeInc/Roo-Code",
+  },
+  {
+    name: "Mistral AI Vibe",
+    description: "Mistral Vibe is a command-line coding assistant powered by Mistral's models. It provides a conversational interface to your codebase, allowing you to use natural language to explore, modify, and interact with your projects through a powerful set of tools.",
+    url: "https://github.com/mistralai/mistral-vibe",
+    lightSrc: "/images/logos/mistral-vibe/vibe-logo_black.svg",
+    darkSrc: "/images/logos/mistral-vibe/vibe-logo_white.svg",
+    scale: 0.55,
+    instructionsUrl: "https://github.com/mistralai/mistral-vibe",
+    sourceCodeUrl: "https://github.com/mistralai/mistral-vibe",
+  },
+  {
+    name: "Command Code",
+    description: "Command Code is a coding agent that continuously learns your coding taste. Our meta neuro-symbolic AI model taste-1 with continuous reinforcement learning combines LLMs with your coding taste.",
+    url: "https://commandcode.ai/",
+    lightSrc: "/images/logos/command-code/command-code-logo-for-light.svg",
+    darkSrc: "/images/logos/command-code/command-code-logo-for-dark.svg",
+    scale: 1.33,
+    instructionsUrl: "https://commandcode.ai/docs/skills",
+  },
+  {
+    name: "Ona",
+    description: "Run a team of AI software engineers in the cloud. Orchestrated, governed, secured at the kernel.",
+    url: "https://ona.com",
+    lightSrc: "/images/logos/ona/ona-wordmark-light.svg",
+    darkSrc: "/images/logos/ona/ona-wordmark-dark.svg",
+    scale: 0.8,
+    instructionsUrl: "https://ona.com/docs/ona/agents-md#skills-for-repository-specific-workflows",
+  },
+  {
+    name: "VT Code",
+    description: "VT Code is an open-source coding agent with LLM-native code understanding and robust shell safety. Supports multiple LLM providers with automatic failover and efficient context management.",
+    url: "https://github.com/vinhnx/vtcode",
+    lightSrc: "/images/logos/vtcode/vt_code_light.svg",
+    darkSrc: "/images/logos/vtcode/vt_code_dark.svg",
+    instructionsUrl: "https://github.com/vinhnx/vtcode/blob/main/docs/skills/SKILLS_GUIDE.md",
+    sourceCodeUrl: "https://github.com/vinhnx/VTCode",
+  },
+  {
+    name: "Qodo",
+    description: "Qodo is an agentic code integrity platform for reviewing, testing, and writing code, integrating AI across development workflows to strengthen code quality at every stage.",
+    url: "https://www.qodo.ai/",
+    lightSrc: "/images/logos/qodo/qodo-logo-light.png",
+    darkSrc: "/images/logos/qodo/qodo-logo-dark.svg",
+    instructionsUrl: "https://www.qodo.ai/blog/how-i-use-qodos-agent-skills-to-auto-fix-issues-in-pull-requests/",
+  },
+  {
+    name: "Laravel Boost",
+    description: "Laravel Boost accelerates AI-assisted development by providing the essential guidelines and agent skills that help AI agents write high-quality Laravel applications that adhere to Laravel best practices.",
+    url: "https://github.com/laravel/boost",
+    lightSrc: "/images/logos/laravel-boost/boost-light-mode.svg",
+    darkSrc: "/images/logos/laravel-boost/boost-dark-mode.svg",
+    instructionsUrl: "https://laravel.com/docs/12.x/boost#agent-skills",
+    sourceCodeUrl: "https://github.com/laravel/boost",
+  },
+  {
+    name: "Emdash",
+    description: "Emdash is a provider-agnostic desktop app that lets you run multiple coding agents in parallel, each isolated in its own git worktree, either locally or over SSH on a remote machine.",
+    url: "https://emdash.sh",
+    lightSrc: "/images/logos/emdash/emdash-logo-light.svg",
+    darkSrc: "/images/logos/emdash/emdash-logo-dark.svg",
+    instructionsUrl: "https://docs.emdash.sh/skills",
+    sourceCodeUrl: "https://github.com/generalaction/emdash",
+  },
+  {
+    name: "Snowflake",
+    description: "Cortex Code is an AI-driven intelligent agent integrated into the Snowflake platform, optimized for complex data engineering, analytics, machine learning, and agent-building tasks.",
+    url: "https://docs.snowflake.com/en/user-guide/cortex-code/cortex-code",
+    lightSrc: "/images/logos/snowflake/snowflake-logo-light.svg",
+    darkSrc: "/images/logos/snowflake/snowflake-logo-dark.svg",
+    instructionsUrl: "https://docs.snowflake.com/en/user-guide/cortex-code/extensibility#extensibility-skills",
+  },
+  {
+    name: "Kiro",
+    description: "Kiro helps you do your best work by bringing structure to AI coding with spec-driven development.",
+    url: "https://kiro.dev/",
+    lightSrc: "/images/logos/kiro/kiro-logo-light.svg",
+    darkSrc: "/images/logos/kiro/kiro-logo-dark.svg",
+    instructionsUrl: "https://kiro.dev/docs/skills/",
+  },
+];

From 6f18cf66093894a073511b2df3439363c5f84a23 Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Wed, 1 Apr 2026 15:16:34 -0500
Subject: [PATCH 7/9] Add Client Showcase page

Add a dedicated page listing all clients that support the Agent Skills
format. The `ClientShowcase` component renders the shared `clients` data
as a 2-column grid of cards, sorted alphabetically, with each card
showing the client logo, description, and links to setup instructions
and source code when available.

Add `"clients"` to the navigation in `docs.json`.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/clients.mdx                 |  9 +++++++
 docs/docs.json                   |  1 +
 docs/snippets/ClientShowcase.jsx | 42 ++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 docs/clients.mdx
 create mode 100644 docs/snippets/ClientShowcase.jsx

diff --git a/docs/clients.mdx b/docs/clients.mdx
new file mode 100644
index 0000000..54efbb6
--- /dev/null
+++ b/docs/clients.mdx
@@ -0,0 +1,9 @@
+---
+title: "Client Showcase"
+description: "Agent products that support the Agent Skills format."
+---
+
+import { clients } from '/snippets/clients.jsx';
+import { ClientShowcase } from '/snippets/ClientShowcase.jsx';
+
+<ClientShowcase clients={clients} />
diff --git a/docs/docs.json b/docs/docs.json
index 28f3084..f70663f 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -23,6 +23,7 @@
       "home",
       "what-are-skills",
       "specification",
+      "clients",
       {
         "group": "For skill creators",
         "pages": [
diff --git a/docs/snippets/ClientShowcase.jsx b/docs/snippets/ClientShowcase.jsx
new file mode 100644
index 0000000..8ccdf56
--- /dev/null
+++ b/docs/snippets/ClientShowcase.jsx
@@ -0,0 +1,42 @@
+{/*
+  Client showcase component.
+  2-column grid cards with logo on top, links stacked below description.
+*/}
+export const ClientShowcase = ({clients}) => {
+  const sorted = clients.slice().sort((a, b) => a.name.localeCompare(b.name));
+
+  const Logo = ({ client }) => (
+    <a href={client.url} className="block no-underline border-none w-full h-full">
+      <img className="block dark:hidden object-contain w-full h-full !my-0" src={client.lightSrc} alt={client.name} noZoom />
+      <img className="hidden dark:block object-contain w-full h-full !my-0" src={client.darkSrc} alt={client.name} noZoom />
+    </a>
+  );
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+      {sorted.map(client => (
+        <div key={client.name} className="border border-gray-200 dark:border-gray-700 rounded-lg px-5 py-3 flex flex-col">
+          <div className="mx-auto mb-1.5" style={{height: 80, width: 150 * (client.scale || 1)}}>
+            <Logo client={client} />
+          </div>
+          <div className="text-base font-semibold mb-1.5"><a href={client.url}>{client.name}</a></div>
+          <p className="text-sm text-gray-600 dark:text-gray-400 m-0 leading-normal flex-1">{client.description}</p>
+          {(client.instructionsUrl || client.sourceCodeUrl) && (
+            <div className="border-t border-gray-100 dark:border-gray-800 -mx-5 -mb-3 mt-3 px-5 py-3 bg-gray-50 dark:bg-gray-800/50 rounded-b-lg text-sm text-gray-500 dark:text-gray-400 flex flex-wrap gap-x-5 gap-y-1">
+              {client.instructionsUrl && (
+                <span className="whitespace-nowrap">
+                  <Icon icon="gear" size={14} /> <a href={client.instructionsUrl} className="text-gray-500 dark:text-gray-400">Setup instructions</a>
+                </span>
+              )}
+              {client.sourceCodeUrl && (
+                <span className="whitespace-nowrap">
+                  <Icon icon="code" size={14} /> <a href={client.sourceCodeUrl} className="text-gray-500 dark:text-gray-400">Source code</a>
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};

From ee61ae3cf9b24ecfe392f22f2a350d0fd8cbc3ca Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Wed, 1 Apr 2026 16:21:48 -0500
Subject: [PATCH 8/9] Add shuffle/alphabetical toggle to `ClientShowcase`

Clients are now shuffled by default so that alphabetical ordering
doesn't unfairly prioritize certain clients. A segmented icon toggle
(shuffle / A-Z) in the top-right corner lets users switch between
shuffled and alphabetical order. Each click of the shuffle button
produces a fresh random order.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/snippets/ClientShowcase.jsx | 88 +++++++++++++++++++++++---------
 1 file changed, 64 insertions(+), 24 deletions(-)

diff --git a/docs/snippets/ClientShowcase.jsx b/docs/snippets/ClientShowcase.jsx
index 8ccdf56..753ccae 100644
--- a/docs/snippets/ClientShowcase.jsx
+++ b/docs/snippets/ClientShowcase.jsx
@@ -1,9 +1,27 @@
 {/*
   Client showcase component.
   2-column grid cards with logo on top, links stacked below description.
+  Defaults to shuffled order for fairness; toggle to switch to alphabetical.
 */}
 export const ClientShowcase = ({clients}) => {
-  const sorted = clients.slice().sort((a, b) => a.name.localeCompare(b.name));
+  const shuffle = (arr) => {
+    const copy = arr.slice();
+    for (let i = copy.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [copy[i], copy[j]] = [copy[j], copy[i]];
+    }
+    return copy;
+  };
+
+  const sort = (clients) => clients.toSorted((a, b) => a.name.localeCompare(b.name));
+
+  const [state, dispatch] = React.useReducer((state, action) => {
+    switch (action) {
+      case "shuffle": return { mode: "shuffle", clients: shuffle(clients) };
+      case "alpha":   return { mode: "alpha", clients: sort(clients) };
+      default:        return state;
+    }
+  }, { mode: "shuffle", clients: shuffle(clients) });
 
   const Logo = ({ client }) => (
     <a href={client.url} className="block no-underline border-none w-full h-full">
@@ -12,31 +30,53 @@ export const ClientShowcase = ({clients}) => {
     </a>
   );
 
+  const ToggleButton = ({ active, onClick, icon, title }) => (
+    <button
+      onClick={onClick}
+      title={title}
+      className={`px-3 py-1 cursor-pointer border-none ${
+        active
+          ? 'bg-gray-200 dark:bg-gray-600'
+          : 'hover:bg-gray-100 dark:hover:bg-gray-800'
+      }`}
+    >
+      <Icon icon={icon} size={16} />
+    </button>
+  );
+
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-      {sorted.map(client => (
-        <div key={client.name} className="border border-gray-200 dark:border-gray-700 rounded-lg px-5 py-3 flex flex-col">
-          <div className="mx-auto mb-1.5" style={{height: 80, width: 150 * (client.scale || 1)}}>
-            <Logo client={client} />
-          </div>
-          <div className="text-base font-semibold mb-1.5"><a href={client.url}>{client.name}</a></div>
-          <p className="text-sm text-gray-600 dark:text-gray-400 m-0 leading-normal flex-1">{client.description}</p>
-          {(client.instructionsUrl || client.sourceCodeUrl) && (
-            <div className="border-t border-gray-100 dark:border-gray-800 -mx-5 -mb-3 mt-3 px-5 py-3 bg-gray-50 dark:bg-gray-800/50 rounded-b-lg text-sm text-gray-500 dark:text-gray-400 flex flex-wrap gap-x-5 gap-y-1">
-              {client.instructionsUrl && (
-                <span className="whitespace-nowrap">
-                  <Icon icon="gear" size={14} /> <a href={client.instructionsUrl} className="text-gray-500 dark:text-gray-400">Setup instructions</a>
-                </span>
-              )}
-              {client.sourceCodeUrl && (
-                <span className="whitespace-nowrap">
-                  <Icon icon="code" size={14} /> <a href={client.sourceCodeUrl} className="text-gray-500 dark:text-gray-400">Source code</a>
-                </span>
-              )}
-            </div>
-          )}
+    <div>
+      <div className="flex justify-end mb-3">
+        <div className="inline-flex rounded-md border border-gray-200 dark:border-gray-700 overflow-hidden">
+          <ToggleButton active={state.mode === "shuffle"} onClick={() => dispatch("shuffle")} icon="shuffle" title="Shuffle" />
+          <ToggleButton active={state.mode === "alpha"} onClick={() => dispatch("alpha")} icon="arrow-down-a-z" title="Alphabetical" />
         </div>
-      ))}
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {state.clients.map(client => (
+          <div key={client.name} className="border border-gray-200 dark:border-gray-700 rounded-lg px-5 py-3 flex flex-col">
+            <div className="mx-auto mb-1.5" style={{height: 80, width: 150 * (client.scale || 1)}}>
+              <Logo client={client} />
+            </div>
+            <div className="text-base font-semibold mb-1.5"><a href={client.url}>{client.name}</a></div>
+            <p className="text-sm text-gray-600 dark:text-gray-400 m-0 leading-normal flex-1">{client.description}</p>
+            {(client.instructionsUrl || client.sourceCodeUrl) && (
+              <div className="border-t border-gray-100 dark:border-gray-800 -mx-5 -mb-3 mt-3 px-5 py-3 bg-gray-50 dark:bg-gray-800/50 rounded-b-lg text-sm text-gray-500 dark:text-gray-400 flex flex-wrap gap-x-5 gap-y-1">
+                {client.instructionsUrl && (
+                  <span className="whitespace-nowrap">
+                    <Icon icon="gear" size={14} /> <a href={client.instructionsUrl} className="text-gray-500 dark:text-gray-400">Setup instructions</a>
+                  </span>
+                )}
+                {client.sourceCodeUrl && (
+                  <span className="whitespace-nowrap">
+                    <Icon icon="code" size={14} /> <a href={client.sourceCodeUrl} className="text-gray-500 dark:text-gray-400">Source code</a>
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

From cbc20299aeb343a4f2fec838303646c8598efaf1 Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Thu, 2 Apr 2026 09:46:51 -0500
Subject: [PATCH 9/9] Improve client descriptions and names in `clients.jsx`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update descriptions to use better-curated quotes from vendor websites.
Also make display names more specific where the entry refers to a
product rather than the parent company (e.g. "GitHub" → "GitHub
Copilot", "Databricks" → "Databricks Genie Code", "Snowflake" →
"Snowflake Cortex Code").

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/snippets/clients.jsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/snippets/clients.jsx b/docs/snippets/clients.jsx
index 956ff8f..8b3e214 100644
--- a/docs/snippets/clients.jsx
+++ b/docs/snippets/clients.jsx
@@ -16,7 +16,7 @@ export const clients = [
   },
   {
     name: "Gemini CLI",
-    description: "An open-source AI agent that brings the power of Gemini directly into your terminal.",
+    description: "Gemini CLI is an open-source AI agent that brings the power of Gemini directly into your terminal.",
     url: "https://geminicli.com",
     lightSrc: "/images/logos/gemini-cli/gemini-cli-logo_light.svg",
     darkSrc: "/images/logos/gemini-cli/gemini-cli-logo_dark.svg",
@@ -63,7 +63,7 @@ export const clients = [
   },
   {
     name: "Cursor",
-    description: "Built to make you extraordinarily productive, Cursor is the best way to code with AI.",
+    description: "Cursor is an AI editor and coding agent. Use it to understand your codebase, plan and build features, fix bugs, review changes, and work with the tools you already use.",
     url: "https://cursor.com/",
     lightSrc: "/images/logos/cursor/LOCKUP_HORIZONTAL_2D_LIGHT.svg",
     darkSrc: "/images/logos/cursor/LOCKUP_HORIZONTAL_2D_DARK.svg",
@@ -97,7 +97,7 @@ export const clients = [
   },
   {
     name: "Goose",
-    description: "An open source, extensible AI agent that goes beyond code suggestions — install, execute, edit, and test with any LLM.",
+    description: "Goose is an open source, extensible AI agent that goes beyond code suggestions — install, execute, edit, and test with any LLM.",
     url: "https://block.github.io/goose/",
     lightSrc: "/images/logos/goose/goose-logo-black.png",
     darkSrc: "/images/logos/goose/goose-logo-white.png",
@@ -105,7 +105,7 @@ export const clients = [
     sourceCodeUrl: "https://github.com/block/goose",
   },
   {
-    name: "GitHub",
+    name: "GitHub Copilot",
     description: "GitHub Copilot works alongside you directly in your editor, suggesting whole lines or entire functions for you.",
     url: "https://github.com/",
     lightSrc: "/images/logos/github/GitHub_Lockup_Dark.svg",
@@ -149,18 +149,18 @@ export const clients = [
   },
   {
     name: "Piebald",
-    description: "The ultimate agentic AI control experience for developers.",
+    description: "Piebald is a desktop & web app that makes it easier than ever to do agentic development, while at the same time giving you complete control over the configuration, context, and flow.",
     url: "https://piebald.ai",
     lightSrc: "/images/logos/piebald/Piebald_wordmark_light.svg",
     darkSrc: "/images/logos/piebald/Piebald_wordmark_dark.svg",
   },
   {
     name: "Factory",
-    description: "Build faster with AI coding agents. Factory Droids automate coding, testing, and deployment for startups and enterprises.",
+    description: "Factory is an AI-native software development platform that works everywhere you do. From IDE to CI/CD — delegate complete tasks like refactors, incident response, and migrations to Droids without changing your tools, models, or workflow.",
     url: "https://factory.ai/",
     lightSrc: "/images/logos/factory/factory-logo-light.svg",
     darkSrc: "/images/logos/factory/factory-logo-dark.svg",
-    instructionsUrl: "https://docs.factory.ai/cli/configuration/skills.md",
+    instructionsUrl: "https://docs.factory.ai/cli/configuration/skills",
   },
   {
     name: "pi",
@@ -173,7 +173,7 @@ export const clients = [
     sourceCodeUrl: "https://github.com/badlogic/pi-mono",
   },
   {
-    name: "Databricks",
+    name: "Databricks Genie Code",
     description: "Genie Code is an autonomous AI partner purpose-built for data work in Databricks.",
     url: "https://databricks.com/",
     lightSrc: "/images/logos/databricks/databricks-logo-light.svg",
@@ -182,7 +182,7 @@ export const clients = [
   },
   {
     name: "Agentman",
-    description: "AI agents that run your entire medical practice back office with no EHR integration — eligibility, claims, prior authorization, denial recovery, inbox management, patient communications, Rx refills — so doctors and staff can focus on patients.",
+    description: "Agentman is an agentic healthcare platform. It automates revenue cycle workflows using AI agents without sacrificing control. Every action is testable, traceable, and auditable.",
     url: "https://agentman.ai/",
     lightSrc: "/images/logos/agentman/agentman-wordmark-light.svg",
     darkSrc: "/images/logos/agentman/agentman-wordmark-dark.svg",
@@ -199,7 +199,7 @@ export const clients = [
   },
   {
     name: "Spring AI",
-    description: "The Spring AI project aims to streamline the development of applications that incorporate artificial intelligence functionality without unnecessary complexity.",
+    description: "Spring AI aims to streamline the development of applications that incorporate artificial intelligence functionality without unnecessary complexity.",
     url: "https://docs.spring.io/spring-ai/reference",
     lightSrc: "/images/logos/spring-ai/spring-ai-logo-light.svg",
     darkSrc: "/images/logos/spring-ai/spring-ai-logo-dark.svg",
@@ -236,7 +236,7 @@ export const clients = [
   },
   {
     name: "Ona",
-    description: "Run a team of AI software engineers in the cloud. Orchestrated, governed, secured at the kernel.",
+    description: "Ona is a platform for background agents. Run a team of AI software engineers in the cloud. Orchestrated, governed, secured at the kernel.",
     url: "https://ona.com",
     lightSrc: "/images/logos/ona/ona-wordmark-light.svg",
     darkSrc: "/images/logos/ona/ona-wordmark-dark.svg",
@@ -279,7 +279,7 @@ export const clients = [
     sourceCodeUrl: "https://github.com/generalaction/emdash",
   },
   {
-    name: "Snowflake",
+    name: "Snowflake Cortex Code",
     description: "Cortex Code is an AI-driven intelligent agent integrated into the Snowflake platform, optimized for complex data engineering, analytics, machine learning, and agent-building tasks.",
     url: "https://docs.snowflake.com/en/user-guide/cortex-code/cortex-code",
     lightSrc: "/images/logos/snowflake/snowflake-logo-light.svg",