Toolverse
All skills

create-element

by crafter-station

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

Quick info

Category
Frontend
Views
2

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

  1. 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.
  2. 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.
  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.
  4. Po zakończeniu implementacji uruchom build rejestracji i serwer deweloperski: bun run build:registry && bun run dev. Skill zarejestruje nowy element w systemie.
  5. Jeśli tworzysz komponent logo z wariantami (ikona, logotyp, ciemny/jasny motyw), użyj zamiast tego skill'u dedykowanego logo-with-variants.
  6. Przetestuj komponent w lokalnym środowisku deweloperskim i upewnij się, że pojawia się w rejestrze tryelements.dev.

Related skills

senior-fullstack

by davila7

Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects,

Frontend
2896

interactive-dashboard-builder

by anthropics

Build self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive reports, or generating shareable HTML files with charts and filters that work without a server.

Frontend
2298

livewire-development

by spatie

Develops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior;

Frontend
2335

shadcn-ui-setup

by maneeshanif

Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.

Frontend
23167

shadcn-ui

by josechifflet

shadcn/ui component patterns for Next.js 16 applications. This skill should be used when adding UI components, customizing component styles, composing primitives, or integrating forms with react-hook-form. Covers installation, customization, composition patterns, and

Frontend
157206

keyword-research

by openclaw

Discovers high-value keywords with search intent analysis, difficulty assessment, and content opportunity mapping. Essential for starting any SEO or GEO content strategy.

Frontend
24138