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

Generate accessible UI components, build design systems with tokens and patterns, audit WCAG compliance, review designs for usability and performance, and implement responsive layouts for web (React/Vue/Svelte/Tailwind) and mobile (iOS/Android/React Native) apps using specialized skills, commands, and expert agents.

Design and audit production-grade UIs with a craft-first workflow: define design tokens, spacing, depth, and patterns; extract a design system from existing code; audit against that system; detect and strip AI-generated visual slop; and run a strict multi-pass review for approval.

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.

Generate Playwright tests from specs or user stories, migrate Cypress/Selenium suites, fix flaky failures, and report results to TestRail or Slack — all within your existing Playwright workflow.

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.

Format and validate code with Prettier, enforcing consistent style across JS, TS, CSS, HTML, Vue, and Svelte. Check formatting compliance with CI-friendly exit codes, auto-create config files, and guard edits to maintain style

Execute 175 slash commands to automate git workflows like branching/PR creation/issue syncing with Linear, code quality reviews/refactors/fixes, test generation/setup/coverage, CI/CD pipelines, security/performance audits, documentation generation, project scaffolding/setup, and deployments across JS/TS/Python/Go/Rust/Svelte stacks.

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.

Scaffold secure desktop applications using Electron or Tauri, selecting React, Vue, Svelte, or Vanilla frontends. Produces complete project structure with IPC for secure communication between frontend and backend, plus build and packaging setup for cross-platform distribution.

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.

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.

Navigate to Intlayer key definitions, find all references, and inspect hover info for useIntlayer/getIntlayer calls across JavaScript, TypeScript, Vue, Astro, and Svelte files.

Build, edit, validate, and debug Svelte 5 components with LSP code intelligence (diagnostics, navigation, hovers), best practices for runes and reactivity, CLI autofix tools, expert agent for file modifications, and remote MCP access to docs, resources, and templates.

Run self-serve browser-based QA to verify frontend PR changes match ticket acceptance criteria before pushing code. Auto-setup detects dev server ports and routes for supported frameworks, indexes Playwright/Cypress tests, handles auth, and executes automated UI/functionality checks.

Manage the full Storybook workflow from Claude: initialize Storybook in a project, write and review component stories with a strict workflow, preview components in a running dev server, and upgrade Storybook across major versions.

Manage Sanity CMS content and schemas from Claude: deploy schemas with breaking-change detection, generate TypeScript types, migrate content from other CMSs, and query datasets via MCP.

Accelerate SvelteKit app development by invoking skills that deliver patterns for Svelte 5 runes reactivity, data flow with load and remote functions, routing and structure, CSS styling, UI components, template directives, interactive charts, and adapter-based deployments.

Generate compact AMOLED-black UI code for shadcn-ui and Tailwind in React, Vue, or Svelte using Atlas design system tokens, rules, and patterns via AI agents. Build dense dashboards, chats, and admin panels with engineering-grade, framework-agnostic styling.

Discipline Claude Code development with an agentic framework that enforces TDD, structured root-cause debugging, rigorous code review, design-first approval, parallel subagent execution, git worktree isolation, and automatic context compression.

Integrate lightweight Git-backed headless CMS into static sites using Hugo, Jekyll, 11ty, Gatsby, Astro, or Next.js to manage blogs, docs, and i18n content via Git commits. Resolves OAuth errors, TOML/YAML issues, CORS problems, and content listing failures found in Netlify CMS.

Build production-ready ecommerce storefronts applying best practices in UI/UX patterns, SEO, and mobile responsiveness for key pages like checkout, cart, products, navigation, and homepage. Integrates directly with Medusa backend while remaining framework-agnostic for Next.js, React, Vue, or Svelte.

Generate OpenChart VizSpec JSON to create charts, tables, graphs, and sankeys from data in React, Vue, or Svelte, plus edit SVGs for logos, icons, and graphics with path commands, styling, accessibility features, gradients, animations, and optimizations.

Equip Claude Code with 24 domain-specific skills to architect scalable Anthropic AI systems, engineer prompts for LLMs, generate HIG-compliant SwiftUI components, extract engineer expertise from GitHub, manage Git worktrees, optimize database queries, plan QA tests and product launches, and create interactive educational playgrounds.

Orchestrate autonomous AI coding agents to fetch specs from Figma designs, GitHub issues, Linear tickets, or Notion pages; generate structured plans; iteratively implement code in React/Next.js/Vue/Svelte/Astro/HTML or Node/Python/Rust/Go projects; validate with tests/lints; commit changes; create/update PRs/tasks.

Design original software architectures and UI/UX from first principles for innovative solutions in Next.js, Astro, Svelte, Rails, Django, FastAPI, or Hono apps. Accelerate feature ideation, architecture planning, brainstorming sessions, design reviews, and strategy discussions.

Audit frontend UI code, files, directories, or live websites using 15 usability heuristics to identify issues, rate severity from 0-4, generate structured reports with strengths and recommendations, then interactively or automatically implement prioritized fixes and re-evaluate.

Build location-aware applications with AI-driven geospatial tools: integrate Mapbox maps, search, and routing via MCP servers for web, iOS, Android, and agent frameworks.

Build node-based editors, interactive diagrams, flowcharts, graphs, and workflow builders in Svelte applications using Svelte Flow. Set up core components like nodes, edges, controls, and interactivity, then create custom nodes, resizable designs, toolbars, handles, and Tailwind-styled UIs.

Automate E2E browser testing via CLI: explore pages and navigation goals, record interactions into YAML tests, initialize and run tests with AI self-healing and real-time monitoring, verify features or GitHub PR frontend changes with sequential sessions, screenshots, and Markdown reports.

Build cohesive 3D/animation web experiences using multi-library patterns for Three.js, GSAP, Framer Motion, and React Spring, with modern web design guidelines, automated audits, and boilerplate project scaffolding

Conduct conversational UX design workflows: discover needs via guided questions, audit frontend codebases for UX/accessibility/SEO issues with scored reports and fix prompts, preview designs on a local server with named versions, and export specs or React/Svelte/Vue components.

Integrate WorkOS widgets for user management, SSO connections, admin portals, and domain verification into Next.js, React, SvelteKit, Ruby, Python, Go, PHP, Java apps via stack detection and OpenAPI specs. Access guides for implementing and debugging SSO, SAML, MFA, RBAC, Directory Sync across frameworks.

Audit and generate modern web designs with CSS patterns, micro-interactions, and accessibility compliance, guided by an AI agent that implements 2024-2025 trends like glassmorphism and scrollytelling.

Automate closed-loop frontend development in React, Vue, or Svelte: input tasks, get code implementation, dev server launch, Playwright-driven visual/functional testing for auth/accessibility/SEO/UX/security/performance, and iterative AI fixes until validated and production-ready.

Delegate frontend development tasks to an AI agent that builds responsive UIs, dashboards, and components in React, Vue, Angular, or Svelte; fixes mobile responsiveness issues; manages state; ensures accessibility; and optimizes performance for large datasets.

Build pixel-perfect, native-looking mobile UIs for Capacitor apps on iOS and Android using Ionic Framework, Konsta UI, and Tailwind CSS. Handle safe areas for notches, Dynamic Island, cutouts, and home indicators with CSS, JS, and native solutions across React, Vue, Angular, and Svelte.

Migrate Cordova, Ionic Appflow, CocoaPods/SPM, Enterprise SDK, SQLite plugins, and web apps/PWAs to optimized Capacitor setups with Capgo live updates, fast-sql database, framework integrations, and store-ready iOS/Android builds.

Generate, iterate, and ship production-ready UI screens from text prompts or images using Stitch MCP, with automated design system extraction, accessibility audits, and conversion to Next.js, Svelte, React, React Native, or SwiftUI code.

Accelerate full-stack web development with 22 AI-powered commands and 5 specialized agents that analyze codebases, implement features across React/Next.js/Vue stacks, benchmark performance and accessibility, automate testing/cleanup/migrations, generate docs/designs, manage git workflows, and finalize deployments.

Access UI/UX intelligence to plan, design, build, implement, review, fix, improve, and optimize interfaces for websites, dashboards, apps using 50+ styles, 21 palettes, 50 font pairings, 20 charts, and accessibility guidelines tailored to React, Next.js, Vue, Svelte, Tailwind, shadcn/ui.

Apply curated, hand-built design language references (Swiss, editorial, neo-brutalism, etc.) with token systems and anti-slop rules to build or restyle frontend UI that produces distinctive, non-generic aesthetics.

Run an autonomous software engineering cycle: plan, implement, review, test, refactor, bug-hunt, release, and retrospect — through structured multi-agent workflows with quality gates at every stage

Build server-driven SPAs with Rails backend and Inertia.js frontend in React, Vue, or Svelte by applying skills for project setup, architecture patterns, controllers with props and redirects, full-stack forms and validation, page components with layouts and navigation, TypeScript type generation from Ruby resources, shadcn UI adaptations, and RSpec/Minitest response testing.

Run UX regression testing on browser-based and webview apps after E2E tests, catching usability, accessibility, and interface-quality issues with automated journey validation and heuristic checks

Set up Tailwind CSS v4 in frameworks like React, Next.js, Vue, Astro; generate accessible, responsive components and layouts with dark mode, animations, plugins; debug issues; optimize performance with JIT, tree shaking, and best practices for mobile-first designs.

Configure Lightning CSS in Vite for fast CSS transpilation, bundling, minification, vendor prefixing, and modules, replacing PostCSS/Autoprefixer. Set up UnoCSS for on-demand atomic utility CSS generation with Tailwind-like presets and optimized stylesheets in Vite, Nuxt, Astro, or Svelte projects.

Embed framework-agnostic version badges in React, Vue, Svelte, Next.js, or Nuxt apps to display build version, git commit SHA, timestamp, branch, and changelog details in interactive tooltips for debugging and support workflows. Auto-detects Tailwind and shadcn/ui setups.

Automate full greenfield project lifecycle zero-config: from AI-assisted product discovery, brand naming, competitive analysis, architecture vision, use cases, visual/interactive prototyping, expert debates, stress testing (pre-mortems, interviews, PR/FAQ), to scaffolding buildable React/Svelte/Tauri apps with dev environments, visual regression testing, and issue tracking integration.

Work with Svelte 5.0 runes ($state, $derived, $effect, $props), snippets replacing slots, callback props for events, and mount/hydrate APIs in Claude-assisted coding workflows. Auto-loads knowledge patch for accurate code generation, editing, and task handling in Svelte projects without outdated AI limitations.

Bundles over 40 agent skills to orchestrate the full SDLC—turning PRDs into phased plans, driving TDD with tracer-bullet integration tests, hardening code via security audits and a11y scans, managing atomic git commits and PRs, and producing architecture decision records and handoff documents.

Build and maintain Claude Code skills and plugins using guided workflows for creation, validation, and distribution. Analyze session history to extract corrections, discoveries, and failures, then persist updates to skill files. Automatically process a visual scratchpad inbox on every user prompt submission.

Auto-routes development tasks into execution modes (quick fix, plan, ship, research, verify) with quality gates, atomic commits, and multi-stage review. Includes design system management, UI audits, browser automation, security scanning, and code cleanup.

Streamline solo product development: transform ideas into PRDs, user personas, database schemas (MySQL/PostgreSQL with ER diagrams/SQL), UI/UX designs and frontend code (HTML/CSS/JS, React/Vue/Tailwind), technical architectures with deployment strategies, and academic prose—all output to organized docs.

Query a UI/UX design database to retrieve style guides, color palettes, typography pairings, UX guidelines, and framework-specific code snippets for React, Next.js, Vue, Svelte, Tailwind, React Native, or Flutter projects, enabling data-driven design decisions and rapid implementation.

Scaffold and configure complete Better Auth authentication systems in TypeScript/JavaScript apps using Next.js, SvelteKit, Astro. Set up server/client with Prisma/Drizzle/MongoDB/Redis adapters, OAuth providers, email/password flows, 2FA/MFA, and multi-tenant organizations with RBAC and team management.

Orchestrate autonomous multi-agent development pipelines that research, plan, build, audit, test, and deploy production-grade codebases through recursive improvement loops, agent swarms, and structured quality gates.

Streamline solo product development workflows by transforming requirements into technical architectures with deployment strategies, UI/UX designs and frontend code in React/Vue/Tailwind, database schemas for MySQL/PostgreSQL with SQL/scripts/diagrams, PRDs, user personas, and polished documentation including academic prose.

Autonomously scaffold and implement full CE.SDK web apps with photo/video/design editors across React, Vue, Svelte, Angular, Next.js, Nuxt, Electron, and Node.js. Query framework-specific docs, generate custom markdown explanations with diagrams and code examples.

Build scroll-driven narrative experiences called scrollytelling in SvelteKit 5 apps with Svelte 5 runes, enabling sticky backgrounds, IntersectionObserver-triggered steps, and dynamic sections for images, videos, maps featuring fades and text overlays tailored for journalists' stories.

Audit SvelteKit codebases for Svelte 5 best practices violations, including runes ($state, $derived, $effect), $props(), $bindable(), load functions, form actions, and SSR patterns. Get reports with file/line locations, explanations, severity ratings (critical/warning/info), and correct patterns to modernize outdated Svelte 4 code.

Runs a team of 36 AI agents and 32 skills that plan, build, review, debug, test, refactor, and deploy production code across Vue, React, Next.js, SvelteKit, Angular, Astro, and Nuxt projects.

Develop Svelte apps in Claude Code with full LSP support, enabling navigation to definitions, hover documentation, reference finding, error diagnostics, and symbol outlines directly in .svelte files.

Manage server state in React, Vue, Svelte, or Angular apps with automatic caching, background refetching, pagination, infinite scrolling, and optimistic mutations. Fetch data efficiently, handle mutations seamlessly, and keep UI in sync without boilerplate.

Build headless, type-safe forms with sync/async/schema validation using Zod/Valibot adapters across React, Vue, Angular, Svelte, Solid, and Lit. Manage form state without UI lock-in, enabling reusable validation logic in multi-framework projects.

Create framework-agnostic immutable reactive state stores with derived computeds, effects, and batch updates, using adapters that integrate seamlessly with React, Vue, Solid, Angular, or Svelte applications.

Build headless, accessible single- and multi-range sliders with thumb positioning, steps, ticks, and drag logic for React, Vue, Solid, Svelte, Angular, or vanilla TypeScript/JavaScript apps.

Implement TanStack Table v8 headless UI tables and datagrids with sorting, filtering, pagination, grouping, expanding, column resizing, ordering, and row selection across React, Vue, Solid, Svelte, Qwik, Angular, Lit frameworks.

Virtualize massive lists, grids, and tables at 60FPS across React, Vue, Svelte, Angular, Solid, Lit, and vanilla TS/JS by rendering only visible items using headless UI.

Review and build SaaS UIs following 12 research-backed design principles — accessibility, auth flows, data tables, forms, navigation, permissions, error states, performance patterns, theming, notifications, onboarding, and responsive layouts — with actionable code audits and fix suggestions

Integrate Stripe payments into web apps using stripe-pwa-elements by selecting the right component, wiring publishable key and client secret, and handling the submit/confirm flow across plain HTML, React, Vue, Angular, and Svelte.

Query a UI/UX design database to retrieve style guides, color palettes, font pairings, UX guidelines, and framework-specific code snippets for React, Next.js, Vue, Svelte, Tailwind, React Native, and Flutter.

Enforce pixel-perfect frontend discipline in Svelte projects by auto-applying CSS nesting and semantic code styles, validating edits with browser measurements and Playwright screenshots, running post-edit linting and tests, and performing zero-regression migrations via git baselines and research.

Migrate Svelte 3/4 .svelte files to Svelte 5 runes mode through a phased workflow that converts reactive blocks, props, event dispatchers, and slot patterns while handling interop with unmigrated components and avoiding known traps.

Automate Svelte 5 workflows by enforcing code style rules on edits, generating structured JSDoc component docs, wiring Storybook stories as Vitest browser tests with MSW support, previewing stories via Playwright, and creating or fixing unit, SSR, and E2E tests.

Build Svelte-first interactive frontends with animations, 3D/WebGL, scrollytelling, data visualization, and design systems. Agents assist with creative direction, technical architecture, visual design decisions, and UX research. Includes a safety hook to prevent overwriting canonical project files.

Orchestrate the full software development lifecycle within Claude Code: generate plugins, run TDD loops, automate multi-agent code and design reviews, analyze codebase architecture, enforce file-write policies, and connect to external MCP services for RAG and GitHub Copilot integration.

Engineer Svelte-first interactive frontend experiences with animations (GSAP, Lenis), 3D/WebGL (Threlte), scrollytelling, data visualization (D3, Layer Cake), and headless UI (Melt), guided by creative direction, design system implementation, and UX research, with performance rules and bun tooling.

Detect your frontend project's tech stack and generate expert code patterns for building accessible, responsive UIs with proper component hierarchies, composition patterns like render props and custom hooks, multi-layer state management from local UI to server-side with Zustand/Redux/TanStack Query, and WCAG-compliant features like ARIA and keyboard navigation.