prowler-ui
Prowler UI-specific patterns. For generic patterns, see: typescript, react-19, nextjs-15, tailwind-4. Trigger: When working inside ui/ on Prowler-specific conventions (shadcn vs HeroUI legacy, folder placement, actions/adapters, shared types/hooks/lib).
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Prowler UI-specific patterns. For generic patterns, see: typescript, react-19, nextjs-15, tailwind-4. Trigger: When working inside ui/ on Prowler-specific conventions (shadcn vs HeroUI legacy, folder placement, actions/adapters, shared types/hooks/lib).
How to use
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.
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).
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.
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.
Oznacz komponenty dyrektywą "use client" tylko wtedy, gdy potrzebują stanu lub hooków. Komponenty serwerowe nie wymagają żadnej dyrektywy.
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.