prowler-ui_skill

Overview

This skill codifies Prowler UI conventions for building consistent, maintainable interfaces inside the ui/ folder. It enforces component placement, styling, shared types/hooks/lib decisions, and the shadcn vs HeroUI legacy rule to avoid mixing component libraries. Use it when authoring UI features, server actions, adapters, and shared utilities for the Prowler frontend.

How this skill works

It inspects where new components, hooks, types, actions, and utils should live and guides placement based on usage scope (single-use vs shared). It enforces using shadcn/ui + Tailwind for new components, preserves HeroUI only for legacy components, and applies Tailwind/cn()/style rules and Recharts color handling. It also maps form and validation patterns (React Hook Form + Zod) and server action/adapters conventions.

When to use it

• When adding new UI components or pages under ui/
• When deciding whether code belongs in a feature folder or shared lib/types/hooks
• When implementing server actions, data adapters, or shared types
• When creating charts or other third-party components (Recharts special rules)
• When updating styling patterns or migrating legacy HeroUI pieces

Best practices

• Always create new UI components under components/shadcn/ and use Tailwind classes
• If a feature is used in 2+ places, move code to lib/, types/, or hooks/ per scope rule
• Keep existing HeroUI components as-is; do not add new HeroUI components
• Follow the Component Placement decision tree: local components in feature folder, shared components in components/{domain}/
• Use cn() for conditional Tailwind, className for static classes, and style/var() for library props (Recharts)
• Validate forms with React Hook Form + zodResolver and mirror server-side validation

Example use cases

• Add a new scanning UI: components/shadcn/scans/, local hooks in scans/hooks.ts, server actions in actions/scans/
• Introduce a shared provider type used across features: add to types/providers.ts and shared adapters in lib/providers/
• Build a reusable chart: place component in components/graphs/, use CHART_COLORS with var() for Recharts props
• Migrate a legacy HeroUI page: leave HeroUI components in components/ui/ and refactor new parts with shadcn/ui
• Create a form-backed feature: use use client, React Hook Form with Zod schema, and server action in actions/{feature}/