skills.rest
vanhoangkha
vanhoangkhaCOMMUNITY
Explore all skills by this author →
Website𝕏@WorkKhavanGitHub

prowler-ui

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

Updated Feb 18, 2026
Search Tags:#ui#react#shadcn/ui#conventions#nextjs#tailwind
One-click install
npx skills add https://github.com/vanhoangkha/cloud-security-audit --skill prowler-ui-vanhoangkha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prowler-ui
Source: https://github.com/vanhoangkha/cloud-security-audit/tree/main/multi-cloud/prowler/skills/prowler-ui
Command: npx skills add https://github.com/vanhoangkha/cloud-security-audit --skill prowler-ui-vanhoangkha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enforces specific UI development conventions within the Prowler project, ensuring consistency and maintainability across the user interface.

Core Features & Use Cases

  • Component Library Enforcement: Guides developers to use shadcn/ui and avoid legacy HeroUI components.
  • Code Structure Guidance: Provides clear decision trees for component placement, code location, and styling.
  • Use Case: When building a new dashboard widget, this Skill ensures the developer correctly places shared hooks, uses shadcn/ui for components, and applies styling via Tailwind CSS or the cn() utility as per project standards.

Quick Start

Follow the decision trees in the Prowler UI skill to correctly place new components and apply styling.

Frequently Asked Questions about prowler-ui

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

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

Structuring UI components in Next.js and Tailwind CSS requires following decision trees for component placement, code location, and styling. This ensures shared hooks, types, and utilities are correctly organized within the project ecosystem.

What is the best way to enforce UI development conventions in a React codebase?▼

Enforcing UI development conventions in React involves applying specific patterns for component placement, server actions, and styling. Using a convention guide ensures consistency and maintainability across the interface.

Can I use shadcn/ui with Next.js and Tailwind CSS for dashboard widgets?▼

Yes, you can use shadcn/ui with Next.js and Tailwind CSS for dashboard widgets. Component library enforcement guides developers to use shadcn/ui and avoid legacy HeroUI components to maintain standards.

How do I apply styling conventions using Tailwind CSS and the cn utility?▼

Applying styling conventions using Tailwind CSS and the cn utility requires adhering to specific project standards. This ensures consistent styling across components and proper class merging within the interface.

When should I avoid legacy HeroUI components in a React project?▼

You should avoid legacy HeroUI components in a React project when building new interfaces within the Prowler ecosystem. Component library enforcement mandates using shadcn/ui instead to ensure maintainability and consistency.

Related Skills

Explore More Software Engineering Skills→
professor-moodyprofessor-moody
1

prowler-ui

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

Community
Intermediate
prowler-cloudprowler-cloud
14.6k

prowler-test-ui

Automate Playwright UI test workflows for Prowler UI with page objects and helpers.

Official
Intermediate
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced
brivarobrivaro

prowler-ui

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

Community
Intermediate