mirror of
https://github.com/agentskills/agentskills.git
synced 2026-06-18 15:54:06 +08:00
Merge pull request #291 from jonathanhefner/add-clients-page
Add Client Showcase page
This commit is contained in:
Jonathan Hefner
GitHub
+1
-1
@@ -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.
|
||||
|
||||
@@ -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} />
|
||||
@@ -23,6 +23,7 @@
|
||||
"home",
|
||||
"what-are-skills",
|
||||
"specification",
|
||||
"clients",
|
||||
{
|
||||
"group": "For skill creators",
|
||||
"pages": [
|
||||
|
||||
+2
-1
@@ -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
|
||||
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
{/*
|
||||
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 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">
|
||||
<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 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>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
+20
-276
@@ -1,272 +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",
|
||||
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",
|
||||
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",
|
||||
url: "https://autohand.ai/",
|
||||
lightSrc: "/images/logos/autohand/autohand-light.svg",
|
||||
darkSrc: "/images/logos/autohand/autohand-dark.svg",
|
||||
width: "120px",
|
||||
instructionsUrl: "https://autohand.ai/docs/working-with-autohand-code/agent-skills.html",
|
||||
sourceCodeUrl: "https://github.com/autohandai/code-cli",
|
||||
},
|
||||
{
|
||||
name: "OpenCode",
|
||||
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",
|
||||
url: "https://www.all-hands.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",
|
||||
url: "https://mux.coder.com/",
|
||||
lightSrc: "/images/logos/mux/mux-editor-light.svg",
|
||||
darkSrc: "/images/logos/mux/mux-editor-dark.svg",
|
||||
width: "120px",
|
||||
instructionsUrl: "https://mux.coder.com/agent-skills",
|
||||
sourceCodeUrl: "https://github.com/coder/mux",
|
||||
},
|
||||
{
|
||||
name: "Cursor",
|
||||
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",
|
||||
url: "https://ampcode.com/",
|
||||
lightSrc: "/images/logos/amp/amp-logo-light.svg",
|
||||
darkSrc: "/images/logos/amp/amp-logo-dark.svg",
|
||||
width: "120px",
|
||||
instructionsUrl: "https://ampcode.com/manual#agent-skills",
|
||||
},
|
||||
{
|
||||
name: "Letta",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
url: "https://piebald.ai",
|
||||
lightSrc: "/images/logos/piebald/Piebald_wordmark_light.svg",
|
||||
darkSrc: "/images/logos/piebald/Piebald_wordmark_dark.svg",
|
||||
},
|
||||
{
|
||||
name: "Factory",
|
||||
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",
|
||||
url: "https://shittycodingagent.ai/",
|
||||
lightSrc: "/images/logos/pi/pi-logo-light.svg",
|
||||
darkSrc: "/images/logos/pi/pi-logo-dark.svg",
|
||||
width: "80px",
|
||||
instructionsUrl: "https://github.com/badlogic/pi-mono/blob/main/packages/coding-agent/docs/skills.md",
|
||||
sourceCodeUrl: "https://github.com/badlogic/pi-mono",
|
||||
},
|
||||
{
|
||||
name: "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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
instructionsUrl: "https://github.com/mistralai/mistral-vibe",
|
||||
sourceCodeUrl: "https://github.com/mistralai/mistral-vibe",
|
||||
},
|
||||
{
|
||||
name: "Command Code",
|
||||
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",
|
||||
instructionsUrl: "https://commandcode.ai/docs/skills",
|
||||
},
|
||||
{
|
||||
name: "Ona",
|
||||
url: "https://ona.com",
|
||||
lightSrc: "/images/logos/ona/ona-wordmark-light.svg",
|
||||
darkSrc: "/images/logos/ona/ona-wordmark-dark.svg",
|
||||
width: "120px",
|
||||
instructionsUrl: "https://ona.com/docs/ona/agents-md#skills-for-repository-specific-workflows",
|
||||
},
|
||||
{
|
||||
name: "VT Code",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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) => {
|
||||
@@ -277,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];
|
||||
@@ -289,21 +35,19 @@ 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((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) => (
|
||||
<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((client, i) => (
|
||||
<div key={`${client.name}-${i}`} style={{ width: 150 * (client.scale || 1), maxWidth: "100%" }}>
|
||||
<Logo client={client} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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: "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",
|
||||
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: "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",
|
||||
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: "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",
|
||||
instructionsUrl: "https://block.github.io/goose/docs/guides/context-engineering/using-skills/",
|
||||
sourceCodeUrl: "https://github.com/block/goose",
|
||||
},
|
||||
{
|
||||
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",
|
||||
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: "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: "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",
|
||||
},
|
||||
{
|
||||
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 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",
|
||||
darkSrc: "/images/logos/databricks/databricks-logo-dark.svg",
|
||||
instructionsUrl: "https://docs.databricks.com/aws/en/assistant/skills",
|
||||
},
|
||||
{
|
||||
name: "Agentman",
|
||||
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",
|
||||
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: "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",
|
||||
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: "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",
|
||||
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 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",
|
||||
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/",
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user