Svelte plugins

Design and build production-grade interfaces with strong visual hierarchy, design tokens, and craft review. Guides through intent, palette, typography, and spacing decisions; audits UI code for design system violations; extracts design patterns; strips AI-generated visual tells; and scores visual craft against an approval bar.

Build and optimize GSAP animations with AI guidance across React, Vue, Svelte, and vanilla JS — covers tweens, timelines, ScrollTrigger, plugins, performance, and framework-specific patterns.

Render JSON UI/document specs to web, mobile, terminal, PDF, images, video, and email. Supports React, Vue, Svelte, Next.js, Remix, React Native, and state management adapters. Enables AI-generated UIs and component catalogs.

Build interactive UIs for MCP servers using the MCP Apps SDK, with scaffolding for React, Vue, Svelte, or vanilla JS, and migration paths from OpenAI Apps SDK.

Scaffold and extend full-stack TypeScript monorepos using Better-T-Stack, with an agent that designs a valid stack from a product description and an MCP server that generates project files or adds addons like PWA, Tauri, and Biome.

Manage skills, agents, and commands for Claude Code with a unified hub that provides 150+ capabilities including code review, TDD enforcement, git workflows, UI/UX design guidance, Remotion video creation, document generation, multi-agent orchestration, context optimization, and social media publishing.

Convert Figma designs and screenshots into production-ready, accessible React or Svelte components via a local MCP server.

Provides a comprehensive suite of Svelte and SvelteKit development commands for scaffolding projects, generating components and tests, debugging, migrating versions, optimizing performance, and integrating Storybook with accessibility audits.

Scaffold accessible frontend components with tests and auto-detected framework conventions, then apply design tokens for responsive styling with dark mode support.

Add haptic feedback to buttons, toggles, forms, pickers, and other interactive elements in web apps, targeting mobile UIs with tactile interactions.

Assembles a virtual design team of 26 specialist roles (UI, UX, brand, motion, data viz, email, social, accessibility, compliance, spatial, conversational, and more) inside the terminal. Generates production-ready UI code, Figma components, design tokens, accessibility audits, brand kits, email campaigns, social media content, data visualizations, presentations, and print artifacts from natural-language requests.

Auto-instrument any web app with Grafana Faro Web SDK for frontend observability. Detects your framework (React, Next.js, Angular, Vue, Svelte), generates initialization code, wires it into your entry point, and opens a PR.

Navigate and inspect Intlayer i18n keys with go-to-definition, find references, and hover information across JavaScript, TypeScript, Vue, Astro, and Svelte files.

Manage Sanity CMS content, schemas, and queries from Claude Code: design structured content models, write GROQ queries, generate TypeScript types, deploy schemas, migrate content from other CMSes, and implement Visual Editing, SEO, and A/B testing workflows.

Manage the full Storybook workflow—initialize, configure, upgrade, and write stories for UI components, then query component metadata via an MCP proxy.

Develop Svelte 5 applications with language server support, documentation access, best practices guidance, and automated code fixes for .svelte files and components.

Generate Svelte components, scaffold projects, and query Svelte documentation using AI-powered tools integrated into Claude Code.

Automates browser-based QA for pull requests by detecting your frontend framework, indexing routes and test selectors, then running Playwright against acceptance criteria before you push.

Build ecommerce storefronts with UX/UI patterns, SEO, mobile responsiveness, and Medusa backend integration, supporting carts, checkout, products, navigation, and homepages

Write Svelte 5 and SvelteKit apps with guided patterns for runes, templates, CSS, data loading, routing, deployment, and third-party UI integration, including reactive state, server/client data flow, form actions, error handling, and production builds.

Build location-aware applications with Mapbox maps, geocoding, directions, and data visualization across web (React, Vue, Angular, Svelte, Next.js) and mobile (Android, iOS, Flutter). Includes AI agent integration via MCP for geospatial queries and style management.

Generates UI code in a dense AMOLED-black design system using framework-agnostic tokens and component classes for shadcn, Tailwind, React, Vue, and Svelte stacks.

Lets developers architect software and design UI/UX from first principles, enabling genuinely new solutions rather than derivative work. Useful for feature design, app architecture, brainstorming, design reviews, and strategy discussions.

Manage content for static sites with a lightweight Git-backed headless CMS. Supports blogs, documentation, i18n, and resolves common OAuth, TOML/YAML, and CORS errors. Integrates with Astro, Next.js, and other static site generators, deployable to Vercel and Netlify.

Build production-grade UI components, dashboards, and internal tools from design specs, with built-in audits for performance, accessibility, and code quality across modern frontend frameworks.

Detect your project's framework stack and version from package.json and configs, then surface framework-specific best practices, patterns, and guidelines for React, Vue, Svelte, and Next.js.

When asked to 'understand this frontend', map its component tree, routing, state management, and build config, then assess bundle size, dependency freshness, test coverage, and TypeScript strictness.

Generate internal dashboard UIs with data tables, sorting, filtering, pagination, row actions, bulk operations, detail views, and CRUD for admin panels and back offices.

Scan frontend code to map existing routes, components, navigation, and UX patterns before starting redesign or wireframing. Helps understand current UI state by analyzing project structure and component hierarchy.

Audit front-end code or live websites against 15 heuristic design principles, producing severity-ranked reports with fix recommendations, and optionally auto-apply high-severity usability fixes.

Build node-based editors, interactive diagrams, and workflow builders with Svelte Flow, including custom nodes, edges, handles, and Tailwind-styled components.

Orchestrate autonomous coding agents to build software from specs — fetch designs (Figma) or tickets (GitHub, Linear, Notion), auto-generate implementation plans, write code, run validation, and commit changes.

Role-based development workflow (PM→Lead→Designer→Dev→QA) with 44 commands, 19 skills, 8 agents, and 30 hook scripts for autonomous coding, testing, security review, documentation sync, and context management across multiple languages and frameworks.

Build native-looking Capacitor mobile apps with Ionic, Konsta UI, and Tailwind CSS, handling safe areas for iPhone notches, Dynamic Island, and Android cutouts across React, Vue, Svelte, or Angular.

Migrate web apps, Cordova/PhoneGap projects, and Ionic Appflow apps to Capacitor, including CocoaPods-to-SPM, Ionic Enterprise SDK replacement, and SQLite plugin migration to @capgo/capacitor-fast-sql

Autonomous closed-loop frontend development with visual testing and iterative refinement. Parses tasks, implements changes, runs Playwright browser tests, and applies fixes until validation passes. Includes authentication, accessibility, SEO, and design audits.

Conduct conversational UX design with live preview, audit frontend code for UX/accessibility/SEO issues, and export design specs and components for React, Vue, Svelte.

Generate production-ready UI from text prompts or PRDs using Stitch MCP, then export to Next.js, Svelte, React, React Native, or SwiftUI with built-in accessibility audits, design system extraction, and animation support.

Generate and review UI/UX code across 50+ design styles, 21 color palettes, 50 font pairings, and 20 chart types for React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, and Flutter projects, with built-in accessibility, layout, and performance rules.

Orchestrate multi-phase codebase audits, code reviews, and project execution with autonomous agents, slash commands, and lifecycle hooks. Enforce design-system compliance, accessibility standards, and architectural boundaries across full-stack projects. Manage knowledge graphs, specs, roadmaps, and post-mortems with persistent state tracking.

Build Rails applications with Inertia.js using established architecture patterns, type-safe props via Alba/Typelizer, and adapted shadcn/ui components for React, Vue, or Svelte.

Build full-stack Astro 6/7 sites with Islands Architecture, Content Layer API, Server Actions, Astro DB, multi-framework integration, image optimization, SEO, and Starlight documentation. Deploy to Vercel, Netlify, Cloudflare, or Node.js. Enforce clean architecture with SOLID principles.

Manage Netlify deployments, serverless functions, edge functions, forms, identity, image CDN, blobs, caching, and AI gateway from Claude Code. Configure site settings, deploy frameworks, provision managed Postgres databases with Drizzle, and build custom MCP servers on Netlify Functions.

Orchestrate autonomous software engineering workflows across planning, implementation, code review, bug hunting, refactoring, QA, and release management using a suite of specialist agents and structured thinking skills.

Optimize CSS with Lightning CSS transpilation and minification, and generate on-demand atomic CSS with UnoCSS and its presets, integrated into Vite, Nuxt, Astro, or Svelte projects.

Build generative UI apps with OpenUI across any LLM provider and backend language. Scaffold projects, integrate streaming responses, and validate the full stack with a 10-step pipeline.

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

Add a version badge UI component that displays build version, git commit SHA, branch, timestamp, and recent changelog in a tooltip, auto-detecting Next.js, Nuxt, SvelteKit, Tailwind, and shadcn/ui frameworks.

Build and debug Tesseron-powered web apps with typed actions over WebSocket — scaffold projects, map codebases, audit for framework-specific defects, and look up protocol specs on demand.

Navigate and build the spences10 Claude Code ecosystem: select tools via decision trees, create and validate skills with progressive disclosure, research sources by fetching live content, and reflect on session history to persist learnings. Includes a Bedrock rate limiter hook for cost control.

Build, deploy, and migrate Prismatic custom components and Code Native Integrations, embed the marketplace and workflow builder into web apps, and manage the Prismatic platform via CLI, agents, and MCP tools

Build, scaffold, and configure IMG.LY CreativeEditor SDK (CE.SDK) web projects across React, Vue, Svelte, Angular, Next.js, Nuxt.js, SvelteKit, Electron, and Node.js. Looks up framework-specific reference docs, generates explanations with diagrams, and autonomously scaffolds complete photo/video/design editors.

Orchestrates disciplined agentic development with auto-routing to execution modes (quick fix, plan, ship, research, verify), XML spec decomposition, atomic commits, multi-stage code review, quality gates, and a plugin system for UI design, browser testing, documentation, and security auditing.

Accelerates solo product development by generating academic writing, database schemas, product requirements documents, technical architecture plans, and UI/UX designs from natural language input

Build and configure Litestar web applications with opinionated patterns for routing, DTOs, authentication, dependency injection, HTMX, Inertia.js, real-time features, API endpoints exposed as MCP tools, background task queues (SAQ, Litestar QueuePlugin), and production deployment on Docker, Kubernetes, or Cloud Run

Guides greenfield product development from concept to validated prototype with AI-assisted discovery, brand naming, architecture vision, use case authoring, interactive prototyping, visual testing, and environment setup — all through a structured pipeline with decision gates and expert reviews.

Keeps Claude Code up-to-date with Svelte 5.0 changes (runes, snippets, callback props, mount/hydrate API) for accurate code generation, analysis, and assistance when working with modern Svelte projects.

Build fast content-driven Astro sites with islands architecture, content collections, view transitions, SSR adapters, i18n, sessions, and server actions. Includes a step-by-step guided tutorial for building a personal blog with Claude as a co-pilot.

Search a data-driven UI/UX design database for styles, color palettes, font pairings, UX guidelines, and stack-specific code in React, Next.js, Vue, Svelte, and Tailwind, then receive design intelligence recommendations for your frontend projects.

Plan and build a full-stack product on your own: generate PRDs, design database schemas with SQL scripts and ER diagrams, choose tech and architecture, craft UI layouts and production frontend code, and write polished academic or technical prose in English or Chinese.

Add Svelte language server integration to Claude Code, enabling diagnostics, go-to-definition, find references, hover info, and symbol navigation for .svelte files.

Scaffold and configure Better Auth in JavaScript/TypeScript projects across frameworks like Next.js, SvelteKit, and Astro — handles database adapters (Prisma, Drizzle, MongoDB), OAuth providers, email/password auth, multi-tenant organizations with RBAC, and 2FA/MFA flows, including TOTP and backup codes.

Build scroll-driven narrative experiences (scrollytelling) in SvelteKit 5 using sticky backgrounds, IntersectionObserver steps, fades, text overlays, and embedded media sections

Enforce Svelte 5 best practices in SvelteKit projects, including runes ($state, $derived, $effect), load functions, form actions, and SSR patterns, and scan for anti-patterns with file-level diagnostics and severity ratings.

Get code intelligence for Svelte files in Claude Code: diagnostics, go-to-definition, find references, hover docs, and symbols for .svelte components.

Build headless, accessible range and multi-range sliders with thumb positioning, steps, ticks, and drag logic across React, Vue, Svelte, Angular, and vanilla TS/JS.

Manage server state with automatic caching, background refetching, pagination, infinite scrolling, and optimistic updates for React, Vue, Svelte, and Angular applications.

Build interactive, headless tables and datagrids with sorting, filtering, pagination, grouping, expanding, column resizing/ordering, and row selection across React, Vue, Angular, Svelte, and other frameworks.

Manage form state and validation across React, Vue, Angular, Svelte, Solid, and Lit with type-safe, headless APIs and schema adapters for Zod and Valibot.

Manage immutable reactive state across frontend frameworks using stores, derived computeds, effects, and batch updates, with adapters for React, Vue, Angular, and Svelte.

Virtualize large lists, grids, and tables at 60FPS by rendering only visible items with a headless UI approach for TypeScript/JavaScript and major frameworks like React, Vue, Svelte, and Angular.

End-to-end SvelteKit development pipeline: convert conversations to issue slices, triage, build features in isolated worktrees, commit, PR, review for SvelteKit patterns, and merge with human approval. Includes visual testing agent.

Orchestrate multi-agent development pipelines with 80 specialized agents, 41 commands, and 18 hooks for autonomous code audits, recursive quality upgrades, security hardening, UI/UX redesign, research, and deployment across any codebase.

Integrate Stripe payments into web apps using the stripe-pwa-elements library, covering component selection, installation, wiring Stripe keys and client secrets, and the submit/confirm flow.

Get data-driven UI/UX design intelligence with style guides, color palettes, font pairings, and framework-specific code snippets for React, Next.js, Vue, Svelte, Tailwind, React Native, and Flutter.

Orchestrates a full-stack development workflow using specialized agents for product management, design, architecture, development, testing, and deployment, with automated task planning, TDD enforcement, code review, and marketing documentation generation.

Engineers interactive frontend experiences with animations (GSAP, Lenis), 3D/WebGL (Threlte), scrollytelling, data visualization (D3, Layer Cake), and design systems (typography, color, spacing). Includes agents for aesthetic direction, technical architecture, visual design implementation, and UX research validation.

Accelerate full-stack development with AI agents, commands, and skills for TDD, code review, architecture design, refactoring, UI/UX, security, git workflows, and incident response, plus plugin development tools and MCP integrations for external services

Design and build interactive frontend experiences with animations, 3D/WebGL, scrollytelling, and data visualization using Svelte, Astro, and D3. Includes agents for aesthetic direction, technical architecture, design system implementation, and UX research validation.

Enforces strict frontend code quality with CSS nesting, pixel-perfect measurement via Playwright, automated validation (linting, typechecking, testing), and safe framework upgrades using git baselines and regression tests.

Develop Svelte 5 components with enforced code conventions, auto-generated documentation, and integrated browser-based testing using Storybook and Vitest.

Migrate Svelte 3/4 components to Svelte 5 runes with phased conversion of reactive blocks, props, event dispatchers, and slot patterns, including interop rules for unmigrated components.

Build accessible, responsive UIs for web and mobile with design systems, WCAG-compliant components, and platform-native patterns for iOS, Android, React Native, and web frameworks.

Auto-detect your project's frontend stack and get expert guidance on component architecture, state management, responsive design, and WCAG-compliant accessibility patterns.

Convert web applications to cross-platform Electron desktop apps, handling packaging with electron-builder, native module rebuilds, path resolution, and secure credential storage. Automates the full conversion process and provides debugging for common runtime issues.

Orchestrates full-stack development with multi-agent workflows, skill-based task decomposition, and automated code review. Covers database schema design, API endpoints, UI components, authentication, deployment, testing, and security auditing across React, Vue, and Svelte stacks.

Build, test, and deploy cross-browser extensions for Chrome, Firefox, Safari, and Edge with support for Manifest V3, WebAssembly integration, and store submission. Includes scaffolding, validation, debugging, and security auditing.