162 Claude Code skills tagged Svelte. Browse all topic-related skills in the open ClaudSkills registry — free to install, one-click via the desktop app.
Showing all 162 skills.
Validate code against accessibility standards: WCAG 2.1 Level AA, EN 301 549, and the European Accessibility Act (EAA / Directive EU 2019/882). Covers semantics, text alternatives,
product
Clone any website with a coordinated team of AI agents — a Manager (you), a Frontend Developer, a Backend Architect, and a Tester — that iteratively and autonomously build a pixel-
engineering
Use when adding state management to a module - creates Svelte store with server state integration.
engineering
Implement or refactor Next.js frontend features with Tailwind and Skeleton UI. Covers App Router, Server Components, Server Actions, Skeleton themes and components, layout patterns
engineering
Use when switching a project or component between frameworks - React to Vue, Vue to Svelte, or any supported framework pair.
engineering
Validate code against SEO best practices: W3C semantics, meta/OG tags, Schema.org, hreflang, Core Web Vitals (LCP/INP/CLS), resource hints, GEO, SPA/SSG/CSR crawlability, technical
growth
Comprehensive Svelte 5 assistant — component generation with runes syntax, code review, debugging, and SvelteKit patterns. Use when working with .svelte files or Svelte/SvelteKit p
engineering
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui — from si
product
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when aud
product
Automated WCAG 2.1 AA accessibility testing with axe-core and Lighthouse CI. Auto-detects frontend framework (React, Next.js, Vue, Angular, Svelte, Astro, Flutter, React Native), d
product
Adds a generation parameter across MooshieUI's Svelte store, TypeScript types, Rust GenerationParams, and workflow templates. Use for new UI settings, ComfyUI inputs, or /add-gener
engineering
Build full-stack web applications with SvelteKit — file-based routing, SSR, SSG, API routes, and form actions in one framework. Use when you need help with sveltekit. — from anubha
engineering
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui — from si
product
Builds accessible UI components with Ark UI headless primitives for React, Vue, Solid, and Svelte. Use when creating custom-styled components with robust state management and acces
product
Production frontend craftsman for React/Vue/Svelte. Handles hooks design, state management, Server Components, form handling, and data fetching. Converts Forge prototypes to produc
product
Astro is a modern web framework for building content-driven websites. It ships zero JavaScript by default, supports multiple UI frameworks (React, Vue, Svelte, Solid), and provides
content
Astro framework specialist for building fast, content-driven websites with islands architecture. Use when creating Astro components, configuring hydration (client:load/idle/visible
engineering
Expert Astro UI framework integrations — @astrojs/react, @astrojs/vue, @astrojs/svelte, @astrojs/solid-js, @astrojs/preact, @astrojs/alpinejs, @astrojs/lit, @qwikdev/astro, @analog
engineering
Use when building content-heavy sites with Astro, deciding between SSG/SSR/hybrid, choosing client directives (idle/visible/load/media), structuring content collections with type-s
engineering
Gunakan skill ini saat bekerja dengan frontend QuantLab (Astro 5, Svelte 5 Runes, shadcn-svelte, SciChart.js, Tailwind v4). Mencakup: tambah komponen, buat halaman baru, integrasi
engineering
Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 15 documented errors including React 19 StrictMode bugs, SSR imports, con
engineering
Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 15 documented errors including React 19 StrictMode bugs, SSR imports, con
engineering
XBG Boilerplate SvelteKit — master reference for the SvelteKit 5 boilerplate project
tools
Use when building or running SvelteKit apps on Bun, including SSR, adapters, and Bun-specific APIs — from engineering/frontend
engineering
Use when building or running SvelteKit apps on Bun, including SSR, adapters, and Bun-specific APIs — from engineering/frontend
engineering
Build Chrome extensions using WXT framework with TypeScript, React, Vue, or Svelte. Use when creating browser extensions, developing cross-browser add-ons, or working with Chrome W
engineering
Enforces the use of classes for complex state management (state machines) in Svelte components. Applies specifically to `.svelte.ts` files.
engineering
Expert guidance for deploying TypeScript SvelteKit apps to Cloudflare Workers (edge) with D1. Use when configuring @sveltejs/adapter-cloudflare, Wrangler config, Workers Assets, D1
engineering
Framework integration for Cloudflare Workers. Use when building with Hono, Remix, Next.js, Astro, SvelteKit, Qwik, or Nuxt on Workers. Covers routing, SSR, static assets, and edge
engineering
Reverse-engineer any codebase into a complete Product Requirements Document (PRD). Analyzes routes, components, state management, API integrations, and user interactions to produce
product
Comark (Components in Markdown) parser — syntax, AST, Vue/React/Svelte renderers, plugins, and LLM streaming with auto-close.
engineering
Generate a UI component scaffold in the codebase's actual style. Reads dragoon.json to match framework (react/vue/svelte), styling layer (tailwind/css-modules/plain), language (typ
engineering
Generates starter component code using design tokens. Creates React/Vue/Svelte components with proper token usage, variants, and accessibility built in.
tools
Vitest browser mode component testing. Use for testing Svelte 5 components with real browsers, locators, accessibility patterns, and reactive state.
engineering
Data visualization and chart components for Composable Svelte. Use when creating charts, graphs, or data visualizations. Covers chart types (scatter, line, bar, area, histogram), d
engineering
Streaming chat and collaborative features for Composable Svelte. Use when implementing LLM chat interfaces, real-time messaging, or collaborative features. Covers StreamingChat (tr
engineering
Code editing, syntax highlighting, and visual programming for Composable Svelte. Use when implementing code editors, syntax highlighting, or node-based visual programming. Covers C
engineering
UI component library reference for Composable Svelte. Use when implementing designs, choosing components, styling layouts, or working with shadcn-svelte components. Covers componen
engineering
Core architecture patterns for Composable Svelte. Use when creating stores, writing reducers, working with effects, composing reducers, or implementing business logic. Covers the S
engineering
Production deployment patterns for Composable Svelte SSR applications. Use when deploying to Fly.io, Docker, or any cloud platform. Covers multi-stage Docker builds, Fly.io configu
engineering
Form patterns and validation for Composable Svelte. Use when building forms, validating user input, or integrating Zod schemas. Covers FormConfig, createFormReducer, field-level va
engineering
3D graphics and WebGPU/WebGL rendering with Composable Svelte. Use when building 3D scenes, working with cameras, lights, meshes, materials, or implementing WebGPU/WebGL graphics.
engineering
Internationalization (i18n) system for Composable Svelte. Use when implementing multi-language support, translations, date/number formatting, locale detection, or localizing applic
engineering
Audio, video, and voice components for Composable Svelte. Use when implementing audio players, video embeds, or voice input. Covers AudioPlayer (Web Audio API), VideoEmbed (YouTube
engineering
Navigation and animation patterns for Composable Svelte. Use when implementing modals, sheets, drawers, alerts, navigation flows, or component lifecycle animations. Covers state-dr
engineering
Server-side rendering patterns for Composable Svelte. Use when implementing SSR, hydration, server rendering, isomorphic code, or working with meta tags and SEO. Covers renderToHTM
engineering
Testing patterns for Composable Svelte. Use when writing tests, using TestStore, mocking dependencies, or testing reducers and effects. Covers the send/receive pattern, mock implem
engineering
Fetch up-to-date library documentation via Context7 REST API. Use when needing current API docs, framework patterns, or code examples for any library. Use when user asks about Reac
engineering
Generate an offline-first Progressive Web App with Odoo Studio backend integration. Use when user wants to create new Odoo-backed application, mentions "PWA with Odoo", "offline Od
engineering
CRXJS Chrome extension development — true HMR for popup, options, content scripts, side panels, manifest-driven builds, dynamic content script imports (`?script`, `?script&module`)
tools
Modern UI design principles and guidelines for building clean, professional interfaces. Use when creating any UI components, layouts, web pages, or interactive elements including b
engineering
Crée des composants React/Vue/Angular/Svelte optimisés et réutilisables. Se déclenche avec "composant React", "component", "Vue component", "Angular component", "Svelte" — from eng
engineering
Développement d'applications Svelte et SvelteKit avec réactivité native, stores, SSR, routing et transitions. Se déclenche avec "Svelte", "SvelteKit", "store Svelte", "ré — from en
engineering
通过 Context7 MCP 获取库和框架的实时最新文档，而非依赖训练数据，防止 API 幻觉。适用于查询任何库或框架的用法、配置、示例代码。触发词：怎么用、怎么配置、API参考、文档、示例代码、用法、接口、库文档、框架文档、documentation、docs、how to use、API reference、setup、configure、React怎
engineering
Look up CE.SDK Svelte reference docs, guides, and configuration pages.
engineering
Look up CE.SDK SvelteKit reference docs, guides, and configuration pages.
engineering
GLATasks の e2e テスト（Playwright）実装リファレンス。 `app/tests/` 配下のテストファイルを編集するとき、または SvelteKit の hydration パターン・ ダイアログ操作・マルチブラウザ同期テスト・SSE 制御を扱うときに呼び出す。
engineering
Audit and fix SEO for any web app. Checks meta tags, Open Graph and Twitter Card tags, JSON-LD structured data, robots.txt, sitemap.xml, canonical URLs, heading hierarchy, internal
science
FilePond is a JavaScript file upload library that handles files, directories, URLs, and Data URIs with drag-and-drop, paste, and API support. It includes built-in image optimizatio
engineering
Flowbite Svelte component documentation lookup. MUST be used whenever creating or editing UI components that use Flowbite Svelte. Fetch component docs before writing any Flowbite c
engineering
Framework-specific accessibility patterns and fix templates for React, Vue, Angular, Svelte, Next.js, and Tailwind CSS.
product
Conventions for a client-side SPA or SSG that consumes APIs it does not own. Use when .claude/HARNESS.toml selects web/frontend-app, or when building a React/Vue/Svelte app with a
engineering
Frontend best practices — TypeScript, React/Vue/Svelte, CSS, accessibility, testing. Use when writing, reviewing, or discussing frontend code.
product
Systematic 10-phase debugging procedure for SvelteKit 2 + Svelte 5 frontend issues. Use when components fail to render, routing breaks, runes throw errors, or Encore client calls f
engineering
Fix generic Svelte component designs by applying aesthetic upgrades across the 5 design dimensions (typography, color, motion, spatial composition, backgrounds)
engineering
Create distinctive, production-grade Svelte/TypeScript frontends with exceptional design quality
engineering
Professional frontend standards for building, scaffolding, extending, or reviewing any UI or frontend project — new or existing — even when standards aren't explicitly asked for. K
engineering
Frontend UI/UX work with Gemini CLI in --yolo mode. Use when (1) modifying visual/styling elements in frontend files (.tsx, .jsx, .vue, .svelte, .css), (2) implementing UI componen
engineering
Interactive multi-level skill for scaffolding frontend projects from source. Use when user wants to: (1) Create a new frontend project (web, mobile, desktop, or cross-platform) (2)
product
Frontend state quality checklist for React, Vue, Svelte, stores, side effects, forms, and data fetching.
engineering
Feature-Sliced Design (FSD) v2.1 공식 문서를 Progressive Disclosure 방식으로 제공하는 지식 스킬. 레이어/슬라이스/세그먼트, Public API, cross-imports, v2.0→v2.1 pages-first 마이그레이션, Next.js·NuxtJS·React Query·S
product
Framework-agnostic guide for implementing stable, semantic selectors in any web application. Solves the dynamic class name problem caused by CSS-in-JS, CSS Modules, and build tools
content
GitButler is a modern Git client built in Rust and Svelte that introduces virtual branches, allowing developers to work on multiple branches simultaneously without stashing or swit
engineering
Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Sv — from Tu
engineering
Integrate Heartwood authentication into a new or existing Grove property. Covers client registration, PKCE OAuth flow, SvelteKit route setup, session validation, and wrangler confi
engineering
Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Sv — from on
engineering
Build modern SPAs with Inertia.js and Rails using React, Vue, or Svelte. Use when creating Inertia pages, handling forms with useForm, managing shared props, or implementing client
engineering
Configuring JavaScript frontend frameworks for Tauri v2 desktop apps (Next.js, Nuxt, Qwik, SvelteKit, Vite) with SSG setup and tauri.conf.json settings. USE WHEN integrating a JS f
engineering
Ensure iOS/iPadOS-friendly form inputs (keyboard type, inputmode, autocomplete, autocapitalize/autocorrect, enterkeyhint) when editing or reviewing UI forms in web apps. Use when a
engineering
Write and run JavaScript/TypeScript tests using Vitest or Jest with mocking, component testing, and coverage. Use when writing JS/TS tests, testing Svelte/React components, or sett
engineering
Use when editing ESLint, Prettier, Stylelint, PostCSS, or Svelte config files. Use when adding or removing linting plugins, resolving formatter conflicts, auditing JS/TS toolchain
tools
json-render component catalog patterns for AI-safe generative UI. Define Zod-typed catalogs that constrain what AI can generate, use @json-render/shadcn for 36 pre-built components
engineering
Expert guide for Layer Cake, a headless Svelte visualization framework managing scales, dimensions, and data flow while supporting SVG, Canvas, HTML, and WebGL rendering contexts f
engineering
Expert guide for LayerChart, a Svelte component library for building diverse data visualizations (Cartesian, radial, hierarchical, geo, graph) with unopinionated building blocks, m
engineering
LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.
engineering
Search, fetch, and integrate free Lottie animations into React, React Native, Vue, Svelte, Angular, Flutter, and Vanilla web projects. Use when the user asks for any Lottie/dotLott
growth
Augment a sprint's SPEC.md with a Frontend section (component tree, state, a11y, routing, performance budget, Playwright e2e plan) tailored to the project's stack (React/ — from en
engineering
markuplint is a comprehensive HTML linter designed for all markup developers. It enforces accessibility, spec compliance, and best practices across HTML, JSX, Vue, Svelte, Astro, P
tools
Central message routing for Photino.NET: {type,payload} format, HandleMessage dispatch, Send helper, event wiring, Svelte 5 component patterns, IAsyncDisposable in sync contexts. P
engineering
Mitosis lets you write UI components once and compile them to React, Vue, Angular, Svelte, Solid, Qwik, and more. Built by Builder.io, it enables maintaining a single component cod
engineering
Guide for deploying web frameworks on Netlify. Use when setting up a framework project (Vite/React, Astro, TanStack Start, Next.js, Nuxt, SvelteKit, Remix) for Netlify deployment,
engineering
Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and S — from ph
engineering
Generate type-safe API clients, TanStack Query/SWR hooks, Zod schemas, MSW mocks, Hono server handlers, MCP servers, and SolidStart actions from OpenAPI specs using Orval. Covers a
engineering
\"Run tests for Photino.NET project with filter patterns, coverage collection, and frontend type checking. 運行Photino.NET工程測試：過濾模式、覆蓋率收集及前端類型檢查. Use when: running unit tests, filter
engineering
Web-to-native porting design specialist (2026 spec — Liquid Glass / Material 3 Expressive / Swift 6.2 / Compose 1.7+ / Xcode 26 / targetSdk 36 / 16KB page / Passkey / Privacy Manif
product
Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building c
engineering
Use when asked for framework-specific best practices, implementation guidelines for React/Vue/Svelte/Next.js, or stack-specific patterns. Examples: "React best practices", "Vue com
engineering
Svelte 5 runes, SvelteKit routing, reactive components, stores, and modern Svelte ecosystem best practices. Auto-activates in Svelte projects.
engineering
Crée des composants React/Vue/Angular/Svelte optimisés et réutilisables. Se déclenche avec "composant React", "component", "Vue component", "Angular component", "Svelte" — from eng
engineering
Remult patterns - entities, fields, repo() usage, lifecycle hooks, permissions (allowApi + apiPrefilter), upsert, customFilter, sqlExpression, ValueList enums, relations. Use whene
engineering
Review code for logging patterns and suggest evlog adoption. Guides setup on Nuxt, Next.js, SvelteKit, Nitro, TanStack Start, React Router, NestJS, Express, Hono, Fastify, Elysia,
engineering
Use when given a Figma file URL + node-id and asked to generate frontend scaffold code (Vue/React/Svelte) that matches an existing project's design system tokens. Verified pipeline
engineering
Full Sentry SDK setup for Svelte and SvelteKit. Use when asked to "add Sentry to Svelte", "add Sentry to SvelteKit", "install @sentry/sveltekit", or configure error monitoring, tra
engineering
Use on day 1 of a project to ship sitemap, robots.txt, OG image, and JSON-LD schema in a single PR. Auto-detects Next.js, Astro, or SvelteKit, audits what's already there, and only
growth
Create and initialize Tauri v2 cross-platform desktop and mobile projects, covering prerequisites, create-tauri-app or manual CLI setup, directory structure, and config. USE WHEN s
engineering
Use when adding, using, or customizing shadcn-svelte components in a Svelte or SvelteKit project, or when you need to look up component APIs, install commands, or underlying packag
engineering
Generate comprehensive Spanish README.md documentation for Svelte 5 projects with Mermaid diagrams. Use when art-vandeley detects a Svelte/SvelteKit codebase. Creates architecture
engineering
Design reusable, composable UI components with single responsibility, clear prop interfaces, and encapsulation. Apply when creating or modifying React, Vue, Svelte, or web componen
engineering
Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte transitions. Always respects prefers-reduced-motion.
engineering
Master entry point for all Stitch design workflows. Routes from user request → design spec → prompt assembly → screen generation → iteration (edit, variants, design systems) → desi
growth
Converts Stitch designs into Svelte 5 / SvelteKit components using the runes API — scoped CSS with custom properties, built-in transitions, TypeScript, dark mode, and accessible ma
engineering
Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and S — from bg
engineering
Svelte and SvelteKit development with built-in reactivity, stores, SSR/SSG, and modern web patterns.
engineering
Svelte 5 and SvelteKit development with shadcn-svelte components and Bits UI patterns. Use when building Svelte components, working with runes ($state, $derived, $effect), using sh
engineering
Svelte 5 development with runes ($state, $derived, $effect), SvelteKit full-stack framework, and modern reactive patterns. Use when building Svelte applications, implementing fine-
engineering
Build node-based editors, interactive diagrams, and flow visualizations using Svelte Flow. Use when creating workflow editors, data flow diagrams, organizational charts, mindmaps,
engineering
Svelte and SvelteKit development — runes, stores, server-side rendering, form actions, streaming
engineering
Développement d'applications Svelte et SvelteKit avec réactivité native, stores, SSR, routing et transitions. Se déclenche avec "Svelte", "SvelteKit", "store Svelte", "ré — from en
engineering
Svelte 5 and SvelteKit development patterns — runes, stores, server-side rendering, form actions, edge deployment
engineering
Svelte 5 runes guidance. Use for reactive state, props, effects, or Svelte 4→5 migration. Covers $state, $derived, $effect, $props, $bindable. Prevents mixing syntaxes and reactivi
engineering
Svelte 5 runes + SvelteKit adapter-static (SSG/SSR) patterns for hydration-safe state, store bridges, and reactivity that survives prerendering
engineering
Build full-stack web applications with SvelteKit — file-based routing, SSR, SSG, API routes, and form actions in one framework. — from suhaibjanjua
engineering
Builds applications with SvelteKit including routing, load functions, form actions, hooks, and adapters. Use when creating Svelte applications with SSR, building full-stack apps, o
engineering
SvelteKit data flow guidance. Use for load functions, form actions, and server/client data. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error().
engineering
Optimize SvelteKit applications by leveraging SvelteKit's full-stack architecture for instant server-side rendering and progressive enhancement. Specialized in load functions, form
engineering
Guides SvelteKit progressive-enhanced forms so saves persist in UI without a manual refresh: use update({ reset:false }), applyAction for cross-route POSTs, and checkbox/select sta
engineering
SvelteKit remote functions guidance. Use for command(), query(), form() patterns in .remote.ts files.
engineering
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
engineering
Scaffold and configure a production-ready SvelteKit PWA with opinionated defaults. Use when: creating a new web application, setting up a SvelteKit project, building a PWA, or when
engineering
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best pr
engineering
Expert guidance for Wails, the Go framework for building desktop applications with web frontends. Helps developers build lightweight, fast desktop apps where the backend is Go and
engineering
Tolgee is an open-source localization platform that lets developers and translators manage translations through in-context editing, machine translation integration, and SDKs for Re
content
对比原版 TS renderer 组件（`../claude-devtools/src/renderer/`）与 Rust 版 Svelte 组件（`ui/src/`）的功能 / 样式 / 交互差距，输出差异报告 + 移植建议。**仅**用户显式 `/ts-ui-compare <组件名>` 时触发——模型不能自主调用，因为这是一个需要逐文件细读的开销大动作
engineering
Wire agents into React, Vue, and Svelte frontends with streaming hooks, and set up server-side Next.js App Router or Express API routes using AgentStream.toSSE().
engineering
[METHODOLOGY] UI/UX design intelligence database (50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, 25 chart types across 10 stacks — React, Ne
product
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: — from bg
product
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui — from bg
product
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui — from bg
product
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui — from di
product
Answer questions about better-auth and help build authentication features. Use when developers: (1) ask about better-auth APIs like `betterAuth`, `auth.api.*`, `authClient.*`; (2)
security
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (R
product
Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix. Use f
product
Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, a
engineering
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designi
engineering
Build Awwwards-tier web frontends — landing pages, marketing sites, editorial, type foundries, brand sites, web apps, dashboards. Targets React 19 + Next 15, Astro 5, SvelteKit 2,
growth
Augment a sprint's SPEC.md with a Frontend section (component tree, state, a11y, routing, performance budget, Playwright e2e plan) tailored to the project's stack (React/ — from en
engineering
Use when permanently removing a Foundation widget — retracts the WidgetType individual, deletes the Svelte component file, and removes the WidgetManager dispatch branch.
engineering
UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 16 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Nuxt, Nuxt UI, Tailw
product
Initializes a new Convex project from scratch or adds Convex to an existing app. Use this skill when starting a new project with Convex, scaffolding with npm create convex@latest,
engineering
Use this skill whenever writing, reviewing, or refactoring any CSS, whether in plain .css files, styled-components, CSS Modules, Tailwind arbitrary values, inline styles in React/V
product
Use this skill whenever a user shares web code (HTML, JSX, TSX, Vue, Svelte) and wants to know if it's accessible — keyboard usable, screen reader compatible, WCAG compliant, or re
product
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG
engineering
Use when selecting design and UI resources for frontend work, including UI graphics, fonts, color tools, icons, logos, favicons, stock photos, videos, sound effects, vectors, mocku
engineering
Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files,
engineering
Design and build reusable, composable UI components following single responsibility principle with clear props, proper encapsulation, and minimal state management. Use this skill w
engineering
Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, Blu
engineering
ALWAYS use this skill when working on ecommerce storefronts, online stores, shopping sites. Use for ANY storefront component including checkout pages, cart, payment flows, product
engineering
CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.sve
content
Svelte compiles your components to vanilla JavaScript at build time. No virtual DOM, no runtime framework. The result is smaller bundles, faster performance, and simpler code. Svel
engineering
Move a Vercel-hosted Next.js app onto Cloudflare and, where it fits, onto a microservices.sh app. Use when a user wants off Vercel/Next for hosting, edge runtime, KV, Postgres, Blo
engineering
Verify UI-facing changes by running a screenshot-analyze-verify loop across configured viewports, with a browser-tool priority cascade (Playwright MCP → Chrome DevTools MCP → CLI f
engineering
Build reusable Svelte components with best practices for composition and state management
engineering
SKILL.md files, not affiliated with, endorsed by, or sponsored by Anthropic.