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.

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.

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.

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.

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.

Format and validate code with Prettier across JS, TS, CSS, JSON, and Markdown files. Check formatting compliance, apply consistent style, and set up pre-commit hooks to enforce code quality standards.

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.

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.

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.

Orchestrate a multi-agent AI dev team in Claude Code to plan TDD implementations, generate code with quality gates, run specialized reviews (security, accessibility, performance, architecture), automate PRs, and handle DevOps/CI-CD setups via slash commands and personas like architect, SRE, and QA engineer.

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.

Enforce a disciplined development workflow in Claude Code: design-first planning, TDD with red-green-refactor, structured debugging, code review gates, parallel subagent execution, isolated Git worktrees, and automated task verification — all routed through workflow hooks for safety and token efficiency.

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.

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.

Orchestrates the full SDLC for solo founders and small teams: an agentic CTO that decomposes features into architecture, code review, QA, and security tasks, enforces compliance audits across 50+ regulated domains, and gates each step with human sign-off — reducing engineering decisions to two per feature.

Implement architecture patterns integrating Three.js, GSAP ScrollTrigger, React Three Fiber, Framer Motion, and React Spring for scroll-driven 3D animations, physics interactions, and performance in React apps. Generate/audit modern CSS designs via commands and consult specialist agents for cohesive experiences.

Implement 2024-2025 modern web design trends like bold minimalism, glassmorphism, micro-interactions, and scrollytelling using CSS/HTML patterns, automated design audits via Python scripts, interactive pattern generation, and specialist guidance for React/Next.js/Vue/Svelte/Tailwind integrations with performance and accessibility focus.

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.

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.

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 components from design prompts using Google Stitch MCP — converting screens into Next.js, Svelte, React Native, or SwiftUI code with built-in accessibility audits, dark mode, and design system management.

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.

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.

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

Create, validate, debug, and publish Claude Code plugins and skills using a structured toolkit with decision trees, schema validation, session reflection, and source verification.

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.

An AI-augmented development pipeline that plans complex features, runs parallel agent implementations, enforces visual regression audits and systematic bug root-causing, and cost-optimizes LLM orchestration across Claude, Codex, and local models.

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.

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 a full AI development team of 36 specialized agents and 32 skills to build, review, debug, and ship production code across modern frontend frameworks. Automate the entire lifecycle: plan features from PRDs, generate code with TDD, run concurrent architecture/security/code reviews, debug systematically, manage git workflows, and deploy with infrastructure-as-code.

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.

Routes every code change through quality gates: lint, types, tests, security, design, and accessibility. Enforces atomic commits, multi-stage review, and spec-driven development with agentic orchestration for fix, plan, ship, and research workflows.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

Design and develop polished interactive frontend experiences using Svelte, with support for animations, 3D, scrollytelling, data visualization, and color/typography systems, enriched by agents that articulate aesthetic direction and validate UX decisions with behavioral research.

Generate, run, and fix Playwright E2E tests with 55+ templates, coverage analysis, flaky test diagnosis, and migration from Cypress/Selenium, plus sync results to TestRail and run on BrowserStack.

Run a complete software development lifecycle workflow inside Claude Code: implement features with architecture design and code exploration, review PRs with multi-agent analysis, audit file changes for security, and validate plugin structure. Includes UI/UX design guidelines, iterative refinement loops, and MCP integrations for Upstash and GitHub Copilot.

Build interactive frontend experiences with animations (GSAP, Lenis), 3D/WebGL (Threlte), scrollytelling, data visualization (D3, Layer Cake), and design system implementation. Bridges creative vision to technical execution with Svelte-first tooling and performance optimization.

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.