prowler-ui
Prowler-ui equips you with the component patterns and design principles that power Prowler's cloud security platform. Learn the established conventions for building cohesive user interfaces and maintaining design consistency across the ecosystem. This skill bridges the gap between raw components and production-ready UI architecture.
Prowler-ui establishes component patterns rooted in shadcn/ui integration with Next.js 16 and React 19, layered on Tailwind CSS. The skill teaches you to build cohesive user interfaces by following established conventions for component structure, prop design using discriminated unions, and reusable design system discipline. These patterns ensure consistency across Prowler's cloud security platform and maintain production-ready UI architecture.
AI-generated summary based on this skill's SKILL.md
Install
prowler-cloud/prowler/prowler-ui · repository language: Python
git clone https://github.com/prowler-cloud/prowler
cp -r prowler/skills/prowler-ui ~/.claude/skills/prowler-uiFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are the prowler UI component patterns I should follow?
Prowler-ui establishes component patterns rooted in shadcn/ui integration with Next.js 16 and React 19, layered on Tailwind CSS. The skill teaches you to build cohesive user interfaces by following established conventions for component structure, prop design using discriminated unions, and reusable design system discipline. These patterns ensure consistency across Prowler's cloud security platform and maintain production-ready UI architecture.
How should I organize my code within the prowler UI folder structure?
Prowler-ui defines clear folder structure conventions that separate concerns into types, hooks, and lib directories. This organization rule ensures that TypeScript strict typing, label maps, and utility functions are properly isolated and discoverable. Following these conventions helps maintain code quality and makes it easier for teams to review and enforce UI best practices in pull requests.
What form validation and state management patterns does prowler UI recommend?
Prowler-ui teaches form validation using Zod with React Hook Form, paired with Zustand for state management. The skill covers correct application of these patterns alongside styling approaches using Tailwind's cn utility for conditional styles and CSS variables for chart styling with Recharts. These patterns work together to create maintainable, type-safe forms and reactive UI components.
How do I set up the development environment and run quality checks for prowler UI?
Prowler-ui guides you through setting up Next.js 16 with React 19 and Tailwind CSS, then running quality checks via Playwright for end-to-end testing. The skill includes a code quality healthcheck process to validate your setup and ensure compliance with Prowler's UI standards before committing code.
What anti-patterns should I avoid when building prowler UI components?
Prowler-ui explicitly warns against derived state using useEffect and eliminates the need for useMemo and useCallback in React 19. The skill teaches server actions adapters and the Next.js app router pattern as the correct approach, helping you avoid common pitfalls that degrade performance or introduce unnecessary complexity in your component logic.
How does the shadcn UI integration work with prowler's design system?
Prowler-ui bridges raw shadcn components—including modal and select components—with Prowler's design system reuse philosophy. The skill shows how to leverage shadcn's component library as a foundation while applying Prowler's specific conventions, styling with CSS variables, and maintaining TypeScript strict typing throughout to create a cohesive, production-ready UI ecosystem.
SKILL.md
rendered from the published skill — quoted content, verbatim
Related Generic Skills
typescript- Const types, flat interfacesreact-19- No useMemo/useCallback, compilernextjs-16- App Router, Server Actionstailwind-4- cn() utility, styling ruleszod-4- Schema validationzustand-5- State managementai-sdk-5- Chat/AI featuresplaywright- E2E testing (see alsoprowler-test-ui)
Tech Stack (Versions)
Next.js 16.2.3 | React 19.2.5 | Tailwind 4.1.18 | shadcn/ui
Zod 4.1.11 | React Hook Form 7.62.0 | Zustand 5.0.8
NextAuth 5.0.0-beta.30 | Recharts 2.15.4
CRITICAL:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/prowler-ui/SKILL.md
skills/prowler-ui/references/ui-docs.md