prowler-ui

Enforce shadcn/ui and Tailwind conventions for Prowler UI components.

14.6k|2.3k|Updated Aug 24, 2016
One-click install
npx skills add https://github.com/prowler-cloud/prowler --skill prowler-ui-prowler-cloud
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prowler-ui
Source: https://github.com/prowler-cloud/prowler/tree/main/skills/prowler-ui
Command: npx skills add https://github.com/prowler-cloud/prowler --skill prowler-ui-prowler-cloud

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Standardizes Prowler UI development by enforcing shared patterns and conventions to reduce duplication and confusion across UI work.

Core Features & Use Cases

  • Guided UI patterns: Provides explicit rules for using shadcn/ui with Tailwind in Prowler UI components.
  • Consistent structure: Defines file placement, adapters/actions, and shared types/hooks to improve maintainability.
  • Use Case: When building a new Prowler UI feature, follow prowler-ui guidelines to ensure consistent architecture and styling.

Quick Start

Start by aligning your UI changes with shadcn/ui and Tailwind in components/shadcn, then follow the component placement and decision-tree guidelines.

Frequently Asked Questions about prowler-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure shadcn/ui components with Tailwind in a Next.js project?

To structure shadcn/ui components with Tailwind in a Next.js project, place files inside the components/shadcn directory and follow guidelines for proper server/client component rules. This ensures consistent architecture and reduces duplication across your UI work.

What is the best way to manage shared types and hooks in React UI components?

Managing shared types and hooks in React UI components requires defining explicit conventions for adapters and actions. Following standardized UI patterns ensures maintainability and prevents confusion when scaling your application's shared logic.

Does Prowler UI support mixing shadcn components with legacy HeroUI?

Prowler UI handles mixing shadcn components with legacy HeroUI by defining decision-tree guidelines. These conventions clarify when to use each library, ensuring proper folder placement and maintaining architectural consistency across different UI patterns.

How do I organize Next.js server and client components in a shared UI folder?

Organizing Next.js server and client components in a shared UI folder requires applying explicit server/client component rules. Standardized placement guidelines ensure components are correctly separated, maintaining proper architecture and rendering logic.

When do I need to use adapters and actions in Tailwind UI development?

You need to use adapters and actions in Tailwind UI development when implementing shared component logic and data fetching. Defining explicit conventions for these elements improves maintainability and standardizes interactions across your application architecture.