Verified:GitHub

svelte5-stack

Name: svelte5-stack
Availability: InStock
Author: Anthony

Enforces Svelte 5Kit stack conventions including Svelte 5 runes, shadcn-svelte components, TailwindCSS, orm and TypeScript strictness.

Updated Aug 23, 2026

Search Tags:#typescript #tailwind css #drizzle orm #sveltekit #svelte 5 #shadcn-svelte

Ready to run

npx skills add https://github.com/curiousanthony/supabase-sveltekit --skill svelte5-stack

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: svelte5-stack
Source: https://github.com/curiousanthony/supabase-sveltekit/tree/main/.cursor/skills/svelte5-stack
Command: npx skills add https://github.com/curiousanthony/supabase-sveltekit --skill svelte5-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that all SvelteKit 5 application code adheres to the project's established conventions for Svelte 5 runes, shadcn-svelte UI, Drizzle ORM, and TypeScript, maintaining code quality and consistency.

Core Features & Use Cases

Svelte 5 Runes Enforcement: Guarantees the use of $state, $derived, $effect, and $props over legacy Svelte patterns.
UI Consistency: Promotes the use of shadcn-svelte components and TailwindCSS for a unified look and feel.
Data Layer Adherence: Enforces Drizzle ORM for all database interactions with Supabase.
TypeScript Strictness: Mandates strict TypeScript typing, avoiding any and promoting well-defined interfaces.
Use Case: When adding a new interactive dashboard component, this skill will guide you to use Svelte 5 runes for state management, shadcn-svelte for UI elements like tables and cards, and Drizzle ORM to fetch data from Supabase.

Quick Start

Use this skill to refactor the existing Svelte component located at src/lib/components/OldCounter.svelte to use Svelte 5 runes and shadcn-svelte.

Frequently Asked Questions about svelte5-stack

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I enforce Svelte 5 runes conventions across my SvelteKit project?▼

To enforce Svelte 5 runes conventions, apply a Skill that mandates the use of `$state`, `$derived`, `$effect`, and `$props` over legacy Svelte patterns in all components and route files. This ensures modern SvelteKit state management consistency.

What is the best way to standardize shadcn-svelte and TailwindCSS usage in SvelteKit?▼

Standardizing shadcn-svelte and TailwindCSS involves enforcing a Skill that promotes shadcn-svelte components for UI elements like tables and cards. This guarantees a unified look and feel across your SvelteKit application's interactive dashboard and forms.

Does Drizzle ORM work with Supabase for SvelteKit server logic?▼

Drizzle ORM works with Supabase for SvelteKit server logic by enforcing a strict data layer adherence. A Skill can mandate Drizzle ORM for all database interactions, ensuring type-safe queries and consistent data fetching from your Supabase backend.

How do I refactor a legacy Svelte component to use Svelte 5 runes?▼

To refactor a legacy Svelte component to Svelte 5 runes, use a Skill to guide the transformation of existing state management. This ensures the updated component correctly implements `$state` and `$props` while integrating shadcn-svelte UI elements.

Can I use TypeScript strict typing with SvelteKit and Drizzle ORM?▼

You can use TypeScript strict typing with SvelteKit and Drizzle ORM by enforcing a Skill that mandates well-defined interfaces. This prevents the use of `any` and ensures strict TypeScript typing across all server logic and database interactions.

When should I use Svelte 5 runes instead of legacy Svelte patterns?▼

You should use Svelte 5 runes instead of legacy Svelte patterns for all new interactive components and route files. Enforcing this convention guarantees adherence to modern Svelte patterns, preventing legacy code from causing inconsistencies in your SvelteKit project.