Product UI
UI/UX skills for coding agents and Grok Bot
Broader interface jobs: design systems, component choices, and the UX pass that sits above a single React file. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.
Last reviewed 2026-10-24 · Methodology · How to choose · How to install
| Skill | When to use it | Platform | Updated | Safety |
|---|---|---|---|---|
| UI/UX Pro Max nextlevelbuilder/ui-ux-pro-max-skill | When you want a full UI/UX brief (hierarchy, copy in the interface, layout patterns) rather than a single component set. | Claude Code | 2026-08-13 | pass |
| shadcn shadcn-ui/ui | When the stack is already shadcn/ui and the agent should use the CLI instead of inventing parallel components. | Any agent | 2026-10-14 | pass |
| Emil Design Engineering emilkowalski/skills | When the work is design-engineering: interaction polish, not a new visual identity. | Any agent | 2026-11-02 | pass |
| Web Design Guidelines vercel-labs/agent-skills | When you need interface guidelines that apply even if you are not on shadcn. | Any agent | 2026-01-16 | pass |
Safety is a text search on the file, not an audit. Pass / Review / Risk are explained in the evaluation guide.
-
01
UI/UX Pro Max
The broad UX brief: hierarchy, empty states, copy in the interface. Use it when the agent must invent structure, not when it only needs a component CLI. Pair with shadcn only if that kit is already the stack.
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/HEAD/.claude/skills/ui-ux-pro-max -
02
shadcn
The official shadcn playbook. The agent should run the CLI and respect components.json instead of inventing buttons. Do not install it to choose a library — that is pick-ui-library.
npx skills add https://github.com/shadcn-ui/ui/tree/HEAD/skills/shadcn -
03
Emil Design Engineering
Interaction and motion craft on a product UI, not a new visual identity. Use it when the layout exists and the gap is polish. It is not a substitute for ui-ux-pro-max on a blank dashboard.
npx skills add https://github.com/emilkowalski/skills/tree/HEAD/skills/emil-design-eng -
04
Web Design Guidelines
Interface rules that apply even when you are not on shadcn: density, type, layout. Use it as a product-UI checklist. It will not give the agent a taste direction or a component kit.
npx skills add https://github.com/vercel-labs/agent-skills/tree/HEAD/skills/web-design-guidelines
FAQ
Do I need both ui-ux-pro-max and shadcn?
Only if the agent must both invent UX structure and then implement with shadcn. ui-ux-pro-max is the broader UX brief; shadcn is the component CLI playbook.
Does this replace a designer?
No. It constrains the agent’s defaults. Read the SKILL.md before you treat the output as a design system.
How do updates work?
Re-run the install command or pull the folder. We refresh snapshots from GitHub on a regular schedule; the last-change date on the listing is the signal.
Can I use this with Grok Bot?
Yes. Paste the SKILL.md into Grok Bot or attach the file, then ask for the same job this page describes. MeloSkill is not affiliated with xAI. Grok Bot instructions: Grok Bot playbooks.
Related tasks
- Dashboard
This page is a short list of agent skills for admin dashboards — filters, hierarchy, empty states, and chart layout instead of a flat table plus one purple chart. Compare the entries below, install one from GitHub or paste its SKILL.md, then ask your agent to build or refine the dashboard. Reach for structure-first skills before a component kit like shadcn when that stack is yours.
- Frontend design
This page is a short list of agent skills for designing a new UI — type, color, layout, and motion without default template chrome. Compare the four files below, pick one default, install it from GitHub or paste its SKILL.md, then ask the agent to design a real page with a concrete subject. frontend-design fits a blank UI; web-design-guidelines fits product screens; taste-skill when the brief is “look designed”; impeccable for a craft pass on work that already exists. Install steps: how to install.
- shadcn
shadcn/ui skill for Claude Code and Cursor: compare the official CLI playbook with the kit-choice file and the composition follow-up before you install. Default to shadcn when the repo is already on the kit; use pick-ui-library when no kit is chosen yet. Install steps: how to install. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.