SvelteKit TypeScript Guide .cursorrules prompt file

Author: Brandon Edley

What you can build

SvelteKit Project Starter Template: A template generator for quickly starting projects using SvelteKit, Supabase, and Drizzle. This tool would configure SSR, SSG, and real-time data with Supabase, leaving only customizations to be added by developers.Real-time Chat Application: A real-time chat application using SvelteKit and Supabase for authentication and Drizzle for state management. It would leverage SvelteKit's SSR capabilities to ensure fast loading times and seamless authentication transitions.E-commerce Platform: Build a scalable e-commerce platform with SvelteKit that utilizes Supabase for managing product inventory and user accounts. The solution would focus on SSR for efficient server-side rendering of product pages with SSG for converting high-traffic pages into static content.Personal Blogging Website: A lightweight blogging platform using SvelteKit and Tailwind CSS. The website would support static site generation with dynamic content sections, allowing authors to edit and publish articles dynamically via a Supabase backend.Multi-language Content Management System (CMS): Implement a CMS with SvelteKit and Paraglide.js that supports internationalization and dynamic content loading through Supabase. The CMS would include simple mechanisms for creating and managing content across multiple languages.Task Management Application: A SvelteKit-based task management app utilizing Supabase for real-time collaboration and Drizzle for frontend state management. The app would feature dynamic updates and SSR for decreased load times.User Authentication Template: A collection of SvelteKit components and templates that allow developers to implement complex authentication flows, such as OAuth and PKCE, using Supabase's authentication features.Online Portfolio Creator: A tool that enables users to create their online portfolios using SvelteKit, customizable Shadcn components, and Tailwind CSS for styling. The platform would utilize Supabase for content storage and dynamic site rendering.Interactive Data Dashboard: Create a dashboard application using SvelteKit and Supabase, optimized for SSR and static content when appropriate, that displays real-time analytics and reports from a Supabase database, offering teams a collaborative interface.Event Management System: Develop an event management system using SvelteKit with functionalities like scheduling, attendee registration, and live updates via Supabase. The system would utilize SSR for efficient page rendering and load functions for data fetching.SEO Optimized Blogs Generator: An app that allows bloggers to create SEO-optimized blog posts with meta tags management using SvelteKit's Svelte:head component and SSR for fast content delivery.SvelteKit Component Library: A library of reusable components designed with Svelte 5, Shadcn components, and Tailwind CSS, which developers can quickly integrate into any SvelteKit project.Supabase Starter Kit: A toolkit providing best-practice configurations for using Supabase with SvelteKit, including authentication flows, real-time features, and database optimizations. This kit would help developers quickly bootstrap their applications with minimal setup.Responsive Web App Framework: Create a responsive web application framework utilizing SvelteKit and Tailwind CSS, focused on performance optimization, for developers building cross-platform mobile and desktop apps.Dynamic Form Builder: A GUI-based dynamic form builder using SvelteKit, with built-in validation, server-side form handling, and Supabase integration for storing submitted data. This tool would enable the creation and management of complex form workflows without coding expertise.

Benefits

Synopsis

Developers building a SvelteKit project with Supabase integration for real-time apps can use this prompt for guidance in best practices, code organization, and type safety with TypeScript.

Overview of .cursorrules prompt

The .cursorrules file outlines a comprehensive guide for web development using Svelte 5, SvelteKit, TypeScript, Supabase, Drizzle, and modern best practices. It emphasizes writing concise, technical code with examples, leveraging SvelteKit's server-side rendering and static site generation, and optimizing performance with minimal JavaScript. It provides conventions for naming, file organization, and code structure, focusing on functional and declarative programming, and the use of TypeScript. The file includes guidelines for UI styling with Tailwind CSS and Shadcn components, color conventions, state management, routing, API development, SEO, forms, and internationalization using Paraglide.js. It also stresses best practices for accessibility, performance optimization, and Supabase integration, including security measures and error handling. Additionally, links to relevant documentation are provided for in-depth understanding and reference.

.cursorrules Content

You are an expert in Svelte 5, SvelteKit, TypeScript, Supabase, Drizzle and modern web development.Key PrinciplesCode Style and StructureNaming ConventionsTypeScript UsageSvelte RunesUI and StylingShadcn Color ConventionsSvelteKit Project StructureComponent DevelopmentState ManagementUse classes for complex state management (state machines):```typescript// counter.svelte.tsclass Counter {count = $state(0);incrementor = $state(1);increment() {this.count += this.incrementor;}resetCount() {this.count = 0;}resetIncrementor() {this.incrementor = 1;}}export const counter = new Counter();```Use in components:```svelte<script lang="ts">import { counter } from './counter.svelte.ts';</script><button on:click={() => counter.increment()}>Count: {counter.count}</button>```Routing and PagesServer-Side Rendering (SSR) and Static Site Generation (SSG)Performance OptimizationData Fetching and API RoutesSEO and Meta TagsForms and ActionsInternationalization (i18n) with Paraglide.jsUse Paraglide.js for internationalization: https://inlang.com/m/gerre34r/library-inlang-paraglideJsInstall Paraglide.js: npm install @inlang/paraglide-jsSet up language files in the languages directory.Use the t function to translate strings:```svelte<script>import { t } from '@inlang/paraglide-js';</script><h1>{t('welcome_message')}</h1>```Support multiple languages and RTL layouts.Ensure text scaling and font adjustments for accessibility.AccessibilityKey ConventionsEmbrace Svelte's simplicity and avoid over-engineering solutions.Use SvelteKit for full-stack applications with SSR and API routes.Prioritize Web Vitals (LCP, FID, CLS) for performance optimization.Use environment variables for configuration management.Follow Svelte's best practices for component composition and state management.Ensure cross-browser compatibility by testing on multiple platforms.Keep your Svelte and SvelteKit versions up to date.Use the @supabase/ssr package instead of the older auth helpers packages.Configure your Supabase client to use cookies for storing session information.Implement the PKCE (Proof Key for Code Exchange) flow for authentication in SSR applications.Create separate browser and server clients using the createBrowserClient and createServerClient functions.Store access and refresh tokens in secure cookies for SSR.Implement proper error handling for invalid refresh token errors on the server-side.Use environment variables to store Supabase URL and API keys.Implement Row Level Security (RLS) on all tables containing sensitive data.Adopt a multi-stage development workflow (local -> staging -> prod).Use database migration tools to manage schema changes.Optimize queries, indexes, and connection management regularly.Implement proper CORS settings in your Supabase project.Use TypeScript for better type safety and developer experience.Implement consistent error handling across your application.Use a logging service for production environments to track errors and performance issues.Implement unit tests for database interactions.Documentation:[2] https://supabase.com/docs/guides/auth/server-side[3] https://supabase.com/docs/guides/auth/server-side/creating-a-client[4] https://www.reddit.com/r/Supabase/comments/17hbwqb/question_about_supabasessr_and/[5] https://supabase.com/docs/guides/auth/server-side/advanced-guide[6] https://www.restack.io/docs/supabase-knowledge-supabase-documentation[8] https://github.com/supabase/supabase/milestonesDocumentationRefer to Svelte, SvelteKit, and Paraglide.js documentation for detailed information on components, internationalization, and best practices.