Frontend plugins

Access 50+ UI/UX styles, color palettes, font pairings, guidelines, and charts to plan, build, review, and optimize web and mobile interfaces across React, Next.js, Vue, Svelte, Tailwind, React Native, and Flutter.

Elevate frontend development with AI commands that polish, audit, critique, and optimize production-grade interfaces like websites, dashboards, components, and forms. Unlock expert reviews for UX, accessibility, performance, responsive design, theming, typography, motion, plus curated anti-pattern detection.

Implement Next.js Cache Components and Partial Prerendering (PPR) using guided patterns for 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() to control caching, invalidation, static/dynamic optimization, and parameter permutation rendering. Auto-activates when cacheComponents: true is set.

Deploy AI agents with 41 specialized marketing skills to optimize SaaS conversions via user flows and paywalls, generate SEO/copy/ads/content, audit websites/ASO/SEO, plan launches/growth strategies, reduce churn, and automate campaigns across channels.

Generate distinctive production-grade frontend UIs for components, pages, or apps with bold aesthetics, unique typography, motion, and layouts that avoid generic styles, supporting HTML, CSS, JavaScript, React, or Vue.

Launch a local Chrome DevTools MCP server to automate browser tasks via CLI, debug web pages with DOM/network inspection, profile performance metrics like LCP and memory leaks, and audit accessibility using Lighthouse—all integrated for AI-driven workflows in your IDE.

Design and build production-grade, immersive web UIs with 3D interactions using Three.js and React Three Fiber, scroll-driven animations via GSAP and Framer Motion, distinctive aesthetics, mobile-first apps for iOS/Android with React Native or Flutter, visual design manifestos, and prioritized UI/UX guidelines for accessibility and performance.

Optimize websites for search engines by analyzing content for E-E-A-T, readability, keyword cannibalization and duplication; validating schema.org data with impact scores; generating outlines, topic clusters, calendars, and full SEO-optimized articles with metas and FAQs.

Create and present interactive Slidev slide decks from Markdown, embedding Vue components, syntax-highlighted code, animations, LaTeX equations, Mermaid diagrams, and live demos for technical talks, code walkthroughs, tutorials, and conferences.

Edit JavaScript and TypeScript files with full LSP support, gaining real-time diagnostics, go-to-definition navigation, find-all-references, hover documentation, and symbol outlines for .js/.ts/.jsx/.tsx files to streamline code analysis and navigation workflows.

Unlock 66 specialized AI skills to build, debug, optimize, secure, test, and deploy full-stack apps across Python, TypeScript, Go, Rust, Java, PHP, React/Next.js, Django/NestJS/Spring Boot, React Native/Flutter, Kubernetes/Terraform; automate Jira epic planning, ticket execution, sprint retrospectives, and Confluence doc synthesis for end-to-end development workflows.

Unlock bundled expert skills in Claude Code to build full-stack Next.js apps with App Router and Server Actions, select and implement performant Node.js backends with Hono or NestJS, apply React optimization rules, and master advanced TypeScript for monorepos and migrations.

Build production-grade React and Next.js web apps with guided expertise in modern patterns, Tailwind v4 configs, distinctive designs, form friction reduction, performance rules, and SEO diagnostics. Streamline frontend development from components to audits.

Design scalable SEO strategies with feasibility indexes, set up validated A/B tests including sample sizes and metrics, audit analytics for reliable data signals, optimize content via brand voice analysis and Python tools, craft targeted email sequences, and diagnose site SEO issues for marketing growth workflows.

Act as an editorial creative director to generate converting interactive portfolios for devs and creatives, p5.js generative art from algorithmic philosophies, refined marketing copy via clarity sweeps, visual design manifestos in Markdown/PDF/PNG, Python-powered brand voice and SEO analysis, and production-grade distinctive frontend UIs with DFII evaluation.

Build production-grade full-stack web apps in Claude Code by enforcing layered Node/Express/TS backends with Prisma/Zod, creating responsive React/Next.js frontends with Zustand, designing REST/GraphQL/tRPC APIs and PostgreSQL/Drizzle schemas, scaffolding projects via Python scripts, and integrating Stripe payments with webhooks and subscriptions.

Generate self-contained HTML playgrounds with visual controls, live previews, and copyable prompts to interactively explore designs, data visualizations, code reviews, and architectures in a single file.

Equip Claude Code for startup founders to generate conversion-focused marketing copy and SEO-optimized competitor pages, analyze markets and prioritize features via Python RICE scripts and PRD templates, plan SaaS launches with ORB framework, and implement Stripe payments with subscriptions, webhooks, and PCI flows.

Build cross-platform Makepad Rust UI apps: generate boilerplate with Cargo.toml and live_design!, create layouts/widgets/shaders/event handlers, and package for desktop (.deb/.dmg/.nsis), Android APK, iOS IPA, WASM via cargo-packager and GitHub Actions CI/CD.

Integrate commerce and payments into web apps and SaaS products using expert patterns for Algolia search with React/Next.js SSR, Stripe/PayPal/Plaid processing including subscriptions/webhooks/refunds, and HubSpot CRM sync via Node/Python SDKs.

Author animated video compositions in HTML using GSAP, Tailwind, Three.js, Lottie, Web Animations API; add AI-generated TTS voiceovers, Whisper captions, audio-reactive visuals; preprocess media; preview, lint, and render via CLI; capture websites or migrate Remotion projects to video.

Invoke MiniMax AI skills to scaffold React/Next.js frontends, fullstack apps with Node/Python/Go backends, Flutter/React Native/Android/iOS mobile projects; generate/edit DOCX/PDF/PPTX/XLSX files; produce GIF stickers, shaders, music playlists/videos; analyze images via CLI workflows.

Build full-stack Salesforce apps with AI agents generating bulk-safe Apex classes/triggers, accessible performant LWC/Aura/Visualforce UIs, fault-tolerant Flows, plus skills enforcing security, quality guardrails, accessibility, and Jest tests for reviews.

Migrate React 16/17 class-component codebases to React 18.3.1 via AI agents that audit deprecations, convert unsafe lifecycles/refs/context to modern patterns, fix automatic batching regressions, upgrade dependencies to exact versions, and rewrite Enzyme tests to React Testing Library until tests pass.

Build, debug, and troubleshoot Slint GUI applications using .slint markup, with Claude-guided project setup for Rust, JavaScript, or Python backends, MCP server inspection, and fixes for common issues.

Streamline design-to-development workflows by critiquing and auditing Figma UIs for usability, accessibility, and WCAG compliance, generating handoff specs with tokens and breakpoints, writing UX copy for microinteractions, synthesizing user research into insights, managing design systems, and connecting directly to Figma, Jira, Linear, Slack, Notion, Asana, and more via MCP servers.

Organize and manage browser tabs to streamline workflows and boost productivity. Automate browser tasks via CLI—navigate pages, inspect and interact with elements using selectors or text, scrape content, compare snapshots, export screenshots or PDFs, and control multiple instances. Develop the PinchTab Go server with React dashboard, executing dev commands, unit and E2E tests, git operations, checks, and PR checklists.

Build AI agents that generate and interact with React UI components using Tambo: auto-integrate into existing React/Next.js/Vite apps by detecting stack, installing packages, wiring providers, and adding chat UI; or CLI-scaffold new generative UI apps with starter components and schemas.

Generate AntV infographics from text prompts, notes, reports, or outlines by producing DSL code with template selection, theme application, and custom TypeScript/React components for items, layouts, and structures like lists, hierarchies, or geo charts.

Build crafted, consistent UI interfaces for dashboards, admin panels, and SaaS apps with persistent design systems. Initialize systems with intent-based styles, generate components using typography, navigation, and tokens; audit code for violations, extract patterns from React/Vue/Svelte files, critique and rebuild for better composition, spacing, and focal points.

Query Claude, Cursor, or other AI agents for expert GSAP guidance to build performant animations, timelines, ScrollTrigger effects, and plugin integrations in React, Next.js, Vue, Nuxt, Svelte, or vanilla JS, following framework best practices and 60fps optimizations.

Extract full design languages from any website URL into Tailwind configs, shadcn/ui CSS vars, Figma variables, React themes, DTCG tokens, and motion/voice specs. Generate WCAG audits, graded report cards, head-to-head battle pages, style remixes, theme recolors, brand guidelines books, and shippable design system bundles.

Connect to Figma's MCP server to automate design-to-code and code-to-design workflows: generate production UI code from Figma designs, create Figma files and screens from code or descriptions, build design systems with tokens and variables, maintain code connect mappings, and handle FigJam operations.

Build and optimize Next.js App Router apps: scaffold pages/layouts/components/API routes/server actions, implement authentication with Auth.js/Prisma/middleware, guide server/client components usage, and analyze/generate performance reports with recommendations.

Refactor React, TypeScript, and JavaScript code to enforce frontend best practices: improve cohesion by grouping related files and constants, reduce coupling via composition, ensure predictability with unified returns and no side effects, and enhance readability by simplifying conditions and ternaries. Review git branch diffs against these principles.

Build and deploy Vizro dashboards end-to-end via a enforced 2-phase workflow: gather requirements, design layouts and visualizations in YAML specs, implement Python code from examples and schemas, then run Playwright E2E tests with browser automation.

Apply best practices, patterns, and conventions when developing Freya Rust GUI applications, including writing components, hooks, elements, and managing projects.

Automate development workflows by walking through code files line-by-line in VSCode or Vim, logging timestamped work sessions with file changes in daily Markdown, generating detailed issue specs staged in Git, engaging in adaptive Socratic quizzes for learning, and delegating UI validation tasks to a browser agent using Chrome DevTools.

Build interactive web UIs for MCP servers and Claude Desktop apps using guided Claude Code skills. Add UIs to existing servers via Apps SDK, convert web apps to hybrid MCP format with shared code and tool registration, create new apps from React/Vue/Svelte templates with Vite bundling, or migrate OpenAI Apps SDK projects.

Follow official Expo skills to build universal React Native apps with Expo Router and Tailwind CSS, deploy via EAS Build/Submit to app stores and web, upgrade SDKs handling breaking changes, integrate native SwiftUI and Jetpack Compose views, create custom modules, implement API routes and data fetching, generate EAS workflows, and monitor update health.

Generate pre-filled B12 signup links from business name and description to create professional AI websites or landing pages in seconds. Auto-activates on triggers like 'create a website' or mentions of B12, streamlining client site delivery.

Create and manage snapshot tests for UI components and data using Jest, Vitest, or pytest to catch regressions. Analyze test failures with intelligent diff reviews, selectively update snapshots for intentional changes, validate and organize snapshot files, then generate detailed analysis reports.

Define performance budgets for web app metrics like page loads, bundle sizes, API responses, and Lighthouse scores, then validate them in CI/CD pipelines to detect regressions. Auto-generates configs, scripts, dashboards, alerts, and remediation steps.

Run interactive frontend design wizards to research UI/UX trends from Dribbble and Coolors, analyze websites for inspiration via browser screenshots and extractions, curate Tailwind-compatible color palettes and typography pairings, create visual moodboards, review HTML for design principles and accessibility issues, and generate production-ready UI code.

Manage Google Ads and Meta Ads campaigns with performance audits, ROAS optimization, budget adjustments, and A/B testing; perform SEO audits via Google Search Console, keyword research, content generation, schema markup, broken link checks, and GEO strategies for AI search engines.

Build production Framer plugins, code components, CMS syncs with external APIs, and Server API handlers; automate GitHub Actions CI/CD, local Vite dev loops, error debugging, performance tuning via batching/memoization, security hardening, rate limiting, webhooks, and production checklists.

Bootstrap production-ready fullstack MVPs with React+Vite+Tailwind frontend, Express/FastAPI backend, PostgreSQL+Prisma database, JWT/OAuth authentication, tests, Docker containers, and GitHub Actions CI/CD pipelines from a single command. Delegate to AI agents for designing APIs, database schemas, scalable architectures, UI/UX improvements, and deployment strategies.

Generate 3-5 ASCII mockup variations for UI concepts like dashboards and forms. Review design rationales, select and modify versions interactively, then receive implementation blueprints with technology suggestions to prototype quickly.

Design beautiful, functional user interfaces, components, and design systems for rapid implementation in 6-day sprints. Generates Tailwind CSS classes with mobile-first layouts and reusable patterns ready for quick deployment.

Delegate to specialized AI agents that design scalable backend architectures, REST/GraphQL APIs, database schemas, Next.js/React frontends, iOS/Swift or React Native/Flutter mobile apps, Laravel-Vue stacks, and CMS extensions for Directus, Drupal, WordPress. Accelerate full-stack development workflows across diverse tech stacks.

Test web apps for cross-browser compatibility using Playwright locally across Chromium, Gecko, WebKit, and mobile viewports, or on real devices via BrowserStack, Sauce Labs, LambdaTest, Kobiton. Run interactive tests, scan JS/CSS risks, and generate reports with browser matrices.

Generate React, Vue, or HTML code from Figma designs using Anima SDK, automate pipelines with CI/CD via GitHub Actions, optimize API costs and performance with caching and throttling, debug errors, secure tokens, set up local dev loops with Vite previews, and deploy serverless APIs to Vercel or GCP.

Automate frontend workflows: generate Tailwind-powered landing pages and multi-page marketing sites from briefs with screenshots and videos; set up Tailwind v4 themes and install shadcn/ui components in React/Next.js apps; review visual designs, extract design systems, and audit React performance patterns.

Automate comprehensive project management: audit health and permissions, generate architecture/user docs and roadmaps, handle git workflows/PRs/releases, test UX/onboarding/responsiveness via browser, consult multi-AI models, and post team updates with feedback triage.

Delegate UI/UX design workflows to specialized agents that conduct WCAG 2.1 AA/AAA accessibility audits on web apps, generate wireframes and prototypes, create design systems, and implement compliant UI components with ARIA attributes, keyboard navigation, focus management, and screen reader support.

Generate scalable React design systems from design tokens, including atomic components, WCAG accessibility guidelines, theming capabilities, and documentation templates for consistent UI development.

Build, debug, test, deploy, and optimize browser-based Node.js apps and IDEs using StackBlitz SDK and WebContainers: boot in-browser environments, embed interactive playgrounds in docs, fix common errors, run Playwright CI tests, deploy to Vercel/Netlify with production headers, and tune performance/security.

Delegate frontend development tasks to this agent for building responsive UIs and components in React, Vue, or Angular; implementing state management; fixing responsive design and accessibility issues; and optimizing performance with techniques like virtualization and memoization.

Generate and integrate web design assets directly into projects: accessible Tailwind color palettes with dark mode and WCAG checks, complete favicon packages with HTML tags and manifests, custom SVG icon sets, AI images via OpenAI/Gemini from descriptions, and image processing like resize/optimize/convert.

Equip AI coding assistants with 21 specialized skills to build, configure, and deploy Nuxt 4+ apps, covering authentication with Better Auth and Drizzle, styled UIs via Nuxt UI and Tailwind, content management with Nuxt Content v3, SEO modules, custom module development, NuxtHub databases, and Vue 3 patterns for rapid full-stack prototyping.

Integrate react-native-reanimated-dnd library to implement drag-and-drop interactions, sortable lists, sortable grids, and drop zones in React Native apps using dedicated components, hooks, and configuration options.

Delegate React Native development tasks to an expert agent that analyzes your codebase, creates components matching project patterns, debugs issues like navigation, optimizes performance, and provides architectural guidance for iOS and Android apps.

Automate end-to-end blog production: plan topic clusters and editorial calendars, generate SEO-optimized multilingual posts with AI citations, audit for E-E-A-T/quality/ cannibalization via Google APIs, add images/charts/schema/audio, repurpose for social, and sync CMS taxonomies using 28 skills and 5 agents.

Generate distinctive production-grade frontend UIs for components, pages, or full apps using React, Vue, HTML, CSS, and JavaScript, featuring bold aesthetics, unique typography, custom motion, and layouts that avoid generic AI-generated styles.

Instruct Claude Code to automate browser tasks with Playwright: it auto-detects dev servers, launches a visible browser, runs E2E tests, fills forms, takes screenshots, validates responsive design and UX, handles login flows, checks links, and generates clean scripts in /tmp.

Write and configure React Native Storybook stories in CSF for components, set up Storybook in Expo, CLI, or Re.Pack projects with metro.config.js and WebSockets, incrementally upgrade across versions like 5.x to 10.x converting storiesOf to CSF, and connect to local instances to access UI components, stories, and docs.

Set up WebGPU renderers in Three.js with TypeScript and author shaders using TSL for nodes, compute pipelines, post-processing effects, and WGSL integration to build accelerated 3D graphics applications.

Generate production-grade frontend code for visually strong landing pages, websites, apps, and components using Anthropic and OpenAI design skills. Produce bold aesthetics with unique typography, motion, and layouts in React or Vue, or premium prototypes featuring restrained compositions, image-led hierarchy, and tasteful motion in HTML/CSS/JS.

Generate complete SEO setup for local business websites, producing HTML head with meta/OG/Twitter/geo tags, JSON-LD LocalBusiness schema, robots.txt, and sitemap.xml. Use via skill or command; optionally provide business name or get prompted for details. Tailored for Australian sites.

Convert Figma designs, screenshots, or UI specs into pixel-perfect, responsive code matching your project's components, layouts, styles, interactions, and responsiveness.

Execute 16 specialized slash commands to scaffold SvelteKit projects with TypeScript/Tailwind/auth/DB, generate components/tests/Storybook stories, debug errors/migrate versions, optimize performance, audit accessibility, fix tests, and troubleshoot Storybook setups.

Auto-instrument web apps with Grafana Faro Web SDK for real user monitoring, error tracking, Web Vitals, session replay, and distributed tracing. Detects frameworks like React or Vue, generates and injects init code into your entry point, then opens a GitHub PR for seamless integration.

Build complex React UIs with Tailwind CSS, shadcn/ui components, state management, and routing, then bundle them into standalone HTML artifacts for direct use in Claude.ai.

Design complete UI interaction flows by generating specs with state machine diagrams, micro-animations, gesture patterns, feedback mechanisms, loading states, and error handling strategies. Apply skills for animation principles, UX patterns, and commands like /design-interaction or /map-states to model complex components like forms, media players, or authentication.

Manage shadcn/ui components in React Tailwind projects: add new ones to your codebase, search and browse library, fix bugs and debug issues, customize styles, compose complex UIs, with project-aware context, official docs, usage examples, and enforced Tailwind forms best practices.

Apply 10 pre-set or custom color and font themes to slides, documents, reports, and HTML landing pages for consistent professional styling across output formats.

Develop performant cross-platform UIs with Jetpack Compose and Compose Multiplatform across Android, Desktop, iOS, and Web. Get expert guidance on state management, animations, navigation, Paging 3, Material 3 motion and design systems, Android TV support, design-to-code workflows, and PR code reviews.

Accelerate full-stack TypeScript development by generating NestJS backends with Drizzle ORM, Next.js React frontends with shadcn-ui/Tailwind, React Native mobile apps in Turborepo/Nx monorepos. Review code architecture/security/performance, implement auth/AWS deployment, and get LSP support.

Review and refactor React, Next.js, and React Native code using Vercel engineering best practices for performance optimization, component composition patterns, mobile app efficiency, smooth view transitions, and web UI design/accessibility audits.

Develop cross-platform Rust GUI apps with Makepad 2.0. Generate app boilerplates with Cargo.toml and hot reload, script UIs using Splash DSL for state, events, layouts, and themes, implement animations, shaders, and vector graphics, migrate from v1.x, optimize performance via batching and GC, and troubleshoot rendering bugs, zero-height issues, and WASM builds.

Generate complete Power Apps Canvas Apps in pa.yaml format from requirements using AI planners and parallel screen builders. Edit existing apps via targeted YAML changes orchestrated by edit planners and screen editors. Configure Canvas Authoring MCP server for Claude Code, VS Code Copilot, or GitHub Copilot CLI integration.

Scaffold React/Next.js projects with TypeScript and Tailwind, generate tested components and hooks, analyze bundles to optimize performance, and apply advanced patterns with accessibility best practices.

Scan your project's stylesheets and templates to detect unused CSS selectors, variables, and duplicates with confidence scores and potential bundle savings. Then consolidate by merging redundant rules, unifying properties, grouping media queries, and extracting utilities—reducing file sizes while preserving exact visual output and reporting metrics.

Analyze screenshots and UI images to catalog visual elements, detect layout issues in flex, grid, or CSS, document design details like spacing and colors, flag accessibility problems, and receive targeted implementation suggestions. Extract structured text from images, screenshots, or diagrams, preserving code formatting, hierarchy, and noting low-confidence areas.

Scan web projects for WCAG 2.1 accessibility violations categorized by A/AA/AAA levels with file locations, criterion details, and fix code snippets, then automatically correct ARIA attributes, roles, states using semantic HTML, keyboard handlers, and focus management, including change summaries and tests.

Migrate JavaScript files to TypeScript by inferring types from usage and imports, generating interfaces, generics, and unions, renaming to .ts/.tsx, converting modules, and fixing strict mode compiler errors. Add types to existing weakly-typed files and track coverage plus remaining issues.

Implement mobile-first responsive breakpoints using CSS Grid, Flexbox, Tailwind, and relative units for components or pages. Test designs across iPhone, iPad, Android, and desktop viewports in portrait/landscape orientations, capturing screenshots, detecting layout and accessibility issues, and generating comparison grids with detailed reports.

Analyze JavaScript and TypeScript bundle sizes in webpack and Vite projects to identify top modules, duplicates, and tree-shaking issues, then apply optimizations via config suggestions, named imports, and rebuilds with before-after size reports.

Generate complete frontend components with TypeScript types, accessibility, responsive styling, tests, and exports in detected React, Vue, or Svelte projects. Enhance components by applying project design system styles for base elements, interactions, dark mode, responsiveness, and accessibility, with structured summaries of tokens and breakpoints.

Run Lighthouse audits on target URLs to diagnose performance, accessibility, best practices, SEO, and PWA issues with Core Web Vitals scores and reports. Automatically apply prioritized fixes, verify improvements by re-running audits, and track score changes.

Scaffold full-stack web apps with frontend, backend, database, Docker for local dev, seed scripts, and unified start command, then add pages with React/Next.js routing, API data fetching, SEO metadata, layouts using existing patterns, and loading/error/empty states.

Rapidly prototype ideas by generating standalone, responsive HTML mockups per screen with inline CSS, minimal JS interactivity, and design annotations, or scaffolding minimal viable projects with structure, happy-path code, basic UI, single-run commands, file lists, and production notes.

Launch a local stdio MCP server via npx to access cssstudio for inspecting live web pages, prototyping interactions, designing, editing, previewing, and generating CSS directly in Claude Code. Enables browser automation workflows without secrets or remote setup.

Run local web performance audits via Chrome DevTools Protocol to measure Core Web Vitals like LCP and CLS, identify render-blocking resources, network chains, layout shifts, caching gaps, and accessibility issues, optimizing Lighthouse scores and page loads.

Delegate expert web development tasks in React, Next.js, NestJS stacks with TypeScript and Tailwind CSS to a specialized agent. Analyze code, generate components, debug issues, optimize performance, and get architecture advice tailored to your modern web framework setup.

Control local Chrome browsers via DevTools Protocol to automate web tasks: manage multiple tabs, navigate sites, fill forms, perform clicks and typing, capture screenshots alongside HTML/markdown extracts. Analyze pages read-only in agents by inspecting DOM/CSS/JS, console logs, and executing safe JavaScript.