skills.rest
brivaro
brivaroCOMMUNITY
Explore all skills by this author →
GitHub

prowler-ui

Enforce Prowler UI development patterns for Next.js, React, and Tailwind CSS projects.

Updated Mar 8, 2026
Search Tags:#ui#react#component library#nextjs#tailwind#prowler
One-click install
npx skills add https://github.com/brivaro/brivaro-ai-wizard --skill prowler-ui-brivaro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prowler-ui
Source: https://github.com/brivaro/brivaro-ai-wizard/tree/main/skills/prowler-ui
Command: npx skills add https://github.com/brivaro/brivaro-ai-wizard --skill prowler-ui-brivaro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides specific guidance and patterns for developing the user interface within the Prowler project, ensuring consistency and adherence to its unique conventions.

Core Features & Use Cases

  • Component Placement: Guides where to place new UI components based on feature usage and scope.
  • Code Location: Defines standard directories for actions, adapters, types, hooks, and utilities.
  • Styling Decisions: Offers rules for applying Tailwind CSS, dynamic styles, and library-specific styling.
  • Use Case: When creating a new dashboard widget for Prowler, this Skill helps determine whether to use shadcn/ui or legacy HeroUI, where to place the component files, and how to apply the correct styling.

Quick Start

Use the prowler-ui skill to create a new button component for the Prowler dashboard.

Frequently Asked Questions about prowler-ui

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

FAQPage Schema
How do I organize UI components in a Next.js and Tailwind CSS project?▼

Organizing UI components in Next.js requires defining specific directories for actions, adapters, types, hooks, and utilities. The Prowler UI conventions guide component placement based on feature usage and scope within the 'ui/' directory.

What's the best way to apply Tailwind CSS styling rules in a React component library?▼

Applying Tailwind CSS styling rules involves following specific guidelines for dynamic styles and library-specific styling. The Prowler UI conventions offer rules to ensure consistency when applying Tailwind CSS within your React components.

Should I use shadcn/ui or legacy HeroUI for new dashboard widgets?▼

Choosing between shadcn/ui and legacy HeroUI depends on specific project guidelines. The Prowler UI conventions help determine which component library to use when creating new dashboard widgets and features.

Where do I place new UI components based on feature scope?▼

Placing new UI components based on feature scope requires adherence to specific code organization rules. The Prowler UI conventions guide where to place component files within the 'ui/' directory to maintain project consistency.

Do I need specific library versions to follow Prowler UI conventions?▼

Following Prowler UI conventions requires adherence to specific library versions and component library usage guidelines. This ensures your Next.js, React, and Tailwind CSS projects maintain the expected development patterns and compatibility.

Why does my Prowler UI component placement not match the expected project structure?▼

Component placement mismatches occur when standard directories for actions, adapters, types, hooks, and utilities are not followed. The Prowler UI conventions enforce specific code organization rules within the 'ui/' directory to prevent structural inconsistencies.

Related Skills

Explore More Software Engineering Skills→
vanhoangkhavanhoangkha

prowler-ui

Enforce Prowler UI development conventions for Next.js, React, and Tailwind CSS projects.

Community
Intermediate
z4nr34lz4nr34l

next-upgrade

Automate Next.js upgrades with codemods and validate builds.

Community
Advanced
adbertramadbertram

prowler-ui

Enforce Prowler UI component structure and styling with shadcn/ui and Tailwind.

Community
Intermediate
professor-moodyprofessor-moody
1

prowler-ui

Enforce Prowler UI conventions for Next.js, React, and Tailwind CSS projects.

Community
Intermediate