--- title: Top Frontend & UI Design Skills for Cursor slug: top-frontend-design-skills-for-cursor type: category-agent-cut category: frontend-design agent: cursor canonical: https://top-agent-skills.com/top-frontend-design-skills-for-cursor verified: 18 unverified: 3 updated: 2026-09-29 --- # 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. ## Verified on Cursor (18) ### 1. frontend-design — score 92/100 (official-anthropic) Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written. - Best for: Greenfield landing pages, marketing sites, and any UI that should feel intentional rather than templated. - Not ideal for: Ports of an existing design system — frontend-design pushes a bold direction that may overwrite established tokens. - Publisher: Anthropic · MIT - Verified on: claude-code, claude-ai, claude-api, cursor, codex, gemini-cli, antigravity ```bash npx skills add github.com/anthropics/skills --skill frontend-design ``` Full entry: https://top-agent-skills.com/skill/frontend-design (https://top-agent-skills.com/skill/frontend-design.md) ### 2. wordpress-agent-skills — score 67/100 (verified-org) WordPress’s own answer to agents writing pre-Gutenberg code: blocks, block themes, plugins, the modern APIs. - Best for: Stopping an agent generating outdated WordPress patterns — pre-block themes, missing block deprecations that cause "Invalid block" errors, plugin code that skips the security conventions. - Not ideal for: Running or hosting a WordPress site. These teach how to build for WordPress; updates, backups and hosting are a host’s skill, not this set. - Publisher: WordPress · GPL-2.0-or-later - Verified on: claude-code, codex, cursor ```bash npx skills add WordPress/agent-skills --skill wp-plugin-development --yes ``` Full entry: https://top-agent-skills.com/skill/wordpress-agent-skills (https://top-agent-skills.com/skill/wordpress-agent-skills.md) ### 3. react-email — score 59/100 (verified-org) Build cross-client HTML emails as React components, with a visual editor and Resend-ready rendering. - Best for: Authoring transactional email templates (welcome, reset, receipt, notification) as type-safe React components that render across email clients. - Not ideal for: Plain-text-only sends or teams not using React — the value is the React Email component model. - Publisher: Resend · MIT - Verified on: claude-code, cursor, codex ```bash npx skills add resend/resend-skills ``` Full entry: https://top-agent-skills.com/skill/react-email (https://top-agent-skills.com/skill/react-email.md) ### 4. workos-widgets — score 54/100 (official-anthropic) Drop-in WorkOS widgets with backend token wiring across every major framework. - Best for: Embedding WorkOS user-management UI in an existing app without rebuilding auth screens. - Publisher: Anthropic · MIT - Verified on: claude-code, cursor, codex, antigravity Install: Built into Claude Code. Invoke with /workos-widgets. Full entry: https://top-agent-skills.com/skill/workos-widgets (https://top-agent-skills.com/skill/workos-widgets.md) ### 5. web-artifacts-builder — score 52/100 (official-anthropic) Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run. - Best for: Demos, prototypes, and one-off interactive artifacts. - Publisher: Anthropic · MIT - Verified on: claude-code, claude-ai, claude-api, cursor, codex ```bash npx skills add github.com/anthropics/skills --skill web-artifacts-builder ``` Full entry: https://top-agent-skills.com/skill/web-artifacts-builder (https://top-agent-skills.com/skill/web-artifacts-builder.md) ### 6. accessibility-review — score 52/100 (official-anthropic) Pre-handoff a11y audit that catches what design QA misses. Full entry: https://top-agent-skills.com/skill/accessibility-review (https://top-agent-skills.com/skill/accessibility-review.md) ### 7. shopify-storefront — score 51/100 (verified-org) Shopify Storefront API: cart, checkout, metafields, customer accounts, Hydrogen patterns. Full entry: https://top-agent-skills.com/skill/shopify-storefront (https://top-agent-skills.com/skill/shopify-storefront.md) ### 8. theme-factory — score 50/100 (official-anthropic) Single seed prompt → cohesive token system. Tokens that look intentional, not generated. Full entry: https://top-agent-skills.com/skill/theme-factory (https://top-agent-skills.com/skill/theme-factory.md) ### 9. vercel-web-design-guidelines — score 49/100 (verified-org) 100+ accessibility and UX rules from Vercel, applied as a structural audit on your UI code. Full entry: https://top-agent-skills.com/skill/vercel-web-design-guidelines (https://top-agent-skills.com/skill/vercel-web-design-guidelines.md) ### 10. vercel-react-best-practices — score 49/100 (verified-org) 57 React/Next.js performance rules, applied as a structural review on your code. Full entry: https://top-agent-skills.com/skill/vercel-react-best-practices (https://top-agent-skills.com/skill/vercel-react-best-practices.md) ### 11. shadcn-context — score 49/100 (verified-org) shadcn/ui context: components, patterns, and the right composition by default. Full entry: https://top-agent-skills.com/skill/shadcn-context (https://top-agent-skills.com/skill/shadcn-context.md) ### 12. next-js-app-router — score 49/100 (verified-org) Next.js App Router by the book. Server components, streaming, parallel routes. Full entry: https://top-agent-skills.com/skill/next-js-app-router (https://top-agent-skills.com/skill/next-js-app-router.md) ### 13. design-critique — score 49/100 (official-anthropic) Senior-designer feedback on demand. Hierarchy, usability, consistency, motion. Full entry: https://top-agent-skills.com/skill/design-critique (https://top-agent-skills.com/skill/design-critique.md) ### 14. design-handoff — score 49/100 (official-anthropic) Turn a final design into a spec engineers can implement directly. Full entry: https://top-agent-skills.com/skill/design-handoff (https://top-agent-skills.com/skill/design-handoff.md) ### 15. design-system — score 49/100 (official-anthropic) Design-system hygiene at speed. Audit, document, extend. Full entry: https://top-agent-skills.com/skill/design-system (https://top-agent-skills.com/skill/design-system.md) ### 16. ux-copy — score 49/100 (official-anthropic) Microcopy that respects the user. Errors, empty states, CTAs, onboarding. Full entry: https://top-agent-skills.com/skill/ux-copy (https://top-agent-skills.com/skill/ux-copy.md) ### 17. composition-patterns — score 47/100 (verified-org) Boolean prop hell → compound components. Cleaner React component APIs by construction. Full entry: https://top-agent-skills.com/skill/composition-patterns (https://top-agent-skills.com/skill/composition-patterns.md) ### 18. expo-skills — score 47/100 (verified-org) Expo workflows: navigation, EAS, OTA, native modules. Full entry: https://top-agent-skills.com/skill/expo-skills (https://top-agent-skills.com/skill/expo-skills.md) ## In Frontend & UI Design but NOT verified on Cursor (3) These may well work — the SKILL.md format is shared. They are listed as unverified because this site lists an agent only where the install was run or the publisher documents a path for it. - brand-guidelines — Lock generated UIs to a brand. Anthropic's own guidelines, formalized as a skill. (https://top-agent-skills.com/skill/brand-guidelines) - web-asset-generator — Favicons, app icons, social cards — generated at all the right sizes. (https://top-agent-skills.com/skill/web-asset-generator) - publishing-astro-websites — Astro from scaffold to live site — content collections, search, i18n, multi-host deploy. (https://top-agent-skills.com/skill/publishing-astro-websites) ## Common question **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. --- _Top Agent Skills. Machine-readable twin of https://top-agent-skills.com/top-frontend-design-skills-for-cursor._