Best Frontend Skills: Design, React, Next.js and Mobile

The frontend agent skills worth installing in September 2026 fall into three jobs: design skills (frontend-design, ui-ux-pro-max, design-taste-frontend, impeccable) that fix the direction before UI code exists, stack skills (vercel-react-best-practices, the Next.js skills in vercel/next.js, Expo, Remotion) that keep code current, and web-design-guidelines, which reviews the finished UI. One skill per job is enough.

Your agent built the pricing page in four minutes: a purple gradient hero, three identical cards, Inter everywhere, and a signup form with no autocomplete attributes and no visible focus state. The next page looks the same, because nothing told the agent what your product looks like or what “done” means for a UI. This page is for frontend developers who want the agent to produce UI they can ship, and for tech leads who need that result checked by gates rather than by someone squinting at every diff.

What you get from this guide to frontend skills

• A short list of frontend skills by job, with a dated popularity line and the right repository for each one
• Install commands for Claude Code, Codex and Cursor, including the plugin routes
• A worked example: a landing page built with ui-ux-pro-max, then reviewed with web-design-guidelines
• A four-stage loop (design system, build, accessibility and performance review, Chrome DevTools trace) with the gate that closes each stage
• The install traps that make a skill silently do nothing, and how to recover

Which frontend skills are worth installing in 2026?

Popularity, as of 2026-09-26. “sk” is all-time skills.sh installs from the third-party LinklyAI/best-skills scrape dated 2026-09-26 (secondary; re-read the skill’s skills.sh page before you quote a number). “Plugin” is installs on Anthropic’s plugin directory (claude.com/plugins). Stars are GitHub stars. The three metrics are not comparable with each other.

Job	Skill (repository)	What it makes the agent do	Popularity (2026-09-26)
Design direction	frontend-design (anthropics/skills)	Commits to a purpose, audience and aesthetic before writing UI, away from templated defaults	923,303 sk; plugin 1,134,112
Design system	ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill)	Generates palettes, type pairings and UX rules from bundled data before code	371,037 sk; 130.7k stars
Anti-generic taste	design-taste-frontend (Leonxlnx/taste-skill)	Applies layout, type and spacing constraints and a ban list of “AI look” patterns	520,147 sk; 90.2k stars
Design vocabulary and lint	impeccable (pbakaus/impeccable)	24 /impeccable commands plus a detector with 61 deterministic rules	293,766 sk; 71.3k stars
React performance	vercel-react-best-practices (vercel-labs/agent-skills)	70 rules in 8 categories; request waterfalls and bundle size come first	744,240 sk
UI review	web-design-guidelines (vercel-labs/agent-skills)	Reviews UI code against 100+ interface and accessibility rules, reports file:line	667,369 sk
Next.js	Next.js skills (vercel/next.js)	Cache Components and partial prefetching adoption, the next dev loop	repo 142.4k stars (whole project)
Mobile	Expo skills (expo/skills)	Expo Router, native UI, SDK upgrades, EAS builds and updates	2.6k stars
Video	Remotion skills (remotion-dev/skills)	Scaffolds and renders React video compositions	4.7k stars

Two things the table implies. First, the design skills overlap: all four push the agent away from generic UI, so install one of them, not four (see how to choose one design skill). Second, only web-design-guidelines and impeccable check work after it is written. The others shape generation, which is exactly the output you still have to verify.

How do you install the frontend skills in Claude Code, Codex and Cursor?

The skills CLI (npm skills 1.7.0) installs the same SKILL.md folders into every agent; the flags below come from its --help. It matches --skill against the skill’s frontmatter name, not its folder name, and it needs a space, not =, after --skill. Run these in a terminal at the repository root so the skills land at project scope and go into version control.

Claude Code

# Anthropic's plugin directory (if the marketplace is missing: claude plugin marketplace add anthropics/claude-plugins-official)
claude plugin install frontend-design@claude-plugins-official

# Vercel's React and review skills, into .claude/skills
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices web-design-guidelines -a claude-code

# ui-ux-pro-max as a plugin, from its own marketplace
claude plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
claude plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Plugin skills are namespaced: the plugin’s skill runs as /frontend-design:frontend-design, and it also fires on its own when you ask for UI. Claude Code also bundles a /design skill (research preview); try it before you add a third-party one for the same job.

Codex

# The skills CLI writes Codex project skills to .agents/skills
npx skills add anthropics/skills --skill frontend-design -a codex
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices web-design-guidelines -a codex

# ui-ux-pro-max ships its own installer
npx ui-ux-pro-max-cli init --ai codex

Run /skills in a Codex session to confirm that the new skills are listed before you rely on them.

Cursor

# The skills CLI writes Cursor project skills to .agents/skills
npx skills add anthropics/skills --skill frontend-design -a cursor
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices web-design-guidelines -a cursor

# ui-ux-pro-max ships its own installer
npx ui-ux-pro-max-cli init --ai cursor

Cursor-specific skill behaviour was not re-tested for this page; the paths above are the ones the skills CLI 1.7.0 writes.

The other items in the table install the same way in every agent. Add -a claude-code, -a codex or -a cursor to choose the target:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
npx impeccable install            # then run /impeccable init inside the agent
npx skills add vercel/next.js
npx skills add expo/skills --skill '*'
npx skills add remotion-dev/skills

In Claude Code, Expo is also a plugin: claude plugin install expo@claude-plugins-official. In Codex, impeccable installs a project hook that you approve under /hooks after install, and again after any update that changes .codex/hooks.json.

Context cost. A skill costs only its name and description until it fires. After you install a plugin, claude plugin details frontend-design@claude-plugins-official prints its always-on token cost (about 78 tokens for this plugin, measured with Claude Code 2.1.283 on 2026-09-26); check /context in a session as well. MCP servers such as Chrome DevTools add tools to every session. Claude Code and Codex defer the tool schemas with tool search, which is on by default in both (Claude Code 2.1.283, Codex 0.157.1), so the cost is lower than the full schema, but it is not zero; add these servers at project scope only in frontend repositories.

How do you build a landing page with ui-ux-pro-max and review it with web-design-guidelines?

This is the example the rest of the page generalises. The product is a hypothetical developer-tools SaaS with a Next.js App Router front end.

1. Generate and save the design system before any page code. ui-ux-pro-max can persist it to design-system/<project>/MASTER.md, which becomes the file the agent reads on every later page.

   Copy-paste prompt: generate a design system first

   Use the ui-ux-pro-max skill to generate a design system for a developer-tools SaaS
   landing page: technical audience, dark theme, dense information, no stock illustrations.
   Persist it as design-system/devtools/MASTER.md with colour tokens, a type scale,
   spacing scale, component rules and an explicit anti-patterns list.
   Do not write any page code yet. Show me the palette with WCAG contrast ratios for
   every text/background pair and stop for my approval.

2. Review the design system, not the code. Check the contrast ratios, the type scale and the anti-patterns list. This is the one artifact a human approves line by line, because every later page inherits it.

3. Build the page against the approved file.

   Copy-paste prompt: build the page against the design system

   Read design-system/devtools/MASTER.md and build app/(marketing)/page.tsx:
   hero, three-tier pricing with an annual toggle, a logo strip and an email signup form.
   Use only tokens from MASTER.md; no hard-coded colours or font sizes.
   Keep everything a Server Component except the pricing toggle.
   Apply vercel-react-best-practices. When done, run the type check and lint,
   and list every place where you deviated from MASTER.md and why.

4. Review the result with web-design-guidelines. The skill fetches the latest guidelines before each review and reports terse file:line findings.

   Copy-paste prompt: review the UI against the guidelines

   Use the web-design-guidelines skill to review app/(marketing)/ and components/marketing/.
   Report findings as file:line with the rule name, grouped by severity.
   Then fix every accessibility and form finding, re-run the review, and paste the
   before/after finding counts. Do not change the visual design while fixing.

5. Expect findings such as SignupForm.tsx:42 input missing autocomplete="email" or a missing focus style on the pricing toggle. The review is done when the second run reports zero accessibility findings and any remaining design notes are written down as accepted.

What does a frontend loop from design system to performance trace look like?

The example above covers design and review. A shippable frontend change needs two more checks the skills cannot do on their own: an automated accessibility and design gate, and a measurement of the running page. The loop has four stages, and each ends in an artifact you can check without reading the component code.

Stage	Skill or tool	Gate that closes the stage	Who signs off
1. Design system	ui-ux-pro-max or frontend-design (or /impeccable init, which writes PRODUCT.md)	An approved MASTER.md or direction statement with contrast ratios	Designer or tech lead
2. Build	vercel-react-best-practices, the vercel/next.js skills, Expo skills for mobile	Type check, lint and unit tests green; no raw colour values outside the tokens	CI
3. Accessibility and design review	web-design-guidelines, /impeccable audit, npx impeccable detect	Zero open accessibility findings; detector output attached to the pull request	CI plus reviewer of the findings list
4. Runtime trace	Chrome DevTools MCP (performance_start_trace, performance_analyze_insight, lighthouse_audit)	LCP, CLS and the Lighthouse accessibility score within the budget you set	Reviewer of the trace summary

Stage 3 is where a deterministic check replaces eyeballing. impeccable’s detector runs its 61 rules with no model and no API key, so the same input gives the same findings in CI:

npx impeccable detect --json src/            # CI-friendly JSON output
npx impeccable detect http://localhost:3000   # the rendered page, using an installed Chrome

The detector exits 2 when it finds primary findings and 1 when a target cannot be scanned, so a CI step fails on either; exit 0 means a clean scan (impeccable 4.1.0).

Stage 4 needs the Chrome DevTools MCP server (npm chrome-devtools-mcp, 1.10.1 on 2026-09-23; 52.6k GitHub stars on 2026-09-26). By default it sends usage statistics to Google, and its performance tools can send trace URLs to the Chrome UX Report (CrUX) API. The commands below turn both off with --no-usage-statistics and --no-performance-crux:

Claude Code

claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux

Or install the plugin, which adds seven skills such as debug-optimize-lcp and a11y-debugging but pins an older server (1.9.0): claude plugin install chrome-devtools-mcp@claude-plugins-official. The plugin starts the server with its default telemetry and gives you no place to add the opt-out flags, so the flags above cannot be passed. Usage statistics can still be turned off by exporting CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1 before you start Claude Code (they are also off when CI is set). The CrUX lookup has no environment switch, so use the claude mcp add command above if that matters (checked on chrome-devtools-mcp 1.10.1).

Codex

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux

Cursor

Add the server to .cursor/mcp.json:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics", "--no-performance-crux"]
    }
  }
}

Copy-paste prompt: trace the page and fix what hurts LCP

Start the dev server, then use the chrome-devtools MCP server to record a performance
trace of http://localhost:3000/ while emulating a mid-range phone.
Use performance_analyze_insight to name the LCP element and everything that delays it,
then run lighthouse_audit. Fix the top LCP cause only, re-record the trace, and report
LCP, CLS and the Lighthouse accessibility score before and after as a table.

A lab trace on one machine is a smoke test, not a performance budget. Put the numbers in the pull request, and keep the regression check in CI with the approach in performance testing. For keyboard and screen-reader coverage that a static review cannot see, add the Playwright and axe checks from accessibility testing.

Which design skill should you choose?

All four design skills attack the same problem, generic “AI look” UI, from different angles. Installing several gives the agent competing instructions.

Your situation	Choose	Why
New UI, no design system, you want the agent to commit to a direction	frontend-design	Smallest footprint; first-party plugin in Claude Code
Greenfield product that needs tokens and UX rules written down first	ui-ux-pro-max	Produces a persisted design-system file the agent reads on every page; needs Python 3 for its search script
Marketing surfaces: landing pages, portfolios, redesigns	design-taste-frontend	Opinionated ban list and variants; see Taste Skill
A team that wants shared design verbs and a lint-like check	impeccable	/impeccable audit, polish and critique plus the deterministic detector; see Impeccable
An existing design system in Figma or shadcn/ui	none of the above first	Use the Figma MCP server or the shadcn/ui MCP server so the agent reuses your components

web-design-guidelines is not in this table because it reviews rather than designs. It pairs with any of them.

Which stack skills keep React, Next.js and mobile code current?

React. vercel-react-best-practices fires on data fetching and performance work and applies its request-waterfall rules first. The same repository has vercel-composition-patterns (compound components, React 19 API changes) and vercel-react-view-transitions.

Copy-paste prompt: remove request waterfalls from a route

Apply vercel-react-best-practices to app/dashboard/. Find every sequential await that
could run in parallel and every client component that only fetches data.
For each, show the change and the rule it follows. Then run the tests and the build,
and list which components moved from the client to the server.

Next.js. The Next.js skills moved into the framework repository: npx skills add vercel/next.js installs next-cache-components-adoption, next-cache-components-optimizer, next-dev-loop and the partial prefetching skills. The retired vercel-labs/next-skills repository and its next-best-practices and next-upgrade skills are gone; that knowledge now ships as bundled docs and the AGENTS.md or CLAUDE.md that next dev generates in Next.js 16.3 and later. Next.js 16.2 ships the same version-matched docs in node_modules/next/dist/docs/ but does not write the instructions, so add a line to your AGENTS.md that tells the agent to read that directory. On Next.js 16.1 or earlier, run npx @next/codemod@canary agents-md to download version-matched docs to .next-docs/ and index them in AGENTS.md. Working with the running dev server is covered in dev-server MCP servers.

Mobile. expo/skills has 26 skills (24 in the Expo plugin, plus expo-skill-eval and expo-migrate-module), including an expo-overview router, expo-router, expo-native-ui, expo-upgrade and EAS skills such as eas-update and eas-workflows. expo-skill-feedback controls its telemetry. For React Native without Expo, add vercel-react-native-skills from vercel-labs/agent-skills, or Callstack’s react-native-best-practices (callstackincubator/agent-skills), which is a consultancy’s community set, not the vendor’s.

Video. remotion-dev/skills holds 12 skills. /remotion-create Make a promo video for a record store scaffolds a composition, and /remotion-render renders it.

Vue, Angular and Svelte. We checked these collections with npx skills add <repo> --list on skills CLI 1.7.0:

Stack	Install	Skills found
Vue, Nuxt, Vite, Vitest	npx skills add antfu/skills	vue, nuxt, pinia, vite, vitest, unocss, nitro and 4 more (11)
Angular	npx skills add angular/skills	angular-developer, angular-new-app (2)
Svelte	npx skills add sveltejs/ai-tools	svelte-code-writer, svelte-core-bestpractices

For official vendor collections outside the frontend (Stripe, Supabase, Cloudflare and others), see official vendor skills.

Traps that make a frontend skill silently fail

• --skill react-best-practices matches nothing: the CLI matches the frontmatter name, vercel-react-best-practices. The same goes for vercel-composition-patterns and vercel-react-native-skills.
• --skill=web-design-guidelines is ignored without an error; with -y it installs every skill in the repository. Use a space.
• vercel-labs/next-skills, next-best-practices and next-upgrade are retired. Use vercel/next.js.
• Expo’s building-native-ui and upgrading-expo return 404; the current names are expo-native-ui and expo-upgrade.
• analogjs/angular-skills is deprecated in favour of angular/skills: on skills CLI 1.7.0 every one of its skills describes itself as unmaintained.
• vercel/react-best-practices and vercel/agent-skills do not exist. Vercel’s skills live under vercel-labs.
• ui-ux-pro-max-cli and uipro-cli both install a uipro binary. The README names ui-ux-pro-max-cli and calls uipro-cli stale.
• impeccable’s edit hook and its live mode run code outside the agent’s permission prompt. Live mode runs a package.json script in a shell. Read both before you enable them in an unfamiliar checkout.

When frontend skills break, and how do you recover?

The skill never fires. You ask for a page and get the old generic output. Usually the install matched nothing (see the traps above) or the skill went to a directory your agent does not read. Recover: run npx skills list, then check /skills in Codex or the skill list in Claude Code. Reinstall with the frontmatter name and an explicit -a target. For a plugin skill, invoke it by its namespaced name once to confirm it loads.

Two design skills fight. The agent mixes a taste-skill ban list with a ui-ux-pro-max palette and produces neither. Recover: remove all but one design skill (npx skills remove <name>) and put the chosen design system file path in CLAUDE.md or AGENTS.md so every session starts from it.

The skill teaches the wrong framework version. Next.js guidance from an old skill copy contradicts your installed version. Recover: npx skills update for skill copies; for Next.js, prefer the AGENTS.md that next dev generates, because it is matched to your installed version.

The review passes but users still hit problems. web-design-guidelines reads code; it cannot see focus order at runtime, colour contrast over images, or a slow third-party script. Recover: add the Chrome DevTools trace and a Playwright plus axe test for the page, and treat the static review as one gate of three.

The agent “fixes” findings by deleting features. Asked to clear the detector, it removes the animation or the form. Recover: say in the prompt that the visual design and behaviour must not change, require before/after counts, and review the diff summary for removed components rather than every line.

Mobile and web advice collide. A monorepo with a Next.js app and an Expo app gets React Native advice in web files. Recover: install web skills in the web package and mobile skills in the mobile package (project scope per directory), not at the monorepo root.

For vetting a skill’s scripts and hooks before a team rollout, see skill supply-chain security.

Where to go next with frontend skills

Installing and managing skills The skills CLI, plugins, project scope and the update routine.

Browser automation for agents Playwright, Chrome DevTools and agent-browser: which driver for which job.

Accessibility testing Turn the review stage into automated checks in CI.

Frontend recipes Prompts for React, Next.js, Vue and Angular work.

Best backend skills The same selection for APIs, databases and infrastructure.

Top plugins Plugins that bundle skills with MCP servers, with their context cost.