JSN UI Agent Skill

---
name: jsn-ui-ai-agent
description: Build UIs with JSN UI — the React UI kit for AI products and Next.js.
version: 0.3.0
---

# JSN UI — AI Agent Skill

You are an expert at building UIs with **JSN UI**, a premium React
component kit for Next.js. The kit includes shadcn-grade primitives,
AI/Agent components, motion elements, charts, themes, an MCP server,
and a CLI.

## When to use

The user wants to build an AI product, chat UI, agent dashboard,
landing page, dashboard, or admin tool. They are on Next.js / React.

## How to start

```bash
npx jsn-ui init my-app
cd my-app
npx jsn-ui add button card dialog message conversation prompt-input
npx jsn-ui list                # see all 76 entries
npx jsn-ui info <name>         # details for one
npx jsn-ui mcp                 # start the MCP server (icon search)
```

For example requests:

- "Build me a chat UI" → add message, conversation, prompt-input
- "Build me a landing page" → add button, badge, card, then compose
- "Build me a dashboard" → add bar, donut, sparkline + Card grid
- "Build me a pricing page" → compose Pricing block from primitives
- "Add motion" → add fade-in, scroll-reveal, count-up
- "Add animations" → same as above + check `.skills/jsn-ui-animation.md`
- "Make it accessible" → check `.skills/jsn-ui-a11y.md`
- "Add SEO" → check `.skills/jsn-ui-seo.md`
- "Make it work on mobile" → check `.skills/jsn-ui-mobile.md`

## Reference skills

| File | What |
|---|---|
| `.skills/jsn-ui-overview.md` | When to use, file map, key facts |
| `.skills/jsn-ui-cli.md` | All CLI commands and env vars |
| `.skills/jsn-ui-theming.md` | OKLCH tokens, presets, custom themes |
| `.skills/jsn-ui-icons.md` | 80+ icons, usage, adding new ones |
| `.skills/jsn-ui-animation.md` | 10 motion elements, patterns |
| `.skills/jsn-ui-a11y.md` | Accessibility checklist |
| `.skills/jsn-ui-ai.md` | AI components, Vercel AI SDK wiring |
| `.skills/jsn-ui-seo.md` | Metadata factory + 17 JSON-LD components |
| `.skills/jsn-ui-mobile.md` | Mobile-first components and patterns |
| `.skills/jsn-ui-template.md` | Templates and sections |
| `.skills/jsn-ui-performance.md` | Performance budget and patterns |

## Critical rules

1. **Always use `cn()` for class merging**, never `clsx` directly.
2. **Use `forwardRef` + `displayName`** on any new component.
3. **Use `cva` for variants**, not hand-rolled class switches.
4. **All buttons get a label** — even icon-only ones via `aria-label`.
5. **All form fields get a label** — visible or `sr-only`.
6. **Never animate layout properties** — only `transform` and `opacity`.
7. **Respect `prefers-reduced-motion`** — every motion element does this for you.
8. **Use `createMetadata()` for SEO**, don't hand-roll `<meta>` tags.
9. **Inject the right JSON-LD** for the page type (Product, Article, FAQ, etc.).
10. **Mobile first** — design for 375px first, scale up.