Official
Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.
ReactTailwindDesign
Frontend & UI × Cursor
Top Frontend & UI Design Skills for Cursor
For frontend and UI work in Cursor, install Anthropic's frontend-design skill first and pair it with Vercel's web-design-guidelines — frontend-design forces a committed visual direction before any code is written, and the Vercel skill supplies the React and Next.js conventions Cursor's completions otherwise have to guess at. Both are verified working through Cursor's skill layer, and both are read-only, so neither can touch your repo without you asking.
17 of 20 verified on Cursor · updated July 14, 2026
Top 5 on Cursor
- 1.frontend-design—Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.
Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.
- 2.react-email—Build cross-client HTML emails as React components, with a visual editor and Resend-ready rendering.
Build cross-client HTML emails as React components, with a visual editor and Resend-ready rendering.
Drop-in WorkOS widgets with backend token wiring across every major framework.
shadcn/ui context: components, patterns, and the right composition by default.
- 5.web-artifacts-builder—Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.
Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.
Verified
Frontend & UI skills that work on Cursor
Ranked by composite score. Every entry was tested on Cursor — not inferred from the SKILL.md format.
Verified
Build cross-client HTML emails as React components, with a visual editor and Resend-ready rendering.
React EmailTemplatesTransactional
Official
Drop-in WorkOS widgets with backend token wiring across every major framework.
WorkOSWidgetsAuth
Verified
shadcn/ui context: components, patterns, and the right composition by default.
shadcnComponents
Official
Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.
Reactshadcn/uiArtifacts
Official
Pre-handoff a11y audit that catches what design QA misses.
AccessibilityWCAGAudit
Verified
Shopify Storefront API: cart, checkout, metafields, customer accounts, Hydrogen patterns.
ShopifyCommerceHydrogen
Code
Medium4 min
Official
Single seed prompt → cohesive token system. Tokens that look intentional, not generated.
TokensDesign systemTheming
Verified
100+ accessibility and UX rules from Vercel, applied as a structural audit on your UI code.
A11yUXAudit
Verified
57 React/Next.js performance rules, applied as a structural review on your code.
ReactNext.jsPerformance
Verified
Next.js App Router by the book. Server components, streaming, parallel routes.
Next.jsReactApp Router
Official
Senior-designer feedback on demand. Hierarchy, usability, consistency, motion.
DesignCritiqueReview
Official
Turn a final design into a spec engineers can implement directly.
HandoffSpecsTokens
Official
Design-system hygiene at speed. Audit, document, extend.
Design SystemAuditDocumentation
15
OfficialMicrocopy that respects the user. Errors, empty states, CTAs, onboarding.
UX CopyMicrocopyWriting
Verified
Boolean prop hell → compound components. Cleaner React component APIs by construction.
ReactPatternsAPI design
Install
Commands for Cursor
Copy-paste installs for the top picks. Full per-agent commands are on each skill page.
frontend-design
npx skills add github.com/anthropics/skills --skill frontend-design --target cursorreact-email
npx skills add resend/resend-skills --target cursorworkos-widgets
Not bundled with Cursor; community port may exist.
shadcn-context
npx skills add shadcn-ui/ui --skill shadcn-context --target cursorweb-artifacts-builder
npx skills add github.com/anthropics/skills --skill web-artifacts-builder --target cursoraccessibility-review
Copy the accessibility-review folder from the design plugin into .cursor/skills/
shopify-storefront
See the skill page for setup.
theme-factory
npx skills add anthropics/skills --skill theme-factory --target cursorNot verified here
3 frontend & ui skills we have not confirmed on Cursor
Listed rather than hidden. Absence here usually means untested, not broken — check each skill page for the agents it is verified on.
A combination only gets a page here when at least 6 skills are verified on the agent — otherwise the page would be a stub pretending to be a ranking.
FAQ
Common questions
Do design skills conflict with Cursor Rules already in my repo?
They stack rather than conflict, and Rules win on specificity. A skill loads on trigger and supplies broad direction (type scale, spacing, colour reasoning); a .cursor/rules file is always-on and repo-specific. If your rules already pin design tokens, keep them — add frontend-design for the composition decisions rules rarely encode.
How many frontend & ui skills work with Cursor?
17 of the 20 skills catalogued in Frontend & UI Design are verified working on Cursor. The remaining 3 are either untested on this agent or depend on capabilities it does not provide — they are listed below rather than hidden.
How do I install a frontend & ui skill on Cursor?
Each skill page carries the exact Cursor command. Cursor reads SKILL.md through a compatibility layer, which is why compatibility here is tested per skill rather than assumed.
Related
Other cuts of this data
- All Frontend & UI Design skills →
Every entry in the category, across all agents, ranked by composite score.
- All skills for Cursor →
Every skill verified on Cursor, across all categories.
- Top Code Quality & Review Skills for Cursor →
The 12 code review agent Skills with verified Cursor compatibility, ranked by composite score, with the install command for Cursor and what is not verified there yet.
- Top APIs & Integrations Skills for Cursor →
The 11 apis & integrations agent Skills with verified Cursor compatibility, ranked by composite score, with the install command for Cursor and what is not verified there yet.