{"enrichment":{"faq":[{"a":"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.","q":"What are the prowler UI component patterns I should follow?"},{"a":"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.","q":"How should I organize my code within the prowler UI folder structure?"},{"a":"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.","q":"What form validation and state management patterns does prowler UI recommend?"},{"a":"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.","q":"How do I set up the development environment and run quality checks for prowler UI?"},{"a":"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.","q":"What anti-patterns should I avoid when building prowler UI components?"},{"a":"Prowler-ui bridges raw shadcn components\u2014including modal and select components\u2014with 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.","q":"How does the shadcn UI integration work with prowler's design system?"}],"shadow_tags":["design-system-enforcement","component-reuse-first","server-action-patterns","strict-type-safety","derived-state-optimization","discriminated-unions","folder-structure-rules","css-variable-theming","batch-instant-modes"],"summary_rewrite":"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."},"files":[{"bytes":11762,"path":"skills/prowler-ui/SKILL.md","sha256":"02ac9d562341ed45d787ad4bec26e7e89dd7b013af93b4c8a408d93435081d17","url":"https://skillfed.io/files/prowler-cloud/prowler/prowler-ui/e0d6ffcf/SKILL.md"}],"id":"prowler-cloud/prowler/prowler-ui","links":{"html":"https://skillfed.io/prowler-cloud/prowler/prowler-ui","md":"https://skillfed.io/prowler-cloud/prowler/prowler-ui.md","repo":"https://github.com/prowler-cloud/prowler"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":2285,"language":"Python","last_updated":"2026-07-27","license":"Apache-2.0","name":"prowler-ui","publisher":"prowler-cloud","stars":14491},"relations":{"similar":[{"id":"prowler-cloud/prowler/tailwind-4"},{"id":"prowler-cloud/prowler/prowler-test-ui"},{"id":"prowler-cloud/prowler/vitest"},{"id":"prowler-cloud/prowler/prowler"},{"id":"prowler-cloud/prowler/typescript"},{"id":"prowler-cloud/prowler/ai-sdk-5"},{"id":"prowler-cloud/prowler/prowler-provider"},{"id":"prowler-cloud/prowler/tdd"},{"id":"prowler-cloud/prowler/playwright"},{"id":"prowler-cloud/prowler/prowler-tour"}]},"slug":{"owner":"prowler-cloud","repo":"prowler","skill":"prowler-ui"},"version":"e0d6ffcf"}