prowler-ui

Skill dla deweloperów pracujących nad interfejsem Prowlera. Zawiera wytyczne dotyczące komponentów (shadcn/ui zamiast legacy HeroUI), organizacji kodu (actions, adapters, types, hooks), oraz decyzji architektonicznych. Automatycznie aktywuje się przy tworzeniu lub modyfikacji komponentów UI, pracy nad strukturą folderów i współdzielonymi typami. Integruje się z React 19, Next.js 15, Tailwind 4 i innymi narzędziami ekosystemu.

1. Zainstaluj skill w swoim środowisku Claude/Copilot, wskazując repozytorium prowler-cloud/prowler z ścieżką skills/prowler-ui. Skill automatycznie aktywuje się, gdy pracujesz w folderze ui/ lub modyfikujesz komponenty interfejsu.

2. Przy tworzeniu nowego komponentu UI zawsze wybieraj shadcn/ui z folderu components/shadcn/ i stylizuj za pomocą Tailwind 4. Nigdy nie dodawaj nowych komponentów HeroUI (folder components/ui/ jest już legacy).

3. Organizuj kod zgodnie z drzewem decyzyjnym: komponenty specyficzne dla jednej funkcji umieść w features/{feature}/components/, komponenty współdzielone przez 2+ funkcje przenieś do components/shared/. Akcje serwerowe trafiają do actions/{feature}/{feature}.ts, transformacje danych do {feature}.adapter.ts.

4. Dla typów i hooków stosuj regułę współdzielenia: jeśli typ lub hook używany jest w 2+ miejscach, umieść go w types/{domain}.ts lub hooks/ odpowiednio. Typy lokalne (jeden feature) mogą pozostać w {feature}/types.ts.

5. Oznacz komponenty dyrektywą "use client" tylko wtedy, gdy potrzebują stanu lub hooków. Komponenty serwerowe nie wymagają żadnej dyrektywy.

6. Przy wyborze między Next.js App Router a Server Actions, Server Components a Client Components, konsultuj się z wytycznymi skill'u — zawierają konkretne scenariusze dla React 19 (bez useMemo/useCallback) i Next.js 15.