diff --git a/AGENTS.md b/AGENTS.md index c9d63a8c27..763b3f10e5 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -114,6 +114,7 @@ When performing these actions, ALWAYS invoke the corresponding skill FIRST: | Review PR requirements: template, title conventions, changelog gate | `prowler-pr` | | Review changelog format and conventions | `prowler-changelog` | | Reviewing JSON:API compliance | `jsonapi` | +| Reviewing Prowler UI components | `prowler-ui` | | Reviewing compliance framework PRs | `prowler-compliance-review` | | Running makemigrations or pgmakemigrations | `django-migration-psql` | | Syncing compliance framework with upstream catalog | `prowler-compliance` | diff --git a/skills/prowler-ui/SKILL.md b/skills/prowler-ui/SKILL.md index f0f2bae08e..5846dd85d0 100644 --- a/skills/prowler-ui/SKILL.md +++ b/skills/prowler-ui/SKILL.md @@ -10,6 +10,7 @@ metadata: scope: [root, ui] auto_invoke: - "Creating/modifying Prowler UI components" + - "Reviewing Prowler UI components" - "Working on Prowler UI structure (actions/adapters/types/hooks)" allowed-tools: Read, Edit, Write, Glob, Grep, Bash, WebFetch, WebSearch, Task --- @@ -39,6 +40,18 @@ HeroUI 2.8.4 (LEGACY - do not add new components) - **ALWAYS**: Use `shadcn/ui` + Tailwind (`components/shadcn/`) - **NEVER**: Add new HeroUI components (`components/ui/` is legacy only) +## Design System Discipline (REQUIRED) + +Applies to ALL UI work. The design system is the single source of truth — reuse it exactly, extend it deliberately. + +- **Reuse first, never reinvent.** Before building anything, search `components/shadcn/` and existing usages in the codebase for an equivalent. Do NOT create a custom component, modal wrapper, or primitive when one already exists. +- **Use exactly the defined variants/styles — no more, no less.** At the call site, drive appearance through the component's `variant`/`size`/`tone` props. Never add ad-hoc visual `className` (color, opacity, hover/focus/disabled, spacing-for-looks) to shared controls (`Button`, `SelectTrigger`, `SelectItem`, `Modal`, badges…), and never skip the correct semantic variant. +- **Modals**: only `@/components/shadcn/modal`. **Selects**: `components/shadcn/select`. +- **Colors**: reuse existing semantic tokens from `ui/styles/globals.css`. No raw Tailwind color utilities (e.g. `bg-blue-950/40`), no hex. If no token fits, STOP and ask the design owner — do not invent or near-duplicate tokens. +- **Need a genuinely new variant/token?** That is a design-system change: add it to the shared component API (with design sign-off), then consume it. It is never a call-site decision. + +When reviewing UI PRs, flag: custom modals/primitives that duplicate shadcn, call-site visual `className` on shared controls, raw color utilities, and new variants/tokens introduced without going through the shared component API. + ## DECISION TREES ### Component Placement diff --git a/ui/AGENTS.md b/ui/AGENTS.md index 7c06cc56b1..898d70dde4 100644 --- a/ui/AGENTS.md +++ b/ui/AGENTS.md @@ -40,6 +40,7 @@ When performing these actions, ALWAYS invoke the corresponding skill FIRST: | Renaming or removing a data-tour-id attribute value | `prowler-tour` | | Restructuring routes or layouts covered by a tour | `prowler-tour` | | Review changelog format and conventions | `prowler-changelog` | +| Reviewing Prowler UI components | `prowler-ui` | | Testing hooks or utilities | `vitest` | | Update CHANGELOG.md in any component | `prowler-changelog` | | Using Zustand stores | `zustand-5` |