Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add perniemann/pnCore --skill pn-ui-component-librariesgit clone --depth 1 https://github.com/perniemann/pnCoreWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/perniemann/pncore/pn-ui-component-libraries)<a href="https://agentmods.dev/skills/perniemann/pncore/pn-ui-component-libraries"><img src="https://agentmods.dev/badge/skills/perniemann/pncore/pn-ui-component-libraries/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/perniemann/pncore/pn-ui-component-libraries"><img src="https://agentmods.dev/badge/skills/perniemann/pncore/pn-ui-component-libraries.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00057 | $0.01178 |
| Opus 5 | $0.00028 | $0.00589 |
| Sonnet 5 | $0.00011 | $0.00236 |
| Haiku 4.5 | $0.00006 | $0.00118 |
Grade A, and why
pn-ui-component-libraries scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 84 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI and component libraries
When to use
- Building UI components, forms, layouts, or pages (React, Next.js, Astro).
- Discovery or planning: user asks about component libraries, design systems, or which UI stack to use.
- Prior-art for frontend: inform library recommendations before broad search.
- Adding components from a registry: forms, dialogs, data tables, etc.
shadcn/ui (primary recommendation for React/Next)
Overview: Copy-paste component library built on Radix primitives. You own the code; no runtime dependency. Tailwind CSS. https://ui.shadcn.com
When to use:
- React or Next.js projects
- Need accessible, customizable components without black-box dependencies
- Want full control over styling and behavior
MCP integration: When shadcn MCP is available, use its tools to:
- Browse all components and blocks in the registry
- Search by name or functionality
- Install components via natural language (e.g. "add button, dialog, card")
- Access 134+ community registries (directory) via
npx shadcn add @registry/component
Without MCP: Recommend npx shadcn@latest mcp init --client cursor in the project. For installs, use CLI: npx shadcn@latest add button etc. Ensure project has components.json (run npx shadcn init first if not).
components.json requirement: Browsing works without it. Installs require components.json. If missing, run npx shadcn init in the project root before installs.
Other libraries (when shadcn doesn't fit)
| Library | Stack | Use when |
|---|---|---|
| Radix UI | React | Need headless primitives only; build your own styles |
| Chakra UI | React | Prefer prop-based styling, less Tailwind |
| MUI | React | Enterprise, Material Design, extensive components |
| Base UI | React | Headless, unstyled, flexible theming |
| Headless UI | React | Tailwind Labs; minimal, accessible |
| Aceternity UI | React | Animated, distinctive components; good for marketing |
| Magic UI | React | Motion-heavy, shadcn-compatible blocks |
| shadcn-vue | Vue | Vue port of shadcn pattern |
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago First seen · 84 lines · 57 tokens per session scan A 1e5d75a7046e
pn-ui-component-libraries is a skill published in the GitHub repository perniemann/pnCore (0 stars, last pushed 2d ago), licensed MIT. It adds 57 tokens to every session and 1,178 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
decocms-ui
Build or style React UI with the decocms product design system (@decocms/ui). Use when creating interfaces, pages, or components in a project that should look like decocms products, when the user mentions "design system", "@decocms/ui", "decocms style", or asks to make UI consistent with Studio. Covers installation…
magic-ui
Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (@magicui/), integration patterns, and practical quality checks for accessibility and maintainability.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
21st-ui
Find, install, and generate UI with 21st.dev. Use when the user asks for a UI component (pricing table, hero, navbar, dashboard, form, etc.), wants design inspiration, needs a brand logo as an SVG component, or wants to generate new UI from a prompt.
openkb-html-critic
Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every…
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.