logo-with-variants

Q: How do I install logo-with-variants?

Run npx skills add https://github.com/crafter-station/elements --skill logo-with-variants in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/logo-with-variants/ (personal) or .claude/skills/logo-with-variants/ (project).

by crafter-stationFrontend & Design

Create logo components with multiple variants (icon, wordmark, logo) and light/dark modes. Use when the user provides logo SVG files and wants to create a variant-based logo component following the Clerk pattern in the Elements project.

Installs: 74
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/crafter-station/elements --skill logo-with-variants

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads logo-with-variants automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Logo with Variants Creator

Creates logo components with variant support following the established pattern in Elements codebase.

When to use this Skill

User provides multiple SVG files for a logo (icon, wordmark, logo variants)
User mentions "variants", "light/dark modes", or references Clerk-style logos
User wants to add a new logo to the collection with multiple variants
User has SVG files in public/test/ or provides paths to logo files

Process

1. Analyze provided SVGs

Identify variant types (icon, logo, wordmark)
Detect light/dark mode versions (files ending in -dark.svg or -light.svg)
Extract viewBox, colors, and dimensions from each SVG
Note the brand guidelines if provided

2. Create component file

Location: src/components/ui/logos/{name}.tsx

Props interface:

{
  className?: string;
  variant?: "icon" | "logo" | "wordmark";
  mode?: "dark" | "light";
}

Structure:

Use conditional rendering based on variant prop
Configure colors for light/dark modes using a COLORS object pattern
Default to variant="wordmark" (primary logo)
Support theme-aware mode prop
Add proper TypeScript types

Reference implementation: Check src/components/ui/logos/clerk.tsx for the exact pattern to follow.

3. Convert SVG to JSX

For each SVG file:

Read the SVG file content
Convert SVG attributes to JSX (e.g., fill-rule → fillRule, stroke-width → strokeWidth)
Replace hardcoded colors with variables from COLORS object
Preserve viewBox and dimensions
Add title tag for accessibility

4. Create registry structure

Location: registry/default/blocks/logos/{name}-logo/

Files to create:

registry-item.json:

{
  "name": "{name}-logo",
  "type": "registry:block",
  "title": "{DisplayName} Logo",
  "description": "{Brand description}",
  "categories": ["logos"],
  "meta": {
    "hasVariants": true,
    "variants": [
      "icon-dark",
      "icon-light",
      "logo-dark",
      "logo-light",
      "wordmark-dark",
      "wordmark-light"
    ],
    "variantTypes": {
      "base": ["icon", "logo", "wordmark"],
      "modes": ["dark", "light"]
    }
  },
  "files": [
    {
      "path": "components/logos/{name}.tsx",
      "type": "registry:component"
    }
  ],
  "docs": "{Brand} logo with 3 base variants (icon, logo, wordmark) and 2 modes (dark, light) = 6 total combinations. Theme-aware: automatically adapts colors when you switch themes."
}

CRITICAL: The variants array MUST list ALL combinations explicitly in {base}-{mode} format (e.g., "icon-dark", "logo-light"). This is what makes the variant count badge (e.g., "6") appear correctly in the UI. Do NOT just list base names like ["icon", "logo", "wordmark"].

Copy component to: components/logos/{name}.tsx

5. Update registry/index.ts

CRITICAL STEP: The registry/index.ts file is the SOURCE OF TRUTH for the build process. You MUST add/update the logo entry in this file with the EXACT same metadata structure as the registry-item.json.

Location: registry/index.ts

Find the array of registry items and add your logo entry with the complete meta field:

{
  $schema: "https://ui.shadcn.com/schema/registry-item.json",
  name: "{name}-logo",
  type: "registry:block",
  title: "{DisplayName} Logo",
  description: "{Brand description}",
  registryDependencies: [],
  dependencies: [],
  categories: ["logos"],
  meta: {
    hasVariants: true,
    variants: [
      "icon-dark",
      "icon-light",
      "logo-dark",
      "logo-light",
      "wordmark-dark",
      "wordmark-light",
    ],
    variantTypes: {
      base: ["icon", "logo", "wordmark"],
      modes: ["dark", "light"],
    },
  },
  files: [
    {
      path: "registry/default/blocks/logos/{name}-logo/components/logos/{name}.tsx",
      type: "registry:component",
    },
  ],
  docs: "{Brand} logo with 3 base variants (icon, logo, wordmark) and 2 modes (dark, light) = 6 total combinations. Theme-aware: automatically adapts colors when you switch themes.",
}

If updating an existing logo: Search for the logo name in registry/index.ts and replace the entire entry with the new metadata including the meta field.

6. Update logos collection

Add to registry/default/blocks/logos/logos/registry-item.json:

Add new logo to the list
Ensure it's in the correct category (tech-giants, ai-services, etc.)

7. Build registry

Run:

bun run build:registry

This generates the public registry files.

Component Template Pattern

interface LogoProps {
  className?: string;
  variant?: "icon" | "logo" | "wordmark";
  mode?: "dark" | "light";
}

const COLORS = {
  dark: "#HEX_VALUE",
  light: "#HEX_VALUE",
};

export function BrandLogo({
  className,
  variant = "wordmark",
  mode = "dark",
}: LogoProps) {
  const color = COLORS[mode];

  if (variant === "icon") {
    return (
      <svg className={className} viewBox="...">
        {/* Icon SVG content */}
      </svg>
    );
  }

  if (variant === "logo") {
    return (
      <svg className={className} viewBox="...">
        {/* Logo SVG content */}
      </svg>
    );
  }

  // Default: wordmark
  return (
    <svg className={className} viewBox="...">
      {/* Wordmark SVG content */}
    </svg>
  );
}

Expected outcome

After completion:

Component is available at @/components/ui/logos/{name}
Logo appears in the logos page with variant badge
Context menu shows "View X Variants" option
Variants dialog displays all combinations (variants × modes)
All copy/download functions work for each variant
Can be installed via npx shadcn@latest add @elements/{name}-logo

Brand Guidelines Integration

If brand guidelines are provided:

Use exact brand colors specified
Follow naming conventions (e.g., Linear uses "Linear" not "linear")
Respect hierarchy (wordmark primary, logomark for tight layouts, icon for social)
Include usage notes in component comments

Files to reference

Template: src/components/ui/logos/clerk.tsx
Registry example: registry/default/blocks/logos/clerk-logo/
Variants dialog: src/app/docs/logos/logo-variants-dialog.tsx
Logos collection: registry/default/blocks/logos/logos/registry-item.json

Common pitfalls to avoid

Don't forget to copy component to both src/ and registry/ locations
Ensure hasVariants: true is set in registry metadata
Don't hardcode colors - use COLORS object for theme support
Remember to run build:registry after making changes
Test all variant combinations before committing

FAQ

What does the logo-with-variants skill do?

How do I install logo-with-variants?

Run npx skills add https://github.com/crafter-station/elements --skill logo-with-variants in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/logo-with-variants/ (personal) or .claude/skills/logo-with-variants/ (project).

Which AI agents can use logo-with-variants?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is logo-with-variants safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains logo-with-variants?

It is published by crafter-station in crafter-station/elements. It has 74 recorded installs.

More from crafter-station/elements

View all →

tech-logos

crafter-station/elements

Install official tech brand logos from the Elements registry. Use when user needs logos for tech companies (Clerk, Vercel, GitHub, etc.), AI providers (OpenAI, Anthropic, Claude), social platforms, or any brand assets. Triggers on "logo", "brand", "icon for [company]", "add [company] logo", placeholder logo detection, or when building landing pages, auth UIs, or integrations showcases.

Marketing & SEO103 installs

sfx-elements

crafter-station/elements

Install CC0 sound effects from the Elements registry. Use when user needs UI sounds (click, pop, notification), transition sounds (whoosh, swoosh), cinematic sounds (boom, riser, glitch), or audio for video production. Triggers on "sound effect", "SFX", "audio", "notification sound", "click sound", "whoosh", "UI sound", "sound for video", "play sound", "useSound".

Media & Creative85 installs

create-element

crafter-station/elements

Create new UI elements for tryelements.dev registry. Use when: (1) Adding new UI components (buttons, inputs, cards), (2) Building integration components (Clerk, Stripe, Uploadthing), (3) Creating theme-related elements, (4) Any shadcn-style registry component. IMPORTANT: For logo components with variants (icon/wordmark/logo + dark/light), use the logo-with-variants skill instead. This skill includes scaffolding, registry schema, and component patterns. ALWAYS use Context7 MCP to fetch latest dependency docs before implementing.

Frontend & Design71 installs

ai-elements

crafter-station/elements

Install AI UI components from the Elements registry. Use when user needs chat interfaces, agentic UIs (tool calls, reasoning, plans), multi-agent dashboards, or AI devtools. Triggers on "AI component", "chat UI", "agent UI", "tool call component", "streaming text", "agentic", "multi-agent", "AI SDK", "chat input", "message bubble", "thinking indicator".

Frontend & Design53 installs

theme-elements

crafter-station/elements

Install theme switcher components from the Elements registry. Use when user needs dark mode toggles, theme switchers, light/dark buttons, or theme dropdowns. Triggers on "theme switcher", "dark mode", "light mode", "theme toggle", "theme button", "switch theme", "dark mode toggle".

Frontend & Design52 installs

elements

crafter-station/elements

Open the skill to read its SKILL.md instructions.

52 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

logo-with-variants

Install

Install

Describe the task

Review the result

SKILL.md

Logo with Variants Creator

When to use this Skill

Process

1. Analyze provided SVGs

2. Create component file

3. Convert SVG to JSX

4. Create registry structure

5. Update registry/index.ts

6. Update logos collection

7. Build registry

Component Template Pattern

Expected outcome

Brand Guidelines Integration

Files to reference

Common pitfalls to avoid

FAQ

More from crafter-station/elements

Popular frontend & design skills