Web App Optimization

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

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

Generische Regel-Sammlung zu Web-Performance: Ladezeiten, Bundle-Größe, Lazy Loading, Caching-Strategien, Core Web Vitals. Da kein Framework benannt ist, wirkt sie eher als Checkliste denn als tiefes Spezialwissen — nützlich, damit Cursor bei jeder Änderung automatisch an Performance-Implikationen denkt (z. B. unnötige Re-Renders, zu große Assets). Lohnt sich für Projekte, bei denen Performance bisher kein fester Bestandteil des Prompt-Workflows war, weniger für Teams mit bereits etablierten Performance-Budgets und eigenen Linting-Regeln, die spezifischer sind als generische Tipps.

## Praxis-Tipp

Gut geeignet als Ergänzung zu einer Framework-Regel — z. B. zusammen mit einer React- oder Vue-Regel aktivieren, damit Optimierungstipps framework-spezifisch angewendet werden.

## Lizenz & Quelle

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

Lade …