Skip to content
Skip to content
Guides / Agent skills9 min read

How to Make Your Agent Better at UI

A skills.sh shortlist for visual direction, React performance, interface audits, and a final craft pass, with a download link for each skill.

Repath Khan
Critique

Critique

GUIDES / AGENT SKILLS

Better at UI

Direction, performance, audit, polish.

critique.sh

Agent harness · BYOA · Composer 2.5

Direct answer

Install `frontend-design` before the agent writes markup. Add `vercel-react-best-practices` so the page is not a waterfall. Review with `web-design-guidelines`. Use `design-taste-frontend` for landing pages, `ui-ux-pro-max` when you need a pattern lookup, and `impeccable` only as a last pass. Download pages live on skills.sh.

Ask an agent to “make it look better” and you get Inter, a purple gradient, and three identical feature cards. The model is not missing CSS. It is missing a decision about what the page is for.

UI skills work when they split that decision into jobs: pick a direction, implement it, check accessibility and interaction, then polish. One mega-prompt that says “award-winning, minimal, bold, playful” produces the average of every Dribbble shot the model remembers.

887.9K
frontend-design installs
714.3K
React best practices
635.2K
web-design-guidelines
480.0K
design-taste-frontend

skills.sh is the public directory for Agent Skills: folders of instructions, and sometimes scripts, that a coding agent can load when the task matches. The package manager is npx skills. The discovery skill is `find-skills` from vercel-labs/skills (3.4M installs).

A skill is not a model upgrade. It is a procedure the agent is supposed to follow: which files to read, which checks to run, which output shape to return, and when to stop. That is why a mediocre prompt plus a good skill often beats a long chat with no procedure.

Prompt-only UI
“Make it pretty”Default font + cardsAnimate everythingShip
Skill-guided UI
Name the audienceCommit to one aestheticBuild the pageAudit a11y + UXPolish
Which UI skill to open
  1. 1
    Is this a new page with no visual point of view?
    frontend-design. It forces an aesthetic before components exist. That is the difference between a designed page and a themed scaffold.
  2. 2
    Is this a Next.js or React app that already looks acceptable but feels slow?
    vercel-react-best-practices. Waterfalls, bundle cost, and serialization are UI bugs. Users experience them as “the page is bad.”
  3. 3
    Do you need to review existing markup?
    web-design-guidelines. It is an audit against Vercel’s interface rules, not a moodboard.
  4. 4
    Is the surface a marketing page or portfolio?
    design-taste-frontend. It is scoped to those pages on purpose. Do not use it as a dashboard system.

frontend-design from Anthropic is the leaderboard heavyweight for a reason: it bans the default look. Vercel’s two skills then cover the engineering half, performance and interface review. The taste-skill and ui-ux-pro-max listings are popular specialist packs. impeccable is the closer.

Skills, jobs, and download links
Install counts are from the skills.sh leaderboard on 15 September 2026. Use the count as a popularity filter, then read the skill before you install it.
The download link opens the skills.sh page. The install command below is the actual package fetch.
SkillUse it forInstallsDownload
frontend-designPick a bold visual direction before writing markup, then implement a cohesive page instead of a template.887.9KDownload on skills.sh
vercel-react-best-practicesApply Vercel’s ranked React/Next.js performance rules: waterfalls, bundles, server fetch, and re-renders.714.3KDownload on skills.sh
web-design-guidelinesAudit UI files against Vercel’s Web Interface Guidelines for accessibility, UX, and interaction details.635.2KDownload on skills.sh
design-taste-frontendGive landing pages and portfolios a specific aesthetic, with anti-slop bans and a production preflight.480.0KDownload on skills.sh
ui-ux-pro-maxLook up stack-specific UI patterns, palettes, type pairings, and UX rules instead of inventing a system from scratch.357.4KDownload on skills.sh
impeccableRun a high-craft final pass after the layout exists: spacing, type, contrast, and the last 10% of polish.277.2KDownload on skills.sh

Open the download page

Each card goes to the skills.sh listing. From there you can copy the install command or inspect the SKILL.md.

Direction
frontend-design
Highest-install design skill on the leaderboard. It exists to stop the default Inter / purple-gradient / three-card layout. Direction first, then code. 887.9K installs. Source: anthropics/skills.
Performance
vercel-react-best-practices
Pretty UI that waterfalls four awaits is still slow. This is the skill for the implementation after taste is chosen. 714.3K installs. Source: vercel-labs/agent-skills.
Audit
web-design-guidelines
Use it as a review pass, not a moodboard. It fetches the current guideline set and reports file:line findings. 635.2K installs. Source: vercel-labs/agent-skills.
Taste
design-taste-frontend
Narrower than frontend-design. It is for customer-facing pages, not dashboards. Read the brief before touching dials. 480.0K installs. Source: leonxlnx/taste-skill.
Library
ui-ux-pro-max
A searchable design brain, not a single aesthetic. Useful when the agent needs a font pairing or a dashboard pattern rather than a manifesto. 357.4K installs. Source: nextlevelbuilder/ui-ux-pro-max-skill.
Polish
impeccable
Direction skills choose the look. This one inspects the result. Do not start here or you will polish a generic page. 277.2K installs. Source: pbakaus/impeccable.
Install from skills.sh
find-skills first, then the domain pack. The agent reads SKILL.md after the files land.

discover

npx skills add https://github.com/vercel-labs/skills --skill find-skills
npx skills find frontend design

Browse the leaderboard, then search by job rather than by brand.

frontend-design

npx skills add https://github.com/anthropics/skills --skill frontend-design

https://skills.sh/anthropics/skills/frontend-design

vercel-react-best-practices

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices

https://skills.sh/vercel-labs/agent-skills/vercel-react-best-practices

web-design-guidelines

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

https://skills.sh/vercel-labs/agent-skills/web-design-guidelines

design-taste-frontend

npx skills add https://github.com/leonxlnx/taste-skill --skill design-taste-frontend

https://skills.sh/leonxlnx/taste-skill/design-taste-frontend

ui-ux-pro-max

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

https://skills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max

impeccable

npx skills add https://github.com/pbakaus/impeccable --skill impeccable

https://skills.sh/pbakaus/impeccable/impeccable

`vercel-composition-patterns` (337.0K installs) is the skill to open when the problem is a React component’s public API, not the palette. `redesign-existing-projects` (350.3K) is the taste-skill sibling for an existing product, when you must preserve brand assets instead of inventing a new identity.

A UI skill can still ship an inaccessible, slow, or off-brand page. Run the interface audit and the performance skill on the result, not only on the first mock.

If Claude Code, Codex, Cursor, or OpenCode is already the author, keep it. Install the skills above, then run an independent finish pass with the critique sidecar when a unit of work is ready. If you want Critique to be the author, use CritiqueCode: it implements, then the controller forces review and verified repair before promotion. Those are different binaries. Do not mix the jobs.

Design it, then verify the change.
UI skills belong in the author loop. CritiqueCode is the author agent that still has to pass independent review before the work counts as finished.
Primary sources
skills.sh directory
Open agent skills leaderboard. Counts in this series were read on 15 September 2026.
find-skills
Vercel’s discovery skill. 3.4M installs. Use it when you do not already know the package name.
frontend-design (anthropics/skills)
Pick a bold visual direction before writing markup, then implement a cohesive page instead of a template. 887.9K installs. npx skills add https://github.com/anthropics/skills --skill frontend-design
vercel-react-best-practices (vercel-labs/agent-skills)
Apply Vercel’s ranked React/Next.js performance rules: waterfalls, bundles, server fetch, and re-renders. 714.3K installs. npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
web-design-guidelines (vercel-labs/agent-skills)
Audit UI files against Vercel’s Web Interface Guidelines for accessibility, UX, and interaction details. 635.2K installs. npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
design-taste-frontend (leonxlnx/taste-skill)
Give landing pages and portfolios a specific aesthetic, with anti-slop bans and a production preflight. 480.0K installs. npx skills add https://github.com/leonxlnx/taste-skill --skill design-taste-frontend
ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill)
Look up stack-specific UI patterns, palettes, type pairings, and UX rules instead of inventing a system from scratch. 357.4K installs. npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
impeccable (pbakaus/impeccable)
Run a high-craft final pass after the layout exists: spacing, type, contrast, and the last 10% of polish. 277.2K installs. npx skills add https://github.com/pbakaus/impeccable --skill impeccable
CritiqueCode reference
Author agent that implements, then is forced through independent review and verified repair.
Critique CLI reference
Sidecar for an agent you already use. It reviews the working tree; it does not replace the author.
vercel-composition-patterns
337.0K installs. Use when the problem is a React component API rather than visual direction.
redesign-existing-projects
350.3K installs. Taste-skill sibling for redesigns that must keep existing brand material.
Independent reviewVerified repairReal repositoriesBuilt for developersLoved by agents