Toolverse
All skills
Frontend

new-component

by longbridge

Create new GPUI components. Use when building components, writing UI elements, or creating new component implementations.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
longbridge
Category
Frontend
GitHub repo

About this skill

Create new GPUI components. Use when building components, writing UI elements, or creating new component implementations.

How to use

  1. Określ typ komponentu, który chcesz utworzyć: bezstanowy (czysta prezentacja, jak Button), stanowy (zarządzający własnym stanem, jak Select) czy złożony (zbudowany na bazie istniejących komponentów, jak AlertDialog).

  2. Utwórz nowy plik komponentu w katalogu crates/ui/src/ (np. alert_dialog.rs). Zdefiniuj strukturę komponentu z polami publicznymi i zaimplementuj konstruktor new() oraz metody buildera do konfiguracji właściwości.

  3. Zarejestruj moduł komponentu w pliku crates/ui/src/lib.rs, dodając linię pub mod nazwa_komponentu;.

  4. Upewnij się, że Twój komponent podąża za istniejącymi wzorcami z komponentów takich jak Button, Select czy Dialog — zachowaj spójność API i stylów zgodnie z wzorcem Shadcn UI.

  5. Napisz dokumentację komponentu oraz story (scenariusze testowe) w dedykowanym folderze story.

  6. Dodaj komponent do listy story w pliku crates/story/src/main.rs, aby był dostępny w systemie demonstracyjnym projektu.

Related skills

tailwind-design-system

by wshobson

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Frontend
2676

zustand

by lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

Frontend
36126

dev-browser

by SawyerHood

Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include \

Frontend
38151

mermaid-gen

by vladm3105

Generate syntactically correct Mermaid diagrams for technical documentation

Frontend
23124

theme-factory

by anthropics

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Frontend
40139

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