Best Web & Frontend tools
2067 tools in the Web & Frontend category across every type.
Skills
frontend-design
Build visually distinctive UI with opinionated aesthetic direction, typography, and layout choices that avoid templated defaults.
vercel-react-best-practices
70 React/Next.js performance rules from Vercel Engineering, prioritized by impact for writing, reviewing, and refactoring code.
agent-browser
Fast browser automation CLI for AI agents — navigate, click, scrape, screenshot, and test via Chrome CDP
web-design-guidelines
Review UI code against Web Interface Guidelines for accessibility, UX, and design best practices
remotion-best-practices
Best practices and patterns for building videos with Remotion in React
image-edit
Intent-routed image editing: picks the right model (batch, text rewrite, precise local, or inpaint) based on what you ask.
nano-banana-edit
Edit images with Google Nano Banana 2 on RunComfy — batch up to 20 inputs, preserve identity, swap backgrounds, localize edits.
flux-kontext
Edit images precisely with Flux 1 Kontext Pro via RunComfy CLI — single-reference local edits with strong prompt control
seedance-v2
Generate cinematic short-form video with ByteDance Seedance 2.0 Pro — multi-modal refs, native lip-sync, via RunComfy CLI
sleek-design-mobile-apps
Design mobile app screens via AI using the Sleek REST API — create projects, build UI, and render screenshots.
kling-3-0
Generate cinematic video with Kling 3.0 via RunComfy CLI — Standard, Pro, and 4K tiers across text-to-video and image-to-video
image-inpainting
Mask-driven image inpainting for object removal, watermark cleanup, and region replacement via RunComfy CLI.
lipsync
Sync audio to a face's mouth across multiple AI models via RunComfy CLI.
video-extend
Extend existing video clips with Google Veo 3-1 via RunComfy CLI.
image-outpainting
Extend image canvas, change aspect ratio, and fill in missing areas while preserving original content.
video-outpainting
Extend video canvas spatially—swap aspect ratio, uncrop, add environment while preserving central action.
relight
Change lighting direction, color temperature, and mood on still images via RunComfy's Qwen Edit Relight LoRA.
remotion-render
Render MP4 videos from React/Remotion component code via inference.sh CLI.
ui-ux-pro-max
Comprehensive UI/UX design intelligence with 50+ styles, 161 color palettes, 57 font pairings, and 99 UX guidelines across 10 stacks.
vercel-composition-patterns
React composition patterns to scale components without boolean prop proliferation.
lark-apps
Create, develop, and deploy full-stack or HTML applications on Feishu's Miaoda platform with local or cloud-based workflows.
gpt-image-2
Generate and edit images with OpenAI GPT Image 2 on RunComfy—best for embedded text, logos, and directive precision.
shadcn
Manage shadcn/ui components, projects, and design systems with CLI-driven component addition and composition.
design-taste-frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns that infer design direction and avoid templated output.
impeccable
Design and iterate production-grade frontend interfaces with real working code and exceptional craft.
high-end-visual-design
Design like a $150k+ agency with premium fonts, haptic depth, and fluid motion—blocks cheap defaults.
redesign-existing-projects
Audit and upgrade existing websites to premium quality by eliminating generic AI patterns and applying high-end design standards.
vercel-react-native-skills
React Native and Expo best practices for performant mobile apps, animations, and native integrations.
minimalist-ui
Clean editorial-style interfaces with warm monochrome palette, typographic contrast, and flat bento grids.
hyperframes
Router and entry skill for video authoring—renders video from HTML with intent-based workflow selection.
hyperframes-registry
Install and wire reusable blocks and components into HyperFrames compositions via registry.
industrial-brutalist-ui
Raw mechanical interfaces fusing Swiss typography with military terminal aesthetics for data-heavy dashboards.
stitch-design-taste
Generate premium DESIGN.md files for Google Stitch that enforce anti-generic UI standards with strict typography, calibrated color, asymmetric layouts, and hardware-accelerated motion.
gpt-taste
Elite UX/UI and GSAP motion engineer enforcing award-level design, Python randomization, and strict AIDA structure.
extract-design-system
Reverse-engineer design primitives from public websites into starter token files.
image-to-code
Generate design images first, then implement websites that match them with premium visual fidelity.
imagegen-frontend-web
Generate premium, section-by-section website design references with art-directed imagery and conversion-aware layouts.
imagegen-frontend-mobile
Premium mobile app screen design for iOS, Android, and cross-platform products—image generation only.
emil-design-eng
Emil Kowalski's design engineering philosophy: taste, invisible details, and animation decisions that make software feel right.
webapp-testing
Test local web applications with Playwright—verify frontend functionality, debug UI behavior, and capture screenshots.
gsap
GSAP animation reference for HyperFrames compositions with timelines, easing, and performance optimization.
website-to-hyperframes
Capture a website and create professional HyperFrames videos from it.
polish
Final quality pass fixing alignment, spacing, consistency, and micro-details before shipping.
critique
Evaluate design from a UX perspective with quantitative scoring, persona testing, and automated anti-pattern detection.
audit
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns with severity ratings.
animate
Review features and add purposeful animations, micro-interactions, and motion effects that improve usability and delight.
adapt
Adapt designs across screen sizes, devices, and platforms with responsive layouts and context-aware patterns.
optimize
Diagnose and fix UI performance issues across loading, rendering, animations, images, and bundle size.
colorize
Add strategic color to monochromatic designs for better hierarchy, meaning, and visual engagement.
browser-use
Automate browser interactions for web testing, form filling, screenshots, and data extraction.
bolder
Transform bland designs into visually striking, memorable experiences while maintaining usability and coherence.
delight
Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable.
distill
Strip designs to their essence by removing unnecessary complexity and visual clutter.
quieter
Tone down visually aggressive designs into refined, sophisticated aesthetics while preserving quality and impact.
design-taste-frontend-v1
Stable v1 taste-skill for backward-compatible frontend design with configurable design variance, motion intensity, and visual density.
web-artifacts-builder
Build complex React artifacts with Tailwind CSS and shadcn/ui components for Claude conversations.
css-animations
CSS keyframe animations with deterministic seeking for HyperFrames preview and rendering.
site-architecture
Plan and map your website's page hierarchy, navigation, and URL structure for intuitive user experience and SEO.
tailwind
Tailwind CSS v4.2 browser-runtime patterns for HyperFrames video compositions.
animejs
Anime.js adapter for deterministic, seek-driven animations in HyperFrames compositions.
MCP Servers
Scrapling MCP Server
Web scraping with stealth HTTP, real browsers, and Cloudflare bypass capabilities.
io.github.tldraw/tldraw
Draw and visually collaborate with AI agents on tldraw's infinite canvas.
Give your coding agent direct access to Figma design data for one-shot UI implementation.
draw.io
Create interactive draw.io diagrams in chat with 10,000+ searchable shapes.
Local-first web intelligence for AI agents—search, fetch, crawl, extract, and research with no API keys or cloud dependency.
io.github.antvis/mcp-server-chart
Generate 26+ chart types and diagrams for AI agents via AntV's MCP server.
RevoGrid DataGrid MCP
Token-free MCP server for accessing RevoGrid data grid documentation, API, and feature knowledge.
AI-powered access to RevoGrid DataGrid documentation, examples, and Pro features via MCP.
Semiotic
AI-assisted React chart library with network graphs, streaming data, and schema-backed code generation for LLMs.
Figma MCP Server
Bring Figma design context directly into your AI workflow for code generation and design implementation.
TypeUI
Give AI coding tools access to design systems and UI prompts for better-looking interfaces.
OpenBrand
Extract logos, colors, and brand assets from any website URL instantly.
FableCut
Browser video editor driven by AI agents via JSON timeline and MCP; zero npm dependencies.
MCP server providing API documentation and developer assistance for UI5 Web Components for React
io.github.abelljs/abell
MCP server exposing AI tooling for the Abell static-site-generator ecosystem.
Google Maps MCP Server
18 Google Maps tools for AI agents — geocode, search, directions, weather, elevation, and more.
Svelte MCP
Official Svelte MCP server with documentation access and autofix tools for Svelte development
io.github.TranHoaiHung/figma-ui-mcp
Bidirectional Figma MCP bridge — AI draws UI on Figma canvas, reads designs back as code-ready data.
melta UI
AI-ready design system MCP: enforce design contracts with tokens, rules, and automated HTML verification.
SvGrid
Svelte 5 native data grid with virtual scrolling, filtering, editing, and 370+ demos—headless-first, MIT core.
shadcn/ui for Laravel Blade — discover, read and install BlatUI components, blocks and charts.
Renders web pages into structured, token-efficient representations for AI agents using headless Chromium.
Access Svelte 5 and SvelteKit documentation through an MCP server for AI assistants.
MCP server for SAP Fiori application development and UX tooling integration
106 tiny React charts for AI—find, wire, and render word-sized visualizations with generated alt text.
com.webflow/mcp
AI-powered design and management for Webflow sites via the Webflow Data API.
Ignite UI MCP Server
MCP server providing AI assistants with Ignite UI documentation, API reference, and project scaffolding guidance.
AI-powered CesiumJS development tools with 60+ commands for Claude, Cursor, and browser agents.
AI-powered 3D globe control via MCP—camera, layers, markers, and spatial analysis with CesiumJS.
Image processing pipeline for Next.js with responsive optimization using Sharp.
Feature flags for Next.js with percentage rollouts and A/B testing, configured in one file.
Unified notifications for Next.js with multi-provider SMS, email, and push support.
Full-text search for Next.js with BM25 scoring and fuzzy matching, no external service needed.
3D AI Agent Avatar
Render 3D GLB avatars with Solana wallets, voice, and pump.fun token integration for AI agents.
Generate embeddable 3D avatar chatbots with AI brains—no plugins or server uploads needed.
three.ws Concierge
Ask any website's AI concierge a grounded question, and embed one on your site.
three.ws Loom
Browse and submit 3D creations to the three.ws community gallery via Claude or Cursor.
three.ws Scenes
Generate 3D dioramas from text prompts, manage scenes, and export GLB models for AI agents.
three.ws 3D Studio
Turn text or images into animation-ready 3D models (GLB) with AI generation, rigging, and texturing.
Free text/image-to-3D model generation: create, rig, and refine GLB avatars with no authentication required.
three.ws Avatars
Render live, interactive 3D avatars inline in your agent—generate from text or embed existing GLB models.
Publish JavaScript, KidLisp art, and clock melodies on a federated creative computing platform
io.github.UI5/mcp-server
MCP server for SAPUI5/OpenUI5 development with AI-assisted project scaffolding, linting, and best practices.
AI-powered web scraping via MCP—extract, search, crawl, and monitor websites with language models.
63-tool Adobe Illustrator MCP server for AI-driven design creation, analysis, and export—more capabilities than Adobe's official MCP.
com.pulsemcp/pulse-fetch
Fetch web resources with content extraction, HTML noise stripping, and anti-bot bypass capabilities.
Two-way Figma MCP: extract designs to code with verification, or generate on-brand Figma pages from a prompt.
Three.js DevTools MCP
Inspect and edit Three.js scenes, materials, shaders, and lights in real time from AI agents.
ai.waystation/miro
Collaborate on visual boards with your team using Miro integration.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Browse and install 75+ free animated, shadcn-compatible React components from AI Canvas.
MCP server to convert Figma designs to Flowbite UI components in Tailwind CSS
io.github.mcpware/pagecast
Record any browser page as GIF or video via MCP
memi
Memi is the read-only design engineering audit and skill layer for coding agents.
Memoire
Shadcn-native Design CI for Tailwind apps with registry export and MCP UI tools.
Starwind UI MCP Server
Framework-aware Starwind UI v3 tools for Astro and React setup, components, docs, and migration.
PageMap
Structured web intelligence for AI agents. 5x fewer tokens than Playwright/Firecrawl, 84.7% accuracy
com.mcparmory/agentql
Query webpages and extract structured data using natural language
com.mcparmory/figma
Export files, access design data, manage projects, comments, and team assets
Plugins
frontend-design
UI/UX implementation skill for frontend design work
hyperframes
Write HTML, render it as video with animations, captions, and voiceovers using HyperFrames.
accessibility-compliance
WCAG accessibility auditing and compliance validation for inclusive design
brand-landingpage
Guide brands from discovery through iterative design to deployment-ready HTML via Stitch.
Build frontend UIs and mobile apps across platforms with Claude Code
multi-platform-apps
Coordinate web, iOS, Android, and desktop app development across platforms
Technical SEO optimization for meta tags, keywords, structure, and featured snippets
ui-design
Design systems, accessibility, and modern UI patterns for mobile and web apps
figma
Figma MCP server and skills for design workflows in Claude Code and Cursor
modern-web-guidance
Keep your coding agent up to date with the latest web best practices
amazon-location-service
Add maps, geocoding, routing, and geospatial features to your app with Amazon Location Service.
frontend-developer
Build responsive, accessible, and performant web UIs with React/Vue/Angular expertise.
mobile-ux-optimizer
Optimize UI/UX components and interfaces for mobile-first experiences with design consistency.
react-native-dev
Expert React Native development assistance for code analysis, components, debugging, and architecture.
ui-designer
AI agent for rapid UI/component design and design system creation
web-dev
Expert assistance for React, Next.js, NestJS web development with TypeScript and Tailwind CSS.
whimsy-injector
Automatically inject delightful, playful elements into UI/UX changes to create memorable user experiences.
Superdesign
Design and redesign frontend UI and marketing graphics on an infinite canvas with AI-assisted design system generation.
adobe-for-creativity
Access Adobe Creative Cloud tools for image, vector, design, and video editing within Claude Code.
miro
Secure access to Miro boards for reading context, creating diagrams, and generating code.
mapbox
Geospatial tools and MCP servers for building location-aware applications with AI.
runway-api
Generate videos, images, and audio at scale with Runway's API.
liquid-skills
Liquid language fundamentals, CSS/JS/HTML standards, and WCAG accessibility patterns for Shopify theme development
wix
Build, manage, and deploy Wix sites and apps with CLI and MCP server integration.
ckeditor
Install and configure CKEditor 5 (free and premium) in JavaScript projects.
ui-responsive
Responsive design advisor that flags non-responsive patterns in your code.
cloudinary
Upload, manage, and transform images and videos with Cloudinary directly in Claude.
Agents
accessibility-expert
Expert accessibility specialist ensuring WCAG compliance, inclusive design, and assistive technology compatibility.
angular-architect
Enterprise Angular 15+ architect for complex state management, micro-frontends, and performance optimization.
frontend-developer
Build responsive, accessible, high-performance UIs across any framework—vanilla JS/TS, React, Vue, Angular, Svelte, or Web Components.
frontend-designer
Convert design mockups into production-ready component architectures and implementation guides.
frontend-developer
Senior frontend engineer AI pair programmer for building production-ready React components with TypeScript, accessibility, and performance focus.
angularjs-expert
Expert AngularJS optimization: architecture, performance, and best practices.
Expert React 19 & Next.js 15 frontend developer for high-performance, accessible web applications.
design-bridge
Translate design system documents into actionable Claude Code instructions for faithful UI implementation.
Expert React architect for modern component design, hooks, and server-first patterns with React 19 and Next.js 14+.
nextjs-pro
Senior Next.js engineer for high-performance, scalable web applications with SSR/SSG mastery and SEO optimization.
astro-expert
Expert Astro architect for high-performance static sites with optimized components and content collections.
design-system-architect
Expert design system architect for token architecture, component libraries, and scalable theming infrastructure.
frontend-developer
Build performant, accessible frontend applications across React, Vue, and Angular with full-stack integration.
react-nextjs-expert
Expert in Next.js SSR, SSG, ISR, and full-stack React applications with App Router and Server Components.
react-pro
Senior React engineer for modern, performant, scalable web applications with component architecture and advanced patterns.
css-expert
Master CSS stylist for layouts, responsive design, animations, and accessibility.
Expert React 19 & Next.js 15 developer for modern component architecture, server-side rendering, and performance optimization.
nextjs-developer
Build production Next.js 14+ applications with App Router, server components, and Core Web Vitals optimization.
Utility-first Tailwind CSS v4+ specialist for accessible, high-performance component styling with container queries and design tokens.
ui-designer
Create visually appealing, intuitive interfaces with design systems and interactive prototypes.
html-expert
Expert in semantic HTML, accessibility, and web standards for clean, optimized pages.
Expert cross-platform mobile development with React Native, Flutter, and native iOS/Android—optimized for performance, offline-first architecture, and app store deployment.
react-specialist
Optimize React 18+ applications with advanced patterns, state management, and performance-focused architecture.
Expert Vue 3 Composition API architect creating intelligent, project-aware components and composables.
ux-designer
User-centered design advocate who researches, tests, and designs intuitive, accessible product experiences.
jquery-expert
jQuery specialist for efficient DOM manipulation, event handling, and cross-browser AJAX interactions.
Expert React 19 & Next.js 15 frontend developer—builds performant, accessible components and optimizes client-side architecture.
ui-designer
Senior UI designer creating beautiful, accessible interfaces with design systems and component libraries.
vue-nuxt-expert
Expert Nuxt.js development for SSR, SSG, and full-stack Vue applications with intelligent architecture decisions.
nextjs-expert
Expert Next.js development with serverless architecture, SSR/SSG, and performance optimization.
frontend-security-coder
Expert frontend security coding for XSS prevention, CSP configuration, and secure DOM manipulation.
vue-expert
Master Vue 3 Composition API, reactivity optimization, and Nuxt 3 enterprise development.
react-expert
Expert React development with hooks, state management, and performance optimization.
Expert React 19 & Next.js 15 frontend developer for modern component architecture, performance optimization, and accessibility.
remix-expert
Build performant, scalable web applications with Remix loaders, actions, and dynamic routing.
playwright
Verifies frontend acceptance criteria in a real browser using Playwright and the page object pattern.
solidjs-expert
Build efficient, reactive SolidJS components with fine-grained reactivity and optimized rendering.
ui-designer
Expert UI designer for component creation, layout systems, and design-to-code implementation.
svelte-expert
Master Svelte.js development with performant, maintainable, and idiomatic components.
ui-ux-designer
Design systems, accessible interfaces, and user-centered experiences with comprehensive documentation.
tailwind-expert
Expert Tailwind CSS styling with utility-first design and responsive layouts.
ui-visual-validator
Rigorous visual validation expert ensuring UI modifications achieve their intended goals through systematic screenshot analysis and design compliance verification.
vue-expert
Vue.js expert for modern applications, components, state management, and routing.
Rules
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
TypeScript-first Astro development with conventional commits, TailwindCSS styling, and modular component patterns.
Build email templates with Beefree SDK: installation, authentication, configuration, and template management.
Embed Beefree SDK's no-code email, page, and popup editors into web applications with authentication, configuration, and template management.
Full-stack SaaS on Cloudflare Workers with Hono APIs, Angular frontends, and enterprise integrations.
HarmonyOS ArkTS component, state, layout, and accessibility patterns for robust UI development.
Expert HTML, Tailwind CSS, and vanilla JavaScript development with focus on clean, readable code.
Essential HTMX patterns and setup for interactive web development without full page reloads.
HTMX development with Django integration, templates, and best practices.
HTMX and Flask integration patterns for dynamic server-rendered web applications.
Go Fiber integration patterns for HTMX-driven server-side rendering and request handling.
Expert guidance for building fast, scalable websites with Astro, JavaScript, and Tailwind CSS.
Use real, optimized images with proper alt text and dimensions instead of placeholders on landing pages.
Build custom frontends with Momen.app headless BaaS, GraphQL API, actionflows, AI agents, and Stripe integration.
Next.js with TypeScript and Tailwind UI best practices
Best practices and patterns for Next.js App Router development
Next.js + Material UI + Tailwind CSS + shadcn/ui stack with TypeScript and App Router
Expert Next.js, React, and Tailwind CSS development patterns with TypeScript and Shadcn UI.
Expert setup for Next.js 14 with React, TypeScript, Shadcn UI, and Web3 libraries (Viem, Wagmi).
Next.js development guide with SEO optimization and code documentation standards.
Next.js + Supabase + Shadcn + PWA development rules with TypeScript, RSC, and build tracking.
Next.js App Router + TanStack Query v5 integration with HydrationBoundary, Server Actions, and optimistic updates.
Next.js App Router + TanStack Query v5 with server prefetch, Server Actions mutations, and optimistic updates
Next.js + TypeScript + Tailwind CSS setup for the Astral block explorer with responsive, accessible components.
Expert guidance for Next.js 15, React 19, Vercel AI, and Tailwind CSS development with TypeScript.
TypeScript and Vite setup for Qwik functional components with reactive state management.
Qwik development with Tailwind CSS, TypeScript, and Vite integration.
React best practices and patterns for modern web applications
React development with Chakra UI components, hooks, and theming best practices.
Structured workflow for creating React components with design review and reusable pattern checks.
Generate production-ready React forms from screenshots, PDFs, or descriptions with validated FormEngine JSON schema.
GraphQL development with Apollo Client and React hooks best practices
React development with MobX state management using functional components and hooks.
Best practices and structure for React Native Expo development with hooks, navigation, and Expo SDK features.
React Native Expo Router with TypeScript and Windows development setup.
Expert React & Next.js App Router development with clear, production-ready code.
React Query integration guide with hooks, caching, and best practices for React development.
React + Redux + TypeScript integration with hooks, Redux Toolkit, and type-safe patterns.
React Router v7 framework mode: route modules, data loaders, actions, and progressive enhancement patterns.
Build React apps with Styled Components using functional components, hooks, and a consistent theming system.
Type-safe React SPA routing with TanStack Router v1 + Query v5 for zero-loading-spinner data prefetching.
Zero-loading-spinner routing with TanStack Router v1 and Query v5 for type-safe React SPAs
Expert guidance for React, TypeScript, Next.js 14, and Web3 development with Wagmi and Viem.
Full-stack React + TypeScript + Symfony development with focus on clean, readable code
React and TypeScript state management with Zustand: stores, selectors, middleware, and testing patterns.
Build RTL-ready applications with logical CSS, Tailwind utilities, and automated auditing.
30+ chart types for React with push API, real-time streaming, geo visualization, and AI-assisted generation.
Best practices for Shopify Liquid theme development with organized structure, performance, and accessibility.
Essential Solid.js setup and best practices for functional component development.
Solid.js development with Tailwind CSS styling and reactive components.
TypeScript-first Solid.js development with strict typing and functional components.
Svelte best practices for component structure, reactivity, state management, and modern web applications
Migrate from Svelte 4 to Svelte 5 with runes, snippets, and standardized event handling.
SvelteKit + RESTful API + Tailwind CSS development with TDD, full file path tracking, and Elon Musk efficiency principles.
SvelteKit + Tailwind CSS + TypeScript standards and best practices guide
Swift UIKit MVVM + RxSwift development with reactive programming and clean architecture patterns.
Tailwind CSS and UI component best practices for modern web applications
Tailwind CSS and DaisyUI component development guide for Next.js with strict TypeScript and Biome tooling.
Mobile-first Tailwind + React + Firebase setup with responsive design, performance optimization, and best practices.