logo-with-variants

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.

1. Przygotuj pliki SVG swoich logo — powinieneś mieć warianty dla ikony, wordmarku i logo, opcjonalnie z wersjami dla trybu jasnego i ciemnego (nazwy plików z sufiksem -dark.svg lub -light.svg). Umieść je w katalogu public/test/ lub przygotuj ścieżki do nich.

2. Aktywuj skill i podaj użytkownikowi pliki SVG. Skill przeanalizuje każdy plik, identyfikując typ wariantu, kolory, wymiary i viewBox. Jeśli pliki zawierają wersje dla różnych trybów, skill je automatycznie rozpozna.

3. Skill utworzy plik komponentu w lokalizacji src/components/ui/logos/{nazwa}.tsx. Komponent będzie zawierać interfejs props z opcjami variant (icon, logo, wordmark) i mode (dark, light), wraz z obiektem COLORS do zarządzania kolorami dla każdego trybu.

4. Skill skonwertuje każdy plik SVG na JSX — zmieni atrybuty SVG na notację camelCase (fill-rule na fillRule, stroke-width na strokeWidth), zastąpi twarde kolory zmiennymi z obiektu COLORS i zachowa viewBox oraz wymiary. Doda również tag title dla dostępności.

5. Skill utworzy strukturę rejestracji w katalogu registry/default/blocks/logos/{nazwa}-logo/ z niezbędnymi plikami bloku. Domyślnym wariantem będzie wordmark (główne logo).

6. Sprawdź wygenerowany komponent — porównaj go ze wzorcem w src/components/ui/logos/clerk.tsx, aby upewnić się, że struktura i obsługa trybów są prawidłowe. Komponent jest gotowy do użycia w projekcie Elements.