Web App Optimization

Generische Cursor-Regel mit Checkliste für Ladezeiten, Bundle-Größe und Core-Web-Vitals.

Original-Beschreibung der Autoren: Cursor rules for web app development with optimization integration.

Die Regel

---
description: "Cursor rules for web app development with optimization integration."
globs: **/*
alwaysApply: false
---
You are an expert in Svelte 5, SvelteKit, TypeScript, 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.

Code Style and Structure

- Write concise, technical TypeScript or JavaScript 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

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

  let doubled = $derived(count * 2);

• $effect: Manage side effects and lifecycle

  $effect(() => {
    console.log(`Count is now ${count}`);
  });

• $props: Declare component props

  let { optionalProp = 42, requiredProp } = $props();

• $bindable: Create two-way bindable props

  let { bindableProp = $bindable() } = $props();

• $inspect: Debug reactive state (development only)

  $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:

  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;

• Usage example:

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):

  // 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:

  <br />
  import { counter } from './counter.svelte.ts';
  <br />
  <button on:click={() => counter.increment()}>
    Count: {counter.count}

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:

  <br />
  import { t } from '@inlang/paraglide-js';
  <br />
  - S

… (hier gekürzt — Kopieren/Download liefert die vollständige Regel)

## So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter `.cursor/rules/` ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne `.cursorrules`-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den `---`-Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.


## Im Detail

Eine framework-unabhängige Checkliste-Regel für Performance: Code-Splitting und Lazy-Loading von Routen/Komponenten, Bildoptimierung (WebP, richtige Größen, lazy loading), Reduzierung von Bundle-Größe sowie gezieltes Verbessern der Core-Web-Vitals wie LCP und CLS. Der Nutzen liegt darin, dass die KI bei jeder Funktion mitdenkt, ob eine Optimierung nötig ist, statt Performance erst nachträglich als Audit zu behandeln. Geeignet für Teams ohne dedizierten Performance-Ansprechpartner, die trotzdem grundlegende Web-Vitals-Standards einhalten wollen. Wichtig: Als generische Regel ersetzt sie kein echtes Lighthouse-Audit oder Profiling — sie liefert Grundregeln, keine projektspezifische Messung.

## Praxis-Tipp

Fragen Sie z. B. „Optimiere diese Bildergalerie-Komponente für bessere LCP-Werte“ — die Regel bringt dann Vorschläge wie lazy loading und responsive Bildgrößen mit ein.

## Lizenz & Quelle

- **Lizenz:** CC0 1.0
- **Quelle:** [PatrickJS/awesome-cursorrules (GitHub)](https://github.com/PatrickJS/awesome-cursorrules)

Lade …