agent/agentskills
1
0
Fork 0
mirror of https://github.com/agentskills/agentskills.git synced 2026-06-18 15:54:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Simplify LogoCarousel and rework "Adoption" section on home.mdx

Browse Source 
Collapse the two-row `LogoCarousel` into a single row and compute its
scroll duration from the total cycle width using a fixed
`PX_PER_SECOND`, so scroll speed stays consistent regardless of how many
logos appear or how they are scaled. Drop the now-unneeded vertical
padding on `.logo-carousel-track`.

Rename the "Adoption" heading to "Where can I use Agent Skills?" and
rewrite its blurb to point readers at the Client Showcase page, matching
the question-led style of the neighboring sections.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner
2026-04-19 13:07:38 -05:00
Unverified
parent c163f1af39
commit 278196525d
3 changed files with 21 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/home.mdx
+2 -2
View File
@@ -42,9 +42,9 @@ Agents load skills through **progressive disclosure**, in three stages:
Full instructions load only when a task calls for them, so agents can keep many skills on hand with only a small context footprint.
## Adoption
## Where can I use Agent Skills?
Agent Skills are supported by leading AI development tools.
Agent Skills are supported by a large number of AI tools and agentic clients — see the [Client Showcase](/clients) to explore some of them!
<LogoCarousel clients={clients} />
docs/snippets/LogoCarousel.jsx
+19 -26
View File
@@ -3,10 +3,9 @@
Shuffles clients on each page load for fair exposure.
*/}
export const LogoCarousel = ({clients}) => {
/* Shuffle clients on component mount */
const [shuffled, setShuffled] = useState(clients);
/* Shuffle clients on component mount */
useEffect(() => {
const shuffle = (items) => {
const copy = [...items];
@@ -19,6 +18,16 @@ export const LogoCarousel = ({clients}) => {
setShuffled(shuffle(clients));
}, []);
const doubled = [...shuffled, ...shuffled];
const GAP_PX = 48; // 3rem at the default 16px base
const PX_PER_SECOND = 40;
const cycleWidth = shuffled.reduce(
(sum, client) => sum + 150 * (client.scale || 1) + GAP_PX,
0,
);
const cycleDuration = cycleWidth / PX_PER_SECOND;
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 />
@@ -26,31 +35,15 @@ export const LogoCarousel = ({clients}) => {
</a>
);
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((client, i) => (
<div key={`${client.name}-${i}`} style={{ width: 150 * (client.scale || 1), maxWidth: "100%" }}>
<Logo client={client} />
</div>
))}
</div>
<div className="logo-carousel">
<div className="logo-carousel-track" style={{ animation: `logo-scroll ${cycleDuration}s linear infinite` }}>
{doubled.map((client, i) => (
<div key={`${client.name}-${i}`} style={{ width: 150 * (client.scale || 1), maxWidth: "100%" }}>
<Logo client={client} />
</div>
))}
</div>
<div className="logo-carousel">
<div className="logo-carousel-track" style={{ animation: 'logo-scroll 60s linear infinite reverse' }}>
{row2Doubled.map((client, i) => (
<div key={`${client.name}-${i}`} style={{ width: 150 * (client.scale || 1), maxWidth: "100%" }}>
<Logo client={client} />
</div>
))}
</div>
</div>
</>
</div>
);
};
docs/style.css
-1
View File
@@ -94,7 +94,6 @@ body:has(#enable-section-numbers) {
align-items: center;
width: max-content;
gap: 3rem;
padding: 0.75rem 0;
will-change: transform;
}