diff --git a/docs/home.mdx b/docs/home.mdx index 3f6830e..fa6c97e 100644 --- a/docs/home.mdx +++ b/docs/home.mdx @@ -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. -
- - OpenCode - OpenCode - - - Cursor - Cursor - - - Amp - Amp - - - Letta - Letta - - - Goose - Goose - - - GitHub - GitHub - - - VS Code - VS Code - - - Claude Code - Claude Code - - - Claude - Claude - - - OpenAI Codex - OpenAI Codex - - - Factory - Factory - -
+ ## Open development diff --git a/docs/snippets/LogoCarousel.jsx b/docs/snippets/LogoCarousel.jsx new file mode 100644 index 0000000..7ca224c --- /dev/null +++ b/docs/snippets/LogoCarousel.jsx @@ -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 ( + <> +
+
+ {row1Doubled.map((logo, i) => ( + + {logo.name} + {logo.name} + + ))} +
+
+
+
+ {row2Doubled.map((logo, i) => ( + + {logo.name} + {logo.name} + + ))} +
+
+ + ); +}; diff --git a/docs/style.css b/docs/style.css index 856a237..44db767 100644 --- a/docs/style.css +++ b/docs/style.css @@ -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 {