ui-development

Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices.

1. 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".

2. 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/.

3. 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.

4. 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.

5. 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.

6. 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ć.