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,964 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 30, 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
Type
1Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.Frontend & Designskill1M175k
2Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.Frontend & Designskill854k30.9k
3Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.Frontend & Designskill803k30.9k
4Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.Frontend & Designskill703k84.6k
5High End Visual DesignMake every AI-generated interface look and feel like it was crafted by a $150k premium design agency.Frontend & Designskill459k84.6k
6Redesign Existing ProjectsUpgrade an existing website or web app from generic AI-generated styling to premium, intentional design while preserving the current tech stack.Frontend & Designskill459k84.6k
7SlideshowAuthor structured, navigable HyperFrames slideshows, pitch decks, and interactive presentations with branching sequences and hotspot navigation.Frontend & Designskill447k44.2k
8Vercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.Frontend & Designskill428k30.9k
9Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilitaFrontend & Designskill425k84.6k
10Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.Frontend & Designskill424k125k
12Gpt TasteForce 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 & Designskill400k84.6k
19ImpeccableShip polished, distinctive web and app UI in real code when generic layouts, weak hierarchy, or UX gaps are blocking launches.Frontend & Designskill372k65.8k
20FigmaImports Figma designs into HyperFrames video compositions: static assets, brand tokens, components, motion, and shaders, freezing everything locally for deterministic renders.Frontend & Designskill360k44.2k
21Design Taste Frontend V1Ensure every frontend component matches a consistent, opinionated visual and motion language without manual redesign cycles.Frontend & Designskill330k84.6k
22ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.Frontend & Designskill-271k123k
24Vercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.Frontend & Designskill261k30.9k
25Apple DesignA frontend developer building gesture-driven UI, springs, or sheet interactions applies Apple's fluid-interface principles translated to CSS, Pointer Events, and Motion.Frontend & Designskill256k35.7k
29Design An InterfaceHelps a solo builder compare several candidate designs for a module or interface before committing to one implementation.Frontend & Designskill209k219k
30Pick Ui LibraryFrontend developers invoke it with a task (toasts, drag and drop, charts, state) and get one opinionated library recommendation from a curated list.Frontend & Designskill194k35.7k
31ArchifyGenerate polished architecture, workflow, sequence, and state diagrams as standalone HTML with export.Frontend & Designskill184k49.5k
32PrototypeDesign 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 & Designskill183k35.7k
33AnimateBuild purposeful UI motion from scratch—deciding whether to animate, which properties, curves, and durations, then writing the code.Frontend & Designskill183k35.7k
34Vercel React View TransitionsGenerate consistent, high-quality React View Transition implementations that feel native and buttery smooth.Frontend & Designskill174k30.9k
35Ask SonnerImplement Sonner React toast notifications with theming promise and positioning patterns.Frontend & Designskill149k35.7k
36Xcode Project SetupAutomatically create and configure a new Xcode project with Swift Package Manager dependencies for iOS or macOS agent projects.Frontend & Designskill133k433
37Extract 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 & Designskill131k205
38Canvas DesignGenerate structured visual canvases that clarify product strategy, user flows, and feature priorities before writing code.Frontend & Designskill124k175k
39Web PerfAutomatically audit real browser performance and receive concrete optimization recommendations for Core Web Vitals and Lighthouse scores.Frontend & Designskill114k2.8k
40Web Artifacts BuilderCreate rich, interactive multi-component HTML artifacts for Claude that use React, Tailwind, and shadcn/ui components.Frontend & Designskill114k175k
41Brand GuidelinesInstantly apply Anthropic’s official colors, typography, and visual identity to UIs, documents, landing pages, and generated artifacts.Frontend & Designskill113k175k
42Higgsfield BrandkitBuild and extend full visual brand systems—palettes, SVG logos, typography, mockups, packaging, and brandbooks via Higgsfield CLI plus local tooling.Frontend & Designskill107k873
43Theme FactoryInstantly apply consistent professional color palettes and font pairings to slide decks, HTML landing pages, reports, and other generated artifacts.Frontend & Designskill96.9k175k
44GsapHelps a solo builder add smooth GSAP animations to web pages and timelines without writing the motion logic from scratch.Frontend & Designskill92.1k41.2k
45PolishApplies final visual and interaction refinements to a screen so a solo builder can ship a more finished look.Frontend & Designskill-85.2k59.7k
55HallmarkAutomatically detect and remove signature AI-generated UI patterns before they ship as slop.Frontend & Designskill79.5k28.1k
56DistillRemoves clutter from a screen so the main user goal is clear, with fewer elements and options.Frontend & Designskill-79.5k59.7k
57QuieterCalms a loud or overwhelming UI by reducing color intensity, contrast, and visual noise without losing clarity.Frontend & Designskill-78.7k59.7k
58Gsap CoreWhen they need an agent that reliably generates correct GSAP tweens, timelines, easing, staggers, and responsive animation code for web projects.Frontend & Designskill78.4k15k
59Json CanvasCreate, edit, and maintain visual JSON Canvas diagrams, mind maps, and flowcharts directly through their coding agent.Frontend & Designskill75.3k47.9k
60Gsap ScrolltriggerGenerate correct ScrollTrigger code for pinning, scrubbing, parallax, and scroll-linked animations in GSAP projects.Frontend & Designskill75.2k15k
Explore more
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.