primeng-developer
starsforks
How to install primeng-developer?
mofirojean/angular-ui-skills/primeng-developer
$npx -y skills add mofirojean/angular-ui-skills --skill primeng-developerGenerates PrimeNG code and guidance for Angular projects using primeng with @primeuix/themes and @primeuix/styles. Covers installation, design-token theming (Aura / Lara / Nora / Material presets), Styled vs Unstyled modes, the PassThrough (pt) customization API, componen
SKILL.md
| 1 | # PrimeNG Developer Guidelines |
| 2 | |
| 3 | > **Pairs with `angular-developer`** - that skill provides Angular fundamentals (signals, DI, routing, forms, SSR, accessibility). This skill focuses on PrimeNG specifics. Install both for the best experience. |
| 4 | |
| 5 | ## Compatibility |
| 6 | |
| 7 | - **Tracks:** PrimeNG `21.1.9` (released 2026-06-04), with `@primeuix/themes` and `@primeuix/styles` both `2.x` (currently `2.0.3`). PrimeNG follows Angular's major, so v21 pairs with Angular v21. |
| 8 | - **Works for:** PrimeNG v18 → v21 projects. The skill references include [`migration.md`](references/migration.md) covering the v18 component renames (Calendar→DatePicker, Dropdown→Select, etc.), so v18-v20 projects can use this skill but expect drift on theming and a few component APIs. v21 is the closest match. |
| 9 | - **v22 status:** PrimeNG `22.0.0-rc.1` is on the `next` channel (Angular v22 shipped stable 2026-06-03). No stable v22 release yet, expect one after upstream PrimeNG catches up with Angular v22's Signal Forms and Aria primitives. |
| 10 | - **Angular:** v18 or newer required. PrimeNG components are standalone since v18. The skill assumes standalone components, control flow (`@if` / `@for`), and signal-based APIs. |
| 11 | - **Tailwind:** v3 or v4 with `tailwindcss-primeui` plugin (optional, for unstyled mode). |
| 12 | - **Not supported:** PrimeNG v17 and below (different theming model based on `prime.css`), Angular v17 or below (NgModule patterns). |
| 13 | |
| 14 | If the project's PrimeNG version is below v18, point the user to PrimeNG's v17 docs and decline to generate v18+ patterns into a v17 project, they will not compile. |
| 15 | |
| 16 | |
| 17 | 1. Always check the project's PrimeNG version before providing guidance. PrimeNG v18 introduced major component **renames** (Calendar→DatePicker, Dropdown→Select, InputSwitch→ToggleSwitch, OverlayPanel→Popover, Sidebar→Drawer) and a new design-token theming system. `package.json` is the source of truth, when in doubt, look there before recommending an API. See [migration.md](references/migration.md). |
| 18 | |
| 19 | 2. Detect which **theming mode** the project uses before adding components: |
| 20 | - If `@primeuix/themes` is imported and `providePrimeNG({ theme: ... })` is configured → **Styled mode** (default). |
| 21 | - If `unstyled: true` is set in `providePrimeNG`, or the project uses `tailwindcss-primeui` → **Unstyled mode**. |
| 22 | - The two modes have fundamentally different customization paths. See [styled-vs-unstyled.md](references/styled-vs-unstyled.md). |
| 23 | |
| 24 | 3. Components are **standalone since v18**. Always import the standalone class (e.g. `Button` from `'primeng/button'`), not the legacy `*Module`. Legacy modules still export for backwards compatibility but should not be added to new code. |
| 25 | |
| 26 | 4. After generating PrimeNG code, run `ng build` to catch compile errors. The most common AI mistakes are: (a) importing from `@primeng/themes` instead of `@primeuix/themes` (deprecated path); (b) forgetting `provideAnimationsAsync()` on v18 to v20 projects (PrimeNG v21+ uses native CSS animations and no longer requires it); (c) using v17 component names (`Calendar`, `Dropdown`, `OverlayPanel`, `Sidebar`, `InputSwitch`) after the v18 renames; (d) writing `styleClass="…"` on components, deprecated since v20, use native `class="…"` (or `[class]` / `[ngClass]`) instead; (e) writing `pTemplate="item"` inside a component imported standalone, the `PrimeTemplate` directive is NOT in scope unless you import `SharedModule` (or a `*Module` like `TableModule` that re-exports it), so the template silently never registers and the component renders empty rows with **no build error and no console error**. Use a template reference instead (`<ng-template #item>`, `#content`, `#header`, …), every v21 component content-queries those refs directly. See [setup.md](references/setup.md) and [migration.md](references/migration.md). |
| 27 | |
| 28 | ## PrimeNG architecture: Styled, Unstyled, PassThrough |
| 29 | |
| 30 | PrimeNG ships compiled in `node_modules`, there is no source-copy CLI. Customization happens through three escalating mechanisms: |
| 31 | |
| 32 | - **Design tokens** (Styled mode), override theme variables at the preset level via `definePreset(Aura, {...})`. Best for most theming needs. See [theming.md](references/theming.md). |
| 33 | - **PassThr |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
