🌿Which UI/UX Agent Skills Are Actually Worth Using?

📝 About This Selection Guide

GitHub stars were checked on September 13, 2026 (Asia/Taipei) and will continue to change.

This article covers 30 sources, including individual Skills, repositories, registries, upstream rule sets, installable wrappers, and executable design tools. Star counts come from the parent GitHub repository. A Skill inside a large collection does not have its own stars, so that number measures community reach—not the quality of the individual Skill.

The recommendation order is an editorial assessment based on direct UI/UX relevance, workflow coverage, executable validation, interoperability, maintenance, and licensing clarity. It is not a laboratory benchmark, nor a single score that pretends unlike tools share one objective.

Introduction: AI Can Write React. That Does Not Mean It Can Design.

If you have ever asked AI to build a landing page, you have probably seen the usual result: a purple gradient, three identical rounded cards, one glowing button, and a promise to “redefine your workflow.”

It usually runs. You cannot even call it ugly. Yet it carries that unmistakable AI-template smell.

It feels like a furnished model apartment. The sofa, coffee table, and decorative plant are all present, but you cannot tell who is supposed to live there.

The problem is not that the model cannot write CSS. It does not know your brand personality, information hierarchy, user task, or engineering constraints. Without context, it returns to the safest and most common patterns in its training data—and therefore the patterns most likely to look like everyone else's.

That is where UI/UX Agent Skills help.

They do not install a real designer's brain inside the model. They are closer to handing the AI a design director's brief, a UX researcher's warnings, a design-system contract, a frontend engineer's checklist, and a note saying, “Please do not build another wall of purple cards.”

This guide looks beyond Skills that merely make attractive pages. It covers the complete product workflow:

UX Research
    ↓
Information Architecture
    ↓
Visual Direction
    ↓
Design System
    ↓
Framework Implementation
    ↓
Motion
    ↓
Accessibility / UX Review
    ↓
Screenshot Comparison

What you usually need is not one magical prompt that does everything. You need the right Skill to own the right stage.

How I Define “Practical”: Stars Are Only One Signal

The guide uses six criteria:

I have not assigned deceptively precise percentage weights to those criteria. A brand site prioritizes visual direction; an enterprise product gives more weight to validation, maintenance, and licensing; a screenshot workflow needs executable comparison tools. The order below is therefore a recommendation within a functional situation, not a universal league table.

It also helps to distinguish what each entry actually is:

They can cooperate in one UI workflow without being the same kind of product.

That is why 176,029 stars on anthropics/skills do not make it the automatic winner of every category. Its frontend-design Skill is excellent, but those stars belong to the entire Anthropic Skills repository.

The reverse is also true. hueyexe/frontend-agent-skills has only 10 stars, yet its treatment of UX research, information architecture, forms, and UX writing fills gaps left by many high-star “beautiful frontend” Skills.

Stars are useful for finding leads. They should not make your architecture decisions.

Short on Time? Start with These Situational Picks

The most important lesson is simple: separate creation from review. Asking the same agent to fall in love with its design and then grade it is a lot like marking your own exam.

“First choice” means the first candidate worth evaluating for that situation. It does not mean the option is always safest for licensing, cost, or data governance. Anything marked with a missing LICENSE file, mixed licensing, or separate service terms still needs an individual commercial review.

Assign Ownership Before Choosing Individual Skills

The most common failure in a multi-Skill setup is not merely a small context window. It is unclear ownership.

frontend-design may request bold typography, taste-skill may make a different density decision, and premium-frontend-ui may insist on a preloader and parallax hero. When three design directors stand on the same construction site, the agent usually follows whichever document uses the most words.

Start with five rules:

1. Assign one Decision Owner to each stage. Other Skills may advise or review but not overrule it silently.
2. Separate creation from review. Let the creator finish, then use a fresh context or reviewer.
3. Keep only one copy of an upstream Skill. Do not load both Anthropic and its JetBrains snapshot, or both Vercel's rules and wrapper.
4. Bring framework Skills in later. Establish direction and tokens before shadcn, Vue, or Angular implements them.
5. Write final decisions into DESIGN.md. Do not hold a new vote on the brand color in every conversation.

Visual Design and Anti-Slop: Recommended Order

First Choice: Anthropic frontend-design

The most valuable idea in this official Skill is not “avoid Inter.” It requires the agent to derive visual direction from the product's subject, audience, and purpose. Typography, palette, layout, motion, and copy must serve the brief instead of being drawn from a fixed template deck.

It also identifies current AI defaults: warm cream with a high-contrast serif, acid green on black, newspaper hairlines, identical SaaS cards, and all-caps eyebrow labels. None is inherently wrong. The question is whether the brief actually calls for it.

Role: Design Director. Use it at the start of a new page or major redesign. The frontend-design folder contains its own Apache-2.0 LICENSE.txt, even though the parent Anthropic repository uses per-Skill licensing.

Second Choice: ui-ux-pro-max-skill

This is the broadest design-intelligence library: 79 searchable styles, 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

Where frontend-design behaves like a visual director, this project feels more like a consultant who understands product types, UX patterns, accessibility, and implementation stacks.

Role: Generalist UI/UX Architect. If you can install only one Skill, choose this one.

Third Choice: taste-skill

It controls DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY. That simple model is useful because a government service, financial dashboard, and creative portfolio should not share one universal definition of “good-looking.”

Role: Art Director / Anti-Slop Critic. Best for brand sites, landing pages, portfolios, and redesigns.

Fourth Choice: Microsoft frontend-design-review in Creative Mode

The Skill has both review and creative modes. It can establish purpose, tone, constraints, and differentiation, then connect those choices to a design-system workflow and quality pillars.

Role: Senior Reviewer that can also create. If Anthropic already owns visual direction, save Microsoft for the final review instead of letting both direct the work simultaneously.

Fifth Choice: premium-frontend-ui

This Skill favors Editorial Brutalism, Organic Fluidity, Cyber aesthetics, and Cinematic Pacing. It is good at full-screen heroes, parallax, magnetic controls, custom cursors, and scroll storytelling.

Role: Immersive Marketing Specialist. Use it for campaigns and portfolios, not every admin form. Not every door needs to spin three times before the user can open it.

Sixth Choice: ui-ux-design

It breaks landing pages, dashboards, pricing pages, slides, email, and reports into typography, OKLCH color, asymmetrical layout, charts, preflight, and anti-slop modules. Its MIT license is clear, but it has zero stars and little community validation.

Role: Small modular design workflow. Useful for evaluation and prototypes, with independent output review.

Design Systems, Tokens, and Component Implementation: Recommended Order

First Choice: DESIGN.md

google-labs-code/design.md stores colors, typography, spacing, radii, and component tokens in YAML front matter, then explains their rationale in Markdown. Its CLI can lint and diff documents, validate token references, and run some WCAG contrast checks.

It does not invent an attractive interface for you. It stops one agent from choosing an 8-pixel radius, a second from switching to 24 pixels, and a third from adding glassmorphism. A version-controlled design contract matters when multiple pages, people, and agents are involved.

Second Choice: Official shadcn Skill

People know the shadcn/ui component library but often miss the official skills/shadcn/SKILL.md. It reads components.json and project context, searches registries before creating new components, favors composition over reinvention, and enforces semantic colors, variants, forms, dark mode, and component structure.

It is not a general art director. It is the official implementation guardrail for shadcn/ui. If your project does not use shadcn, do not install it merely because the repository has 123,663 stars.

Third Choice: ux-ui-agent-skills

This is an ambitious kit: DTCG tokens, component specifications, 138 design systems, cross-framework adapters, WCAG 2.2, Nielsen heuristics, UX writing, and validators for contrast, axe, keyboard navigation, focus traps, RTL, and overflow.

The weakness is licensing paperwork. Its README and package.json declare MIT, but the repository lacks a complete LICENSE file, so GitHub reports license: null. The intent is clear; a company should still ask the author to complete the legal file before adoption.

Fourth Choice: frontend-ui-engineering

This Skill from addyosmani/agent-skills carries design systems into production code: component architecture, state management, responsiveness, semantic HTML, performance, keyboard behavior, and WCAG. It asks about loading, error, empty, and dense states instead of delivering only the happy path.

Fifth Choice: antfu-design and the UnoCSS Ecosystem

The antfu-design Skill inside antfu/skills is valuable for UnoCSS, semantic tokens, and the design language of Anthony Fu's tools. It is excellent for Vue/Nuxt/Vite teams, not the first general design-system choice for every stack.

UX, Accessibility, and Design Review: Recommended Order

First Choice: Vercel Web Interface Guidelines

This living set of guidelines covers keyboard access, focus, touch targets, forms, navigation, URL state, animation, typography, content, dark mode, internationalization, hydration, and accessibility. Its job is not to invent a visual style; it reviews completed UI against 100+ rules.

Two repositories appear in this guide:

• vercel-labs/web-interface-guidelines is the upstream rule source.
• vercel-labs/agent-skills → web-design-guidelines is the installable wrapper that fetches the latest upstream rules during review.

They are the source and wrapper for the same capability. Do not run them as if they were two independent reviewers.

Second Choice: Microsoft frontend-design-review

It supports Design Review and Creative Frontend Design modes. Review follows three pillars—Frictionless → Quality Craft → Trustworthy—and examines user tasks, action hierarchy, design-system usage, Figma differences, tokens, accessibility, responsive behavior, and themes. Findings are prioritized as blocking, major, or minor.

Vercel works well as a rule-based audit. Microsoft is closer to a final holistic design review. They combine cleanly in that order.

Third Choice: frontend-ui-engineering

It combines generation with verification and places concrete requirements on component architecture, states, keyboard use, responsiveness, console errors, and axe-core. It belongs beside the implementer rather than only at the final gate.

Fourth Choice: hueyexe/frontend-agent-skills

It has only 10 stars but divides UX into nine disciplines: accessibility, design systems, forms and checkout, information architecture, interaction patterns, visual composition, UX research, usability foundations, and UX writing.

Real UX is often not about shadows. It asks why users cannot find a feature, why forms generate errors, and whether an empty state offers a next step. The direction is strong; the project remains an observation-tier choice that needs independent validation.

Fifth Choice: ux-ui-agent-skills

Its WCAG coverage, Nielsen heuristics, and runnable gates are substantial. It appears later because of incomplete licensing paperwork and because loading the entire kit can consume excessive agent context. Select only the Skills required for the current review.

Motion Design: Recommended Order

First Choice: LottieFiles motion-design-skill

This is the most focused and least redundant Skill in the list. It covers emotional targets, motion personality, timing, easing, choreography, micro-interactions, state feedback, and brand motion. It also translates Disney animation principles into decisions suitable for UI.

It works with CSS, Framer Motion, GSAP, Lottie, Spring, and other systems, while keeping reduced motion and performance inside the workflow.

taste-skill tells you not to animate like a cheap template. LottieFiles goes further and explains how motion can feel natural while still communicating state.

Second Choice: premium-frontend-ui

Use it for scroll storytelling, hero sequences, parallax, and theatrical brand experiences. Its ambition should be constrained by LottieFiles timing and choreography principles.

Third Choice: taste-skill

MOTION_INTENSITY is a useful way to control overall motion density at the design stage, but it is not a full animation specification.

Fourth Choice: Vercel Web Interface Guidelines

It is not a motion creator. It is a motion safety reviewer that checks reduced-motion behavior, interruptibility, compositor-friendly properties, transform origins, and mistakes such as transition: all.

AI Design Environments, Design-to-Code, and Screenshot Workflows

First Choice: nexu-io/open-design

OpenDesign provides the broadest scope in this category. It is not one Skill but a local-first AI design environment that produces web, desktop, and mobile prototypes, dashboards, decks, images, and video, with HTML, PDF, PPTX, and MP4 export.

Its current documentation says it detects 26 local coding-agent CLIs and loads 100+ functional Skills plus 151 design systems. It supports BYOK and OpenAI-compatible endpoints. Your coding agent becomes the design engine, while DESIGN.md acts as the brand contract.

The repository uses Apache-2.0. Bundled third-party Skills and templates retain their own licenses, and the official cloud model service may have separate usage fees.

Second Choice: google-labs-code/stitch-skills

For teams already using Google Stitch, this collection connects design generation, DESIGN.md extraction, HTML download, React/Angular/Vue/React Native conversion, and screenshot validation.

It is the second choice because it depends on the Stitch ecosystem, not because its execution is weak. Its value drops sharply if you do not use Stitch.

Third Choice: wandb/openui

OpenUI turns text or images into live interfaces and converts them to HTML, React, Svelte, or Web Components. It connects to OpenAI, Groq, Gemini, Anthropic, LiteLLM, Ollama, and OpenAI-compatible local models.

Its strengths are openness, self-hosting, and model choice. Its design governance is less integrated than OpenDesign's full workspace.

Fourth Choice: pascalorg/skills

This collection supports a verifiable screenshot workflow:

image-analysis
    ↓
image-to-text
    ↓
web-design
    ↓
image-compare
    ↓
contrast-check

It extracts palettes, performs OCR, produces pixel-level diffs with mismatch percentages, and checks WCAG contrast. The README declares MIT, but the repository has no standard LICENSE file and GitHub reports license: null. Ask the author to complete the license before formal commercial use.

Fifth Choice: pic-2-code

This React and TypeScript frontend calls Gemini or OpenRouter directly from the browser and turns screenshots into HTML with Tailwind, React, Flutter, or React Native output.

Its README calls the project free and open source, but neither the repository nor package.json provides a license. Under default copyright rules, it should not be forked directly into a commercial product.

Framework Implementation Skills: Choose by Stack

Best for shadcn/React: shadcn-ui/ui → shadcn

For a project using shadcn/ui, this is close to mandatory. The official Skill understands source components, registries, semantic tokens, composition, forms, icons, dark mode, and debugging against the current toolchain.

Best for Angular: Official angular/skills

The repository currently provides angular-developer and angular-new-app. The first covers Signals, Signal Forms, dependency injection, routing, SSR, ARIA, animation, styling, testing, and CLI use. It inspects the Angular version first and requires ng build after implementation.

It is the official replacement for analogjs/angular-skills, and its Skill front matter explicitly declares MIT.

Broadest Vue/Nuxt Choice: antfu/skills

This is the best fit for a modern frontend centered on Vue, Nuxt, and Vite. It includes Vue, Nuxt, Pinia, Vite, Vitest, VitePress, UnoCSS, and Anthony Fu's own preferences.

The repository's original Skills and scripts use MIT. Vendored Skills retain their upstream licenses, so the root license cannot be applied blindly to every folder.

Vue Specialty Supplement: vuejs-ai/skills

It focuses on Vue 3, Composition and Options APIs, Vue Router, Pinia, JSX, Vitest, Vue Test Utils, Playwright, SSR hydration, and composables. It is more specialized, but its README still labels the project an early experiment and community project.

Legacy Angular Source: analogjs/angular-skills

It has an MIT license and 591 stars but is explicitly deprecated and no longer actively maintained. Know that it existed, then use the official angular/skills repository for new work.

Skill Registries, Curated Collections, and Discovery: Recommended Order

First Choice: ibelick/ui-skills

This is a registry built specifically for design engineers. Its CLI can search Skills by category and fetch only what you need:

npx ui-skills categories
npx ui-skills list --category motion
npx ui-skills get baseline-ui

It also exposes list_skills and get_skill over MCP. If you want Codex to discover UI Skills dynamically instead of loading an entire library into context, this is a sensible architecture.

Second Choice: JetBrains/skills

This is a JetBrains-filtered and verified snapshot of upstream Skills. Its README currently lists 129 Skills from 15 upstream repositories, with automated skill scanning.

The value is curation and verification, not ownership of every Skill. Each entry retains metadata.source and its upstream license. Anthropic's frontend-design, for example, remains Apache-2.0. Do not install the same Skill from JetBrains and upstream at the same time.

Third Choice: vercel-labs/agent-skills

Vercel's official collection includes React/Next.js performance, composition patterns, and web-design-guidelines. The last item is the installable wrapper around the standalone Web Interface Guidelines.

The README declares MIT, but the root has no standard LICENSE file and GitHub reports license: null. Check the source and license of the specific Skill you install.

Fourth Choice: anthropics/skills

Anthropic's official showcase covers Creative and Design, Development, Enterprise, and Document Skills. Licensing is per Skill: many are Apache-2.0, while some document Skills are source-available rather than open source. Do not describe the entire repository as uniformly Apache or unrestricted for commercial use.

This article recommends frontend-design, whose folder contains a complete Apache-2.0 LICENSE.txt.

Fifth Choice: seb1n/awesome-ai-agent-skills

This is not merely a directory of links. It includes 103 ready-to-use SKILL.md workflows across agent engineering, security, coding, research, documents, and design. Its MIT license is clear. It is useful for cross-domain discovery, though UI/UX is not its only focus.

Sixth Choice: anbeime/skill

With 6,611 stars, this is a large general Skill store and aggregator—not a UI/UX-specific project. GitHub does not detect a repository license, and the collection draws from many external sources. Use it for discovery rather than importing the entire repository into a commercial product. Return to each upstream source to verify version, content, and license.

30 Sources, Skills, and Tools: Adoption-Tier Reference

The 30 entries below represent different kinds of sources. S, A, and B describe adoption priority; Discovery and C explain which entries are better used for research, comparison, or avoidance. None of these tiers is a raw star ranking.

S Tier: Strong Enough to Anchor the Main Workflow

A Tier: Powerful, Add When the Project Needs It

B Tier: Clear Use Case, Install Selectively or Evaluate First

Discovery and Mirrors: Find Skills Here; Do Not Install Every Duplicate

C Tier / Excluded: Duplicated, Deprecated, or Legally Incomplete

This separation keeps core Skills, specialist tools, registries, low-star remixes, deprecated projects, and unlicensed repositories in the right places. Inclusion is not endorsement, and availability on GitHub is not a reason to install something.

Seven Combination Workflows You Can Apply

Applied to real projects, the ownership rules above become the following seven workflows. The arrows indicate handoff order; they do not mean every Skill should remain loaded in the same context window.

Combination 1: A New General Product or SaaS

Anthropic frontend-design (subject and visual direction)
    ↓
ui-ux-pro-max (UX, palette, type, and layout rules)
    ↓
DESIGN.md (freeze tokens and rationale)
    ↓
frontend-ui-engineering (production implementation)
    ↓
Vercel Web Interface Guidelines (rule-based audit)
    ↓
Microsoft frontend-design-review (final holistic review)

Do not include taste-skill by default. If the first visual result remains too generic, let it perform one anti-slop critique and then leave the pipeline.

Combination 2: A shadcn/React Project

frontend-design
    ↓
DESIGN.md
    ↓
shadcn Skill (registry, components, semantic tokens, forms)
    ↓
frontend-ui-engineering
    ↓
web-design-guidelines

Do not let frontend-design invent a Button API only to make shadcn replace it later. The visual Skill owns appearance and hierarchy; the shadcn Skill owns component composition.

Combination 3: Vue/Nuxt

ui-ux-pro-max or frontend-design (choose one creator)
    ↓
DESIGN.md
    ↓
antfu/skills (Nuxt, Vite, UnoCSS, Pinia)
    +
vuejs-ai/skills (load only the Vue specialty needed now)
    ↓
web-design-guidelines

antfu/skills and vuejs-ai/skills overlap. Do not keep both complete collections resident. Load the Router, Pinia, or SSR hydration specialty when the task reaches it.

Combination 4: Angular

frontend-design
    ↓
DESIGN.md
    ↓
angular/skills → angular-developer
    ↓
ng build
    ↓
web-design-guidelines + frontend-design-review

Remove analogjs/angular-skills from this pipeline. The official Skill inspects the Angular version first, which matters for Signals, Signal Forms, and changing APIs.

Combination 5: Screenshot Reconstruction and Visual Regression

pascalorg/image-analysis + image-to-text (decompose screenshot)
    ↓
frontend-design or ui-ux-pro-max (decide what to preserve and improve)
    ↓
DESIGN.md (extract tokens)
    ↓
Framework Skill (implementation)
    ↓
pascalorg/image-compare (pixel diff)
    ↓
contrast-check + web-design-guidelines (accessibility)

Pixel-perfect is not the same as UX-correct. If the reference already has poor contrast, frustrating interactions, or licensing problems, a precise reconstruction only reproduces the mistake accurately.

Combination 6: A Motion-Heavy Brand Site

taste-skill or premium-frontend-ui (motion personality)
    ↓
LottieFiles motion-design-skill (timing, easing, choreography)
    ↓
Framework Implementation
    ↓
Web Interface Guidelines (reduced motion, performance, input safety)

premium-frontend-ui provides ambition, LottieFiles makes the motion coherent, and Vercel keeps that ambition from hurting users.

Combination 7: OpenDesign or Stitch as the Main Workspace

When OpenDesign is your workspace, let it own orchestration, previews, and exports. Add an external Skill only when its built-in set lacks a specific discipline. Do not load every registry beside OpenDesign's own 100+ functional Skills.

When Stitch is your workspace, let stitch-skills own the design-to-code flow. Keep one visual director, one framework Skill, and one reviewer outside it.

Before Installation: What Should You Check Beyond the License?

A Skill is an operating document for an agent. Some also bring CLIs, scripts, MCP servers, or external downloads. A clear license grants part of the necessary legal permission; it does not prove that execution boundaries, supply-chain risk, or data flows are acceptable.

Before introducing one into a company or client project, I check six things:

The safer adoption path is to read the instructions, restrict permissions, pin a version, and run one reproducible task in an isolated test project. Observe what the Skill reads, changes, and calls. Stars and a polished README cannot replace that check.

Commercial Licensing: GitHub May Let You Clone It. Legal May Not Approve It.

MIT

MIT permits use, modification, merging, publication, distribution, sublicensing, and selling copies. The main obligation is to retain the copyright and license notice, and the software is provided without warranty. Read the Open Source Initiative's MIT License.

Apache-2.0

Apache-2.0 also permits commercial use, modification, and distribution, with an explicit patent grant from contributors. Redistribution requires the license and applicable notices; modified files must be identified, and an upstream NOTICE must be handled according to the terms. It does not grant trademark rights. Read the Apache Software Foundation's Apache License 2.0.

The README Says MIT, but There Is No LICENSE File

ux-ui-agent-skills, pascalorg/skills, and vercel-labs/agent-skills each have some version of this problem. The author's intention is visible, but incomplete license text, copyright notices, or standard files add uncertainty for corporate compliance and redistribution. Ask the author to complete the file or let legal counsel review it before formal adoption.

No License

Without a license, default copyright applies. Other people generally do not receive permission to reproduce, distribute, or create derivative works. GitHub explains this in Licensing a repository.

That is why pic-2-code cannot be treated as commercially reusable merely because its README says free and open source. Aggregators such as anbeime/skill also require you to inspect every upstream source.

A Free Repository Does Not Make the Entire Workflow Free

Conclusion: The Strongest Setup Is Not One Skill. It Is a Pipeline with Clear Ownership.

After reviewing 30 projects, my conclusion is not “install more.”

A good UI agent workflow knows who proposes direction, who records it as tokens, who owns framework implementation, who specifies motion, and who searches for defects at the end.

The shortest useful version looks like this:

Use frontend-design to establish the visual subject, ui-ux-pro-max to fill UX gaps, DESIGN.md to preserve the agreement, the correct framework Skill to implement it, and Vercel Guidelines plus Microsoft Review to find what went wrong.

Add LottieFiles only when the product needs motion. Add Pascal only for screenshot work. Evaluate OpenDesign or Stitch only when you need a complete design workspace. A registry helps you find tools; it does not need to be moved wholesale into the context window.

AI can produce a website in minutes. Engineering is not making it produce more. Engineering means every decision has provenance, every output has validation, and every file entering a company has a clear license.

Stars help you find the crowded places. Functional categories tell you which tool to pick. Clear ownership keeps twenty AI design directors from scheduling a meeting about the same button.

• First published: 2026-09-13

This is a growing article. GitHub stars, features, maintenance status, and licensing may change over time. Subscribe for future updates.

This article is based on each project's GitHub repository, README, SKILL, LICENSE, and package metadata at the time of review. It is not legal advice. Before commercial distribution, verify the exact version's LICENSE, NOTICE, third-party dependencies, and your organization's legal requirements.