create-element
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
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
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.
How to use
- Uruchom skrypt scaffoldingu, podając kategorię i nazwę nowego elementu: bun run .claude/skills/create-element/scripts/scaffold-element.ts [kategoria] [nazwa]. Skill wygeneruje strukturę plików i plik konfiguracyjny rejestracji.
- Otwórz wygenerowany komponent i zaimplementuj logikę UI, kierując się wzorcami z pliku references/component-patterns.md. Jeśli komponent używa bibliotek zewnętrznych (np. radix-ui, next-themes, cmdk), przejdź do kroku 3.
- Przed implementacją zależności użyj Context7 MCP do pobrania aktualnej dokumentacji: najpierw rozwiąż identyfikator biblioteki (np. "radix-ui"), następnie zapytaj o konkretne API lub wzorce, które potrzebujesz.
- Po zakończeniu implementacji uruchom build rejestracji i serwer deweloperski: bun run build:registry && bun run dev. Skill zarejestruje nowy element w systemie.
- Jeśli tworzysz komponent logo z wariantami (ikona, logotyp, ciemny/jasny motyw), użyj zamiast tego skill'u dedykowanego logo-with-variants.
- Przetestuj komponent w lokalnym środowisku deweloperskim i upewnij się, że pojawia się w rejestrze tryelements.dev.