Category · Frontend & Design

Frontend & Design skills for Claude Code

The best Frontend & Design skills, MCP servers & marketplaces for Claude Code, Codex, Cursor & all other coding agents, ranked by real installs in the Frontend & Design category. Covers React, Next.js, Vue and Svelte and more.

What's in the Frontend & Design category

The Frontend & Design category collects 6,852 tools including agent skills, MCP servers, marketplaces and plugins, led by Frontend Design, Vercel React Best Practices and Web Design Guidelines. The list is updated automatically and ranked by real adoption - installs first, then GitHub stars - so the strongest surface first. Every listing works with Claude Code, Codex or Cursor. Updated October 25, 2026.

Use the filters below to narrow by type or what you're building, or open a type hub to see frontend & design listings alongside everything else of that type.

Browse tools

Showing 742 of 6,852 in this view.

Type

1Frontend Designanthropics/skillsOfficialGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.Frontend & Designskill

1M175k

2Vercel React Best Practicesvercel-labs/agent-skillsOfficialAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.Frontend & Designskill

834k30.9k

3Web Design Guidelinesvercel-labs/agent-skillsOfficialAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.Frontend & Designskill

778k30.9k

4Design Taste FrontendLeonxlnx/taste-skillOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.Frontend & Designskill

666k84.6k

5High End Visual DesignLeonxlnx/taste-skillMake every AI-generated interface look and feel like it was crafted by a $150k premium design agency.Frontend & Designskill

459k84.6k

6Redesign Existing ProjectsLeonxlnx/taste-skillUpgrade an existing website or web app from generic AI-generated styling to premium, intentional design while preserving the current tech stack.Frontend & Designskill

459k84.6k

7Minimalist UiLeonxlnx/taste-skillGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilitaFrontend & Designskill

425k84.6k

8Vercel Composition Patternsvercel-labs/agent-skillsOfficialGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.Frontend & Designskill

415k30.9k

9Ui Ux Pro Maxnextlevelbuilder/ui-ux-pro-max-skillGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.Frontend & Designskill

412k125k

10Slideshowheygen-com/hyperframesAuthor structured, navigable HyperFrames slideshows, pitch decks, and interactive presentations with branching sequences and hotspot navigation.Frontend & Designskill

410k44.2k

11Gpt TasteLeonxlnx/taste-skillForce an AI coding agent to produce Awwwards-level, motion-rich frontend code instead of the repetitive, gap-filled, statistically biased layouts that LLMs default to.Frontend & Designskill

399k84.6k

16Emil Design Engemilkowalski/skillsFor development and infrastructure management.Frontend & Designskill

383k35.7k

17Imagegen Frontend WebLeonxlnx/taste-skillGenerate premium, conversion-focused visual references for every section of a landing page or marketing site.Frontend & Designskill

380k84.6k

18Imagegen Frontend MobileLeonxlnx/taste-skillGenerate premium, app-native mobile screen concepts and user flows with intentional visual hierarchy and tasteful mockup framing.Frontend & Designskill

374k84.6k

19Impeccablepbakaus/impeccableShip polished, distinctive web and app UI in real code when generic layouts, weak hierarchy, or UX gaps are blocking launches.Frontend & Designskill

357k65.8k

20Design Taste Frontend V1Leonxlnx/taste-skillEnsure every frontend component matches a consistent, opinionated visual and motion language without manual redesign cycles.Frontend & Designskill

330k84.6k

21Figmaheygen-com/hyperframesImports Figma designs into HyperFrames video compositions: static assets, brand tokens, components, motion, and shaders, freezing everything locally for deterministic renders.Frontend & Designskill

325k44.2k

22Shadcnshadcn-ui/uiAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.Frontend & Designskill-271k123k

23Vercel React Native Skillsvercel-labs/agent-skillsOfficialEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.Frontend & Designskill

253k30.9k

24Review Animationsemilkowalski/skillsExtends skill capabilities for developers.Frontend & Designskill

252k35.7k

28Design An Interfacemattpocock/skillsHelps a solo builder compare several candidate designs for a module or interface before committing to one implementation.Frontend & Designskill

209k219k

29Find Animation Opportunitiesemilkowalski/skillsDesign engineers sweep a codebase or UI for moments that would genuinely benefit from motion and get precise animation recipes, with most candidates deliberately rejected.Frontend & Designskill

205k35.7k

30Pick Ui Libraryemilkowalski/skillsFrontend developers invoke it with a task (toasts, drag and drop, charts, state) and get one opinionated library recommendation from a curated list.Frontend & Designskill

181k35.7k

31Archifytt-a1i/archifyGenerate polished architecture, workflow, sequence, and state diagrams as standalone HTML with export.Frontend & Designskill

172k49.5k

32Prototypeemilkowalski/skillsDesign engineers use it to build several genuinely different working versions of one UI piece behind a visual picker, flip through them live, and promote the winner into the codebase.Frontend & Designskill

170k35.7k

33Animateemilkowalski/skillsBuild purposeful UI motion from scratch—deciding whether to animate, which properties, curves, and durations, then writing the code.Frontend & Designskill

168k35.7k

34Vercel React View Transitionsvercel-labs/agent-skillsOfficialGenerate consistent, high-quality React View Transition implementations that feel native and buttery smooth.Frontend & Designskill

166k30.9k

35Ask Sonneremilkowalski/skillsImplement Sonner React toast notifications with theming promise and positioning patterns.Frontend & Designskill

137k35.7k

36Extract Design Systemarvindrk/extract-design-systemPull live design tokens from any public website and generate ready-to-use CSS variables and JSON token files for their own project.Frontend & Designskill

131k205

37Xcode Project Setupfirebase/agent-skillsOfficialAutomatically create and configure a new Xcode project with Swift Package Manager dependencies for iOS or macOS agent projects.Frontend & Designskill

130k433

38Canvas Designanthropics/skillsOfficialGenerate structured visual canvases that clarify product strategy, user flows, and feature priorities before writing code.Frontend & Designskill

122k175k

41Web Perfcloudflare/skillsOfficialAutomatically audit real browser performance and receive concrete optimization recommendations for Core Web Vitals and Lighthouse scores.Frontend & Designskill

108k2.8k

42Higgsfield Brandkithiggsfield-ai/skillsOfficialBuild and extend full visual brand systems—palettes, SVG logos, typography, mockups, packaging, and brandbooks via Higgsfield CLI plus local tooling.Frontend & Designskill

99.6k873

43Theme Factoryanthropics/skillsOfficialInstantly apply consistent professional color palettes and font pairings to slide decks, HTML landing pages, reports, and other generated artifacts.Frontend & Designskill

94.9k175k

44Gsapheygen-com/hyperframesHelps a solo builder add smooth GSAP animations to web pages and timelines without writing the motion logic from scratch.Frontend & Designskill-92.1k41.2k

45Polishpbakaus/impeccableApplies final visual and interaction refinements to a screen so a solo builder can ship a more finished look.Frontend & Designskill-85.2k59.7k

57Json Canvaskepano/obsidian-skillsCreate, edit, and maintain visual JSON Canvas diagrams, mind maps, and flowcharts directly through their coding agent.Frontend & Designskill

74.3k47.9k

58Gsap Coregreensock/gsap-skillsOfficialWhen they need an agent that reliably generates correct GSAP tweens, timelines, easing, staggers, and responsive animation code for web projects.Frontend & Designskill

73.9k15k

59Make Interfaces Feel Betterjakubkrehel/make-interfaces-feel-betterCreate smooth, responsive, and delightful interface animations that feel natural and never janky.Frontend & Designskill

73k3.4k

60Css Animationsheygen-com/hyperframesWrites CSS keyframe animations that HyperFrames can seek deterministically for video compositions.Frontend & Designskill-72.3k41.2k

Explore more

By type

By what you're building

FAQ

Frontend & Design tools - common questions

What are Frontend & Design tools for Claude Code?

Frontend & Design tools - skills, MCP servers and marketplaces tagged Frontend & Design - teach Claude Code, Codex, Cursor and other coding agents how to do Frontend & Design work, things like React, Next.js, Vue, Svelte and Tailwind. Each one drops into your agent and installs with a single command.

How do I install a Frontend & Design skill or MCP server?

Open any listing and copy its one-line command - for example npx skills add https://github.com/owner/repo --skill name for a skill, or /plugin marketplace add owner/repo for a marketplace. It's available in your next Claude Code, Codex or Cursor session.

Which Frontend & Design tools and frameworks are covered?

React, Next.js, Vue, Svelte and Tailwind and more. Skillselion ingests the whole catalog from skills.sh, GitHub and the MCP registries, so new Frontend & Design tools appear as the community ships them - ranked by installs and GitHub stars, never paid placement.