Registry Skill Card

Component

About

Reusable skill registry card for installed workspace skills and skills.sh templates, with badges, command preview, light modal tone, status and actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Registry Skill Card to your project and fits it to your theme.

Code

How Registry Skill Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import RegistrySkillCard from "@/components/ui/qreatify-skill-registry-card";

export default function RegistrySkillCardDemo() {
  return (
    <div className="grid max-w-4xl gap-4 bg-[#f7f7f6] p-6 md:grid-cols-2">
      <RegistrySkillCard
        command="npx skills add vercel-labs/skills"
        description="Find the best matching agent skills before specialized work starts."
        enabled
        isDefault
        name="find-skills"
        scope="Skill discovery"
        source="skills.sh"
        sourceUrl="https://www.skills.sh/vercel-labs/skills/find-skills"
      />
      <RegistrySkillCard
        actionLabel="Add"
        description="Frontend design guidance for polished product interfaces."
        name="frontend-design"
        repo="anthropics/skills"
        variant="template"
      />
    </div>
  );
}