skills.rest
professor-moody
professor-moodyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

prowler-ui

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

1|Updated Aug 16, 2025
Search Tags:#ui#react#shadcn/ui#conventions#nextjs#tailwind#prowler
One-click install
npx skills add https://github.com/professor-moody/cloud-tools --skill prowler-ui-professor-moody
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prowler-ui
Source: https://github.com/professor-moody/cloud-tools/tree/main/repos/prowler/skills/prowler-ui
Command: npx skills add https://github.com/professor-moody/cloud-tools --skill prowler-ui-professor-moody

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides specific guidance and enforces conventions for developing the Prowler UI, ensuring consistency and maintainability across the project.

Core Features & Use Cases

  • Component Library Enforcement: Guides the use of shadcn/ui over legacy HeroUI.
  • Code Structure Standardization: Defines clear rules for component placement, actions, types, and utilities.
  • Styling Guidelines: Dictates how to apply Tailwind CSS and handle dynamic styling.
  • Use Case: When creating a new dashboard widget, this Skill ensures you use the correct shadcn/ui components, place the code in the appropriate components/ or features/ directory, and apply styles using Tailwind classes or the cn() utility.

Quick Start

Use the prowler-ui skill to create a new button component using shadcn/ui.

Frequently Asked Questions about prowler-ui

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

FAQPage Schema
How do I enforce UI conventions for Next.js and Tailwind CSS projects?▼

To enforce UI conventions for Next.js and Tailwind CSS, follow specific patterns for component placement, styling decisions, and project organization. Use shadcn/ui components and standardize code structure within the ui/ directory to ensure maintainability.

What is the best way to structure components in a React project using shadcn/ui?▼

The best way to structure React components using shadcn/ui involves placing code in appropriate components/ or features/ directories. Define clear rules for component placement, actions, types, and utilities to maintain project consistency.

How do I apply dynamic styling in Tailwind CSS for dashboard widgets?▼

To apply dynamic styling in Tailwind CSS for dashboard widgets, apply Tailwind classes directly or use the cn() utility. This ensures styling guidelines are met and prevents legacy component library usage.

Does the Prowler UI support HeroUI components?▼

The Prowler UI does not support HeroUI components. It enforces the use of shadcn/ui as the primary component library to guide styling decisions and ensure code standardization across the project.

How do I create a new button component using shadcn/ui?▼

To create a new button component using shadcn/ui, apply the project's code structure standardization rules. Place the component in the correct directory and apply styles using Tailwind classes or the cn() utility.

Related Skills

Explore More Software Engineering Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
JordiNodeJSJordiNodeJS

component-development

Create accessible React 19 UI components with Shadcn UI and Tailwind CSS 4.

Community
Intermediate
School-Agent-IncSchool-Agent-Inc
1

web-builder

Scaffold Next.js/React websites with App Router, TypeScript, and Tailwind CSS.

Official
Intermediate
fgarofalo56fgarofalo56
6

tailwind-ui

Guide Tailwind CSS styling for responsive UI components with utility classes.

Community
Intermediate