import React, { useState } from "react"; import Link from "@docusaurus/Link"; import { Check, Copy } from "lucide-react"; import type { Skill } from "@site/src/pages/skills/types"; function generateInstallCommand(repoUrl: string, skillId: string): string { return `npx skills add ${repoUrl} --skill ${skillId}`; } export function SkillCard({ skill }: { skill: Skill }) { const [copied, setCopied] = useState(false); const handleCopyInstall = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); const command = generateInstallCommand(skill.repoUrl, skill.id); navigator.clipboard.writeText(command); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return (

{/* Header with name and badges */}

{skill.name}

{skill.isCommunity && ( Community )} {skill.version && ( v{skill.version} )}

{/* Description */}

{skill.description}

{/* Tags - show max 4 on card, rest visible on detail page */} {skill.tags.length > 0 && (

{skill.tags.slice(0, 4).map((tag, index) => ( {tag} ))}

)} {/* Supporting files indicator */} {skill.supportingFilesType === 'scripts' && (

⚙️ Runs scripts

)} {skill.supportingFilesType === 'templates' && (

📄 Includes templates

)} {skill.supportingFilesType === 'multi-file' && (

📁 Multi-file skill

)}

{/* Footer with actions */}

{/* Install command display */}


                $ {generateInstallCommand(skill.repoUrl, skill.id)}

{copied ? ( ) : ( )}

{/* View Details and Author */}

View Details → {/* Author */} {skill.author && ( by {skill.author} )}

); } export type { Skill };