Skip to content
MeloSkill

Product UI

UI/UX skills for coding agents

Broader interface jobs: design systems, component choices, and the UX pass that sits above a single React file.

Last reviewed 2026-09-10 · 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-07-23 pass
Emil Design Engineering
emilkowalski/skills
When the work is design-engineering: interaction polish, not a new visual identity. Any agent 2026-07-21 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.

  1. 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

  2. 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

  3. 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

  4. 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.

Related tasks