ui-development
Buduj interfejsy z komponentami Redpanda Registry i najlepszymi praktykami dostępności
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność do tworzenia interfejsów użytkownika z wykorzystaniem komponentów z Redpanda UI Registry, stylizacji Tailwind v4 oraz wdrażania standardów dostępności. Skill automatycznie aktywuje się podczas pracy nad komponentami UI, stronami czy modyfikacji istniejących elementów z rejestru. Zapewnia dostęp do dokumentacji komponentów, reguł stylizacji i systemu ikon, jednocześnie wymuszając najlepsze praktyki — zakazuje używania przestarzałych bibliotek, kopiowania kodu źródłowego oraz dodawania marginesów bezpośrednio do komponentów.
Jak używać
Skill aktywuje się automatycznie, gdy pracujesz nad UI — np. podczas budowania nowych komponentów, stron lub modyfikacji elementów z rejestru. Możesz też ręcznie go wywołać, używając słów kluczowych takich jak "design system", "ui", "frontend", "registry" czy "component".
Zanim zaczniesz pisać kod, skill użyje narzędzia mcp__redpanda-ui__search-docs lub mcp__redpanda-ui__get_component, aby pobrać dokumentację i sprawdzić dostępne komponenty z katalogu src/components/redpanda-ui/.
Zawsze używaj komponentów z Redpanda UI Registry zamiast instalować zewnętrzne biblioteki UI. Jeśli potrzebujesz konkretnego komponentu, skill zainstaluje go za pomocą CLI.
Podczas stylizacji przestrzegaj reguł: używaj wariantów komponentów do dostosowania wyglądu, nie dodawaj marginesów bezpośrednio do komponentów z rejestru, a zamiast tego korzystaj z dedykowanych reguł stylizacji.
Jeśli modyfikujesz pliki w src/components/redpanda-ui/, dodaj komentarz z oznaczeniem // UPSTREAM: [powód], aby śledzić zmiany dla potencjalnego wkładu do upstream rejestru.
Nigdy nie używaj przestarzałej biblioteki @redpanda-data/ui, nie kopiuj kodu źródłowego komponentów i nie dodawaj stylów inline do elementów z rejestru — skill będzie Cię o tym przypominać.