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.

Design and iterate production-grade frontend interfaces through live browser iteration, UX audits, visual refinement, and design system work.

Make intentional visual design decisions for UI builds and redesigns — choose aesthetic direction, typography, and layout that avoid templated defaults.

Control Chrome programmatically through the DevTools Protocol via MCP — debug web pages, automate browser interactions, run performance and accessibility audits, capture screenshots, and diagnose memory leaks, all from an AI assistant.

Guides Next.js developers through implementing Cache Components and Partial Prerendering (PPR) with patterns for the 'use cache' directive, cacheLife, cacheTag, and cache invalidation, auto-activating in projects configured with cacheComponents: true

Build production-grade React/Next.js frontends and cross-platform mobile apps (React Native, Flutter) with component architecture, state management, design systems, and automated scaffolding for UI, tests, and accessibility.

Develop full-stack JavaScript and TypeScript projects with ES6+, Node.js APIs (Express/Fastify), and modern frontend frameworks. Includes testing with Jest/Vitest, advanced TypeScript types, and project scaffolding for Next.js, React, or Node services.

Generate algorithmic art manifestos as p5.js sketches, build Godot 4 games with GDScript patterns, develop Unity games with optimized C# and URP/HDRP pipelines, and apply 2D/3D game development and design principles for indie game prototyping.

Design and build immersive web experiences with mobile-first, scroll-driven animations, 3D elements, and production-grade interfaces, guided by aesthetic principles and UX/UI best practices.

Accelerate full-stack development with 66 specialized skills covering 12 languages, frontend/backend frameworks, infrastructure, DevOps, security, and testing, plus Jira/Confluence project management commands for epic planning, discovery, and retrospectives.

Creates and presents web-based slidedecks from Markdown using Slidev, with Vue components, code highlighting, animations, and interactive features for technical presentations, conference talks, code walkthroughs, or teaching materials.

Automate SEO content strategy and optimization—from keyword research and article generation to structured data validation and content structure analysis—to improve search rankings.

Enforce award-winning UI/UX design taste in frontend projects, generating premium brand images, brutalist web interfaces, editorial layouts, and mobile app concepts while upgrading existing designs with strict typography, color, and spacing rules.

Drive creative direction with algorithmic design manifestos, generative p5.js art, brand voice optimization, and portfolio interfaces that convert visitors to clients.

Build, deploy, and optimize Expo React Native apps for iOS and Android with EAS workflows, API routes, Tailwind CSS styling, and production release management including app store submissions and OTA updates.

Write HTML and render it as video with animated compositions, captions, voiceovers, audio-reactive visuals, and website-to-video capture, all driven by a CLI dev loop and deployable to AWS Lambda.

Frontend development bundle that optimizes forms for higher conversion, designs distinctive interfaces, enforces Next.js App Router best practices, applies 45 React performance rules, provides modern React patterns, diagnoses SEO issues, and configures Tailwind CSS v4 design tokens.

Execute marketing and growth workflows including A/B testing setup, SEO diagnostics and optimization, analytics tracking audit, programmatic SEO strategy, and automated content/email campaign creation with brand voice analysis.

Provide expert guidance for building, debugging, and optimizing TypeScript and JavaScript applications with modern frameworks like Next.js and Node.js, covering ES6+ patterns, React performance, App Router, framework selection, and advanced type-level programming.

Guides full-stack development with opinionated architecture for Node.js/Express backends, React/Next.js frontends, database schema design, API decisions (REST/GraphQL/tRPC), and Stripe payment integration, plus Python scaffolding and code quality scripts.

Scaffold, build, and deploy Makepad Rust UI apps with boilerplate generation, widget and layout code, shader creation, event handling, and cross-platform packaging for desktop, mobile, and WASM via GitHub Actions.

Add commerce and payment workflows to Claude Code projects: Stripe and PayPal payments, Plaid financial data integration, HubSpot CRM, and Algolia search — enabling subscriptions, checkout, and customer management.

Build and manage end-to-end data analytics workflows: implement A/B testing with statistical rigor, design reliable analytics tracking, create interactive D3.js visualizations, architect scalable database schemas, and optimize SQL for cloud-native databases.

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.

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.

Audit designs for WCAG compliance, critique UI usability, generate developer handoff specs from Figma, manage design system tokens, synthesize user research, and write UX copy — all within a design-to-development workflow.

Build and integrate AI copilot features into web apps using CopilotKit v2, with full support for chat interfaces, agent-to-frontend communication, multiple agent frameworks, and runtime setup in React, Next.js, and other JS frameworks

Audit and maintain a live design system across dashboards and tool UIs — extract tokens, check for spacing/color/depth violations, and regenerate patterns from existing code without writing CSS by hand.

Bridge Figma design files with Claude Code to create and update design system components, generate Figma files, translate designs to SwiftUI code, and build FigJam boards — all from natural language commands.

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.

Generate and edit images using GPT Image 2 and OpenAI-compatible endpoints with 70+ structured prompt templates across 18 categories, plus build polished visual web artifacts like pages, dashboards, prototypes, slide decks, and data visualizations using HTML/CSS/JavaScript/React.

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 any website's complete design language — colors, typography, spacing, shadows, motion, and voice — and output DTCG tokens, Tailwind/shadcn/Figma variables, CSS, and a visual preview. Grade consistency, battle two sites, remix in six design vocabularies, recolor via OKLCH, generate brand guidelines, and rebuild pages for pixel-diff fidelity checks.

Guides Claude on implementing virtualized lists, chat message lists, and data tables using react-virtuoso in React applications.

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.

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.

Build and manage PortalJS data portals: recommend an architecture, scaffold a portal, add datasets (CSV/TSV/JSON/GeoJSON), create charts (recharts) and interactive maps (Leaflet), connect a CKAN backend, harvest datasets from open-data platforms, infer data schemas, audit data quality, and deploy to PortalJS Arc hosting.

Build and publish Chrome extensions with Manifest V3 while staying current with modern web development best practices, performance optimization, and new browser APIs

Build Vizro dashboards end-to-end: design layouts and visualizations, implement with Python and YAML, then automate end-to-end testing with Playwright.

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

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.

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.

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.

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.

Build full-stack Nuxt 4+ applications with authentication, SEO, CMS content management, UI components, database access, and deployment to Cloudflare or Vercel, while also providing Vue 3 patterns, 3D scenes, game development, TypeScript library authoring, and testing workflows.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Automates the full software development lifecycle within Claude Code: orchestrating multi-agent code reviews, debugging, refactoring, security auditing, testing, and documentation generation with tool-assisted workflows for git, linting, builds, and architecture design.

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.

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.

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.

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.

Full-stack TypeScript development with NestJS backends, Next.js frontends, and React Native mobile apps using Drizzle ORM, AWS CDK/Lambda, shadcn/ui, Turborepo/Nx monorepos, and automated code reviews, security audits, and deployment pipelines.

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.

Enforce cross-language coding standards and automate development workflows—code review, commit message generation, project scaffolding, optimization scans, and documentation—by configuring Claude Code and other AI assistants with contextual rules, skills, and commands for Java, Go, Python, TypeScript, Vue, React, Docker, and Redis.

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 self-contained HTML documents for system architecture diagrams, structured plans, and themed reports with dark mode support.

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.

Build Android, Flutter, and web UIs following Material Design 3 guidelines with ready-to-use components, tokens, adaptive layouts, theming, and accessibility support.

Develop Flutter UIs with the Mix styling framework — write type-safe style specs, compose fluent Stylers, resolve variants, and generate code using melos commands.

Provides 48 domain-specific skills and 9 agents for Godot 4.x game development in GDScript and C#, covering 2D/3D systems, animation, AI, UI, multiplayer, performance optimization, and editor tooling.

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.

Generate high-fidelity HTML design artifacts like prototypes, landing pages, UI mockups, and animations, with Playwright-powered browser rendering and screenshot verification for pixel-perfect output.

Generate accessible, responsive UI design systems with color palettes, tonal scales, typography scales, spacing systems, layout grids, and visual hierarchies from brand inputs or descriptions. Use commands to design full screens, create type systems, produce palettes with dark mode variants, and audit responsiveness across breakpoints.

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 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.

Provides an extensive collection of Claude Code configs including agents, skills, hooks, and commands for TDD workflows, code reviews, security audits, database migrations, API design, deployment automation, documentation generation, and multi-model orchestration evolved from real-world daily use

Provides expert guidance for Jetpack Compose, Kotlin, and Android development, covering animation selection, focus navigation, layout conventions, recomposition debugging, state management, side effects, UI testing, and Multiplatform architecture. Also includes a skill that automatically shepherds open pull requests by triaging reviews, fixing CI failures, and pushing autofix commits.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

Accelerate website creation and optimization with 103 structured skills spanning research, brand strategy, design, content, SEO, analytics, performance, security, and deployment—each providing expert-level prompts for tasks like auditing accessibility, fixing Core Web Vitals, conducting competitive analysis, running experiments, and managing incident response.

Build, manage, and deploy the full Salesforce platform stack — Apex, OmniStudio, Data Cloud, Agentforce agents, Lightning Web Components, UI bundles, flows, metadata, and mobile apps — with code generation, validation scoring, debugging, documentation retrieval, and CLI-driven deployment.

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.

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.

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.

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.