mirror of
https://github.com/agentskills/agentskills.git
synced 2026-06-18 15:54:06 +08:00
Add logo carousel (#69)
This commit is contained in:
Eric Harmeling
committed by
GitHub
Unverified
GitHub
parent
3c2deca383
commit
da24a2bd17
+3
-46
@@ -3,6 +3,8 @@ title: "Overview"
|
||||
description: "A simple, open format for giving agents new capabilities and expertise."
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
## Why Agent Skills?
|
||||
@@ -26,52 +28,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.
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 items-center justify-items-center">
|
||||
<a href="https://opencode.ai/" style={{textDecoration: 'none', border: 'none'}}>
|
||||
<img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/opencode/opencode-wordmark-light.svg" alt="OpenCode" noZoom />
|
||||
<img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/opencode/opencode-wordmark-dark.svg" alt="OpenCode" noZoom />
|
||||
</a>
|
||||
<a href="https://cursor.com/" style={{textDecoration: 'none', border: 'none'}}>
|
||||
<img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/cursor/LOCKUP_HORIZONTAL_2D_LIGHT.svg" alt="Cursor" noZoom />
|
||||
<img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/cursor/LOCKUP_HORIZONTAL_2D_DARK.svg" alt="Cursor" noZoom />
|
||||
</a>
|
||||
<a href="https://ampcode.com/" style={{textDecoration: 'none', border: 'none'}}>
|
||||
<img className="block dark:hidden object-contain" style={{width: '120px', maxWidth: '100%'}} src="/images/logos/amp/amp-logo-light.svg" alt="Amp" noZoom />
|
||||
<img className="hidden dark:block object-contain" style={{width: '120px', maxWidth: '100%'}} src="/images/logos/amp/amp-logo-dark.svg" alt="Amp" noZoom />
|
||||
</a>
|
||||
<a href="https://www.letta.com/" style={{textDecoration: 'none', border: 'none'}}>
|
||||
<img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/letta/Letta-logo-RGB_OffBlackonTransparent.svg" alt="Letta" noZoom />
|
||||
<img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/letta/Letta-logo-RGB_GreyonTransparent.svg" alt="Letta" noZoom />
|
||||
</a>
|
||||
<a href="https://block.github.io/goose/" style={{textDecoration: 'none', border: 'none'}}>
|
||||
<img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/goose/goose-logo-black.png" alt="Goose" noZoom />
|
||||
<img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/goose/goose-logo-white.png" alt="Goose" noZoom />
|
||||
</a>
|
||||
<a href="https://github.com/" style={{textDecoration: 'none', border: 'none'}}>
|
||||
<img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/github/GitHub_Lockup_Dark.svg" alt="GitHub" noZoom />
|
||||
<img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/github/GitHub_Lockup_Light.svg" alt="GitHub" noZoom />
|
||||
</a>
|
||||
<a href="https://code.visualstudio.com/" style={{textDecoration: 'none', border: 'none'}}>
|
||||
<img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/vscode/vscode.svg" alt="VS Code" noZoom />
|
||||
<img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/vscode/vscode-alt.svg" alt="VS Code" noZoom />
|
||||
</a>
|
||||
<a href="https://claude.ai/code" style={{textDecoration: 'none', border: 'none'}}>
|
||||
<img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/claude-code/Claude-Code-logo-Slate.svg" alt="Claude Code" noZoom />
|
||||
<img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/claude-code/Claude-Code-logo-Ivory.svg" alt="Claude Code" noZoom />
|
||||
</a>
|
||||
<a href="https://claude.ai/" style={{textDecoration: 'none', border: 'none'}}>
|
||||
<img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/claude-ai/Claude-logo-Slate.svg" alt="Claude" noZoom />
|
||||
<img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/claude-ai/Claude-logo-Ivory.svg" alt="Claude" noZoom />
|
||||
</a>
|
||||
<a href="https://developers.openai.com/codex" style={{textDecoration: 'none', border: 'none'}}>
|
||||
<img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/oai-codex/OAI_Codex-Lockup_400px.svg" alt="OpenAI Codex" noZoom />
|
||||
<img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/oai-codex/OAI_Codex-Lockup_400px_Darkmode.svg" alt="OpenAI Codex" noZoom />
|
||||
</a>
|
||||
<a href="https://factory.ai/" style={{textDecoration: 'none', border: 'none'}}>
|
||||
<img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/factory/factory-logo-light.svg" alt="Factory" noZoom />
|
||||
<img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/factory/factory-logo-dark.svg" alt="Factory" noZoom />
|
||||
</a>
|
||||
</div>
|
||||
<LogoCarousel />
|
||||
|
||||
## Open development
|
||||
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
{/*
|
||||
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
|
||||
*/}
|
||||
export const LogoCarousel = () => {
|
||||
const logos = [
|
||||
{ name: "OpenCode", url: "https://opencode.ai/", lightSrc: "/images/logos/opencode/opencode-wordmark-light.svg", darkSrc: "/images/logos/opencode/opencode-wordmark-dark.svg" },
|
||||
{ name: "Cursor", url: "https://cursor.com/", lightSrc: "/images/logos/cursor/LOCKUP_HORIZONTAL_2D_LIGHT.svg", darkSrc: "/images/logos/cursor/LOCKUP_HORIZONTAL_2D_DARK.svg" },
|
||||
{ name: "Amp", url: "https://ampcode.com/", lightSrc: "/images/logos/amp/amp-logo-light.svg", darkSrc: "/images/logos/amp/amp-logo-dark.svg", width: "120px" },
|
||||
{ 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" },
|
||||
{ name: "Goose", url: "https://block.github.io/goose/", lightSrc: "/images/logos/goose/goose-logo-black.png", darkSrc: "/images/logos/goose/goose-logo-white.png" },
|
||||
{ name: "GitHub", url: "https://github.com/", lightSrc: "/images/logos/github/GitHub_Lockup_Dark.svg", darkSrc: "/images/logos/github/GitHub_Lockup_Light.svg" },
|
||||
{ name: "VS Code", url: "https://code.visualstudio.com/", lightSrc: "/images/logos/vscode/vscode.svg", darkSrc: "/images/logos/vscode/vscode-alt.svg" },
|
||||
{ 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" },
|
||||
{ name: "Claude", url: "https://claude.ai/", lightSrc: "/images/logos/claude-ai/Claude-logo-Slate.svg", darkSrc: "/images/logos/claude-ai/Claude-logo-Ivory.svg" },
|
||||
{ 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" },
|
||||
{ name: "Factory", url: "https://factory.ai/", lightSrc: "/images/logos/factory/factory-logo-light.svg", darkSrc: "/images/logos/factory/factory-logo-dark.svg" },
|
||||
];
|
||||
|
||||
/* Shuffle logos on component mount */
|
||||
const [shuffled, setShuffled] = useState(logos);
|
||||
|
||||
useEffect(() => {
|
||||
const shuffle = (items) => {
|
||||
const copy = [...items];
|
||||
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;
|
||||
};
|
||||
setShuffled(shuffle(logos));
|
||||
}, []);
|
||||
|
||||
const row1 = shuffled.filter((_, i) => i % 2 === 0);
|
||||
const row2 = shuffled.filter((_, i) => i % 2 === 1);
|
||||
const row1Doubled = [...row1, ...row1];
|
||||
const row2Doubled = [...row2, ...row2];
|
||||
|
||||
return (
|
||||
<>
|
||||
<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} />
|
||||
<img className="hidden dark:block object-contain" style={{ width: logo.width || '150px', maxWidth: '100%' }} src={logo.darkSrc} alt={logo.name} />
|
||||
</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} />
|
||||
<img className="hidden dark:block object-contain" style={{ width: logo.width || '150px', maxWidth: '100%' }} src={logo.darkSrc} alt={logo.name} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -101,6 +101,32 @@ body:has(#enable-section-numbers) {
|
||||
|
||||
|
||||
|
||||
/* Logo carousel */
|
||||
.logo-carousel {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo-carousel-track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
gap: 3rem;
|
||||
padding: 0.75rem 0;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@keyframes logo-scroll {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.logo-carousel-track { animation: none; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*** Page: schema reference ***/
|
||||
|
||||
#schema-reference {
|
||||
|
||||
Reference in New Issue
Block a user