Loading...
Loading...
Found 54 Skills
Expert guidance for SvelteKit development with TypeScript, Tailwind CSS, SSR/SSG, and performance optimization best practices
SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().
Use when building, redesigning, beautifying, or refactoring SvelteKit pages and reusable components with shadcn-svelte, Bits UI, or the shadcn-svelte MCP. Trigger on landing pages, dashboards, marketing sites, app shells, forms, navbars, tables, dialogs, responsive layouts, theming, icon selection, and requests to turn an idea or rough mockup into polished Svelte UI without inventing component APIs.
SvelteKit full-stack Svelte framework. Covers routing, load functions, form actions, and server-side rendering. Use when building SvelteKit applications. USE WHEN: user mentions "SvelteKit", "Svelte Kit", asks about "+page.svelte", "load functions", "form actions in SvelteKit", "SvelteKit routing", "use:enhance", "hooks.server.ts", "SvelteKit adapters" DO NOT USE FOR: Svelte without SvelteKit - use `frontend-svelte` instead; Next.js - use `nextjs-app-router` instead; Nuxt - use `nuxt3` instead; Remix - use `remix` instead
SvelteKit remote functions guidance. Use for command(), query(), form() patterns in .remote.ts files.
PostHog integration for SvelteKit applications
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
SvelteKit and Svelte 5 done right. Runes, load functions, form actions, SSR patterns, and modern Svelte.
SvelteKit - Full-stack Svelte framework with file-based routing, SSR/SSG, form actions, and adapters for deployment
Provides SEO and Meta Tags guidelines in SvelteKit.
Comprehensive guide for implementing feature flags and A/B tests using the Flags SDK (the `flags` npm package). Use when: (1) Creating or declaring feature flags with `flag()`, (2) Setting up feature flag providers/adapters (Vercel, Statsig, LaunchDarkly, PostHog, GrowthBook, Hypertune, Edge Config, OpenFeature, Flagsmith, Reflag, Split, Optimizely, or custom adapters), (3) Implementing precompute patterns for static pages with feature flags, (4) Setting up evaluation context with `identify` and `dedupe`, (5) Integrating the Flags Explorer / Vercel Toolbar, (6) Working with feature flags in Next.js (App Router, Pages Router, Middleware) or SvelteKit, (7) Writing custom adapters, (8) Encrypting/decrypting flag values for the toolbar, (9) Any task involving the `flags`, `flags/next`, `flags/sveltekit`, `flags/react`, or `@flags-sdk/*` packages. Triggers on: feature flags, A/B testing, experimentation, flags SDK, flag adapters, precompute flags, Flags Explorer, feature gates, flag overrides.
Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing.