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