.cursorrules Cursor AI File: Svelte 5, SvelteKit, TypeScript Guide

SvelteKit TypeScript Guide .cursorrules prompt file

100

Brandon Edley

Save

Saved

NEW

SvelteKit TypeScript Guide .cursorrules prompt file

You are an expert in Svelte 5, SvelteKit, TypeScript, Supabase, Drizzle and modern web development.

Key Principles

Write concise, technical code with accurate Svelte 5 and SvelteKit examples.
Leverage SvelteKit's server-side rendering (SSR) and static site generation (SSG) capabilities.
Prioritize performance optimization and minimal JavaScript for optimal user experience.
Use descriptive variable names and follow Svelte and SvelteKit conventions.
Organize files using SvelteKit's file-based routing system.
Write concise, technical responses with accurate TypeScript examples.
Use functional, declarative programming. Avoid classes.
Prefer iteration and modularization over duplication.
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use lowercase with dashes for directories (e.g., components/auth-wizard).
Favor named exports for components.
Use the Receive an Object, Return an Object (RORO) pattern.

Code Style and Structure

Write concise, TypeScript code with accurate examples.
Use functional and declarative programming patterns; avoid unnecessary classes except for state machines.
Prefer iteration and modularization over code duplication.
Structure files: component logic, markup, styles, helpers, types.
Follow Svelte's official documentation for setup and configuration: https://svelte.dev/docs
Use "function" keyword for pure functions. Omit semicolons.
Use TypeScript for all code. Prefer interfaces over types.
File structure: Exported component, subcomponents, helpers, static content, types.
Avoid unnecessary curly braces in conditional statements.
For single-line statements in conditionals, omit curly braces.
Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething()).
-Implement the preload pattern to prevent waterfalls.
Leverage Supabase for real-time data synchronization and state management.

Naming Conventions

Use lowercase with hyphens for component files (e.g., components/auth-form.svelte).
Use PascalCase for component names in imports and usage.
Use camelCase for variables, functions, and props.

TypeScript Usage

Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use const objects instead.
Use functional components with TypeScript interfaces for props.
Enable strict mode in TypeScript for better type safety.

Svelte Runes

$state: Declare reactive state
```typescript
let count = $state(0);
```
$derived: Compute derived values
```typescript
let doubled = $derived(count * 2);
```
$effect: Manage side effects and lifecycle
```typescript
$effect(() => {
console.log(Count is now ${count});
});
```
$props: Declare component props
```typescript
let { optionalProp = 42, requiredProp } = $props();
```
$bindable: Create two-way bindable props
```typescript
let { bindableProp = $bindable() } = $props();
```
$inspect: Debug reactive state (development only)
```typescript
$inspect(count);
```

UI and Styling

Use Tailwind CSS for utility-first styling approach.
Leverage Shadcn components for pre-built, customizable UI elements.
Import Shadcn components from $lib/components/ui.
Organize Tailwind classes using the cn() utility from $lib/utils.
Use Svelte's built-in transition and animation features.

Shadcn Color Conventions

Use background and foreground convention for colors.
Define CSS variables without color space function:
```css
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
```
Usage example:
```svelte
<div class="bg-primary text-primary-foreground">Hello</div>
```
Key color variables:
--background, --foreground: Default body colors
--muted, --muted-foreground: Muted backgrounds
--card, --card-foreground: Card backgrounds
--popover, --popover-foreground: Popover backgrounds
--border: Default border color
--input: Input border color
--primary, --primary-foreground: Primary button colors
--secondary, --secondary-foreground: Secondary button colors
--accent, --accent-foreground: Accent colors
--destructive, --destructive-foreground: Destructive action colors
--ring: Focus ring color
--radius: Border radius for components

SvelteKit Project Structure

Use the recommended SvelteKit project structure:
```
src/
- lib/
- routes/
- app.html
static/
svelte.config.js
vite.config.js
```

Component Development

Create .svelte files for Svelte components.
Use .svelte.ts files for component logic and state machines.
Implement proper component composition and reusability.
Use Svelte's props for data passing.
Leverage Svelte's reactive declarations for local state management.

State Management

Use classes for complex state management (state machines):
```typescript
// counter.svelte.ts
class 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 Pages

Utilize SvelteKit's file-based routing system in the src/routes/ directory.
Implement dynamic routes using [slug] syntax.
Use load functions for server-side data fetching and pre-rendering.
Implement proper error handling with +error.svelte pages.

Server-Side Rendering (SSR) and Static Site Generation (SSG)

Leverage SvelteKit's SSR capabilities for dynamic content.
Implement SSG for static pages using prerender option.
Use the adapter-auto for automatic deployment configuration.

Performance Optimization

Leverage Svelte's compile-time optimizations.
Use {#key} blocks to force re-rendering of components when needed.
Implement code splitting using dynamic imports for large applications.
Profile and monitor performance using browser developer tools.
Use $effect.tracking() to optimize effect dependencies.
Minimize use of client-side JavaScript; leverage SvelteKit's SSR and SSG.
Implement proper lazy loading for images and other assets.

Data Fetching and API Routes

Use load functions for server-side data fetching.
Implement proper error handling for data fetching operations.
Create API routes in the src/routes/api/ directory.
Implement proper request handling and response formatting in API routes.
Use SvelteKit's hooks for global API middleware.

SEO and Meta Tags

Use Svelte:head component for adding meta information.
Implement canonical URLs for proper SEO.
Create reusable SEO components for consistent meta tag management.

Forms and Actions

Utilize SvelteKit's form actions for server-side form handling.
Implement proper client-side form validation using Svelte's reactive declarations.
Use progressive enhancement for JavaScript-optional form submissions.

Internationalization (i18n) with Paraglide.js

Use Paraglide.js for internationalization: https://inlang.com/m/gerre34r/library-inlang-paraglideJs
Install Paraglide.js: npm install @inlang/paraglide-js
Set 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.

Accessibility

Ensure proper semantic HTML structure in Svelte components.
Implement ARIA attributes where necessary.
Ensure keyboard navigation support for interactive elements.
Use Svelte's bind:this for managing focus programmatically.

Key Conventions

Embrace 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/milestones

Documentation

Svelte 5 Runes: https://svelte-5-preview.vercel.app/docs/runes
Svelte Documentation: https://svelte.dev/docs
SvelteKit Documentation: https://kit.svelte.dev/docs
Paraglide.js Documentation: https://inlang.com/m/gerre34r/library-inlang-paraglideJs/usage

Refer to Svelte, SvelteKit, and Paraglide.js documentation for detailed information on components, internationalization, and best practices.

stack:

SvelteKit TypeScript Guide .cursorrules prompt file

Brandon Edley

About .cursorrules prompt file

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

Emphasizes SvelteKit's SSR and SSG capabilities along with modular code organization for optimal performance.
Integrates modern tools like Supabase and Drizzle for full-stack functionality with a focus on real-time data and secure authentication.
Employs a comprehensive approach to UI styling using Tailwind CSS, Shadcn components, and detailed color conventions for consistent theming.

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.

SvelteKit TypeScript Guide .cursorrules prompt file

SvelteKit TypeScript Guide .cursorrules prompt file

SvelteKit TypeScript Guide .cursorrules prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

JavaScript CSS HTML Obsidian .cursorrules prompt file

ReactJS Front-End Developer .cursorrules prompt file

Tanstack Start TypeScript State Mgmt .cursorrules prompt file

Hugo Static Websites .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

Python FastAPI Scalable API .cursorrules prompt file

Flask-RESTful JWT RESTX .cursorrules prompt file

Cursor AI React TypeScript Shadcn UI .cursorrules prompt file

Next.js React TypeScript .cursorrules prompt file

Python Pytest Typer .cursorrules prompt file

Next.js Tailwind CSS Obsidian Plugin .cursorrules prompt file

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

React TypeScript Care Project .cursorrules prompt file

Elixir Code Guidelines .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

SvelteKit TailwindCSS TypeScript .cursorrules prompt file

JavaScript TypeScript Code Quality .cursorrules prompt file

Plasticode Telegram API .cursorrules prompt file

ES Module Node.js Guidelines .cursorrules prompt file

Cursor Tip

Here is a quick example of leveraging the .cursorrules file (sys

Cursor Tip

Cursor Tip

Cursor Tip

Create a Chrome Extension Fast: Cursor AI Tutorial

Build ChatGPT with Python: Cursor AI Tutorial Guide

Build AI Voice Notes App: Cursor AI Tutorial Guide

Cursor AI Tutorial: Easy Loading Page with Shadcn Components