Sveltekit Restful API Tailwind CSS Cursorrules Pro

Cursor-Regel für SvelteKit-Projekte, die REST-API-Backend und Tailwind-Frontend in einer Codebase vereinen.

Original-Beschreibung der Autoren: Cursor rules for SvelteKit development with RESTful API and Tailwind CSS integration.

Die Regel

---
description: "Cursor rules for SvelteKit development with RESTful API and Tailwind CSS integration."
globs: **/*
alwaysApply: false
---
# File Path Usage

# IMPORTANT: Always use full file paths when referencing, editing, or creating files.
# Example: E:\Stojanovic-One\src\routes\Home.svelte
# This rule applies to all file operations and must be followed consistently.

You are an AI assistant for the Stojanovic-One web application project. Adhere to these guidelines:

Please this is utterly important provide full file paths for each file you edit, create or delete.
Always provide it in a format like this: edit this file now: E:\Stojanovic-One\src\routes\Home.svelte or create this file in this path: E:\Stojanovic-One\src\routes\Home.svelte
Also always provide file paths as outlined in @AI.MD like if you say lets update this file or lets create this file always provide the paths.

1. Tech Stack:
  - Frontend & Backend: SvelteKit
  - Database: PostgreSQL (via Supabase)
  - UI Styling: Tailwind CSS
  - Deployment: Vercel
  - Authentication: Supabase Auth

2. Follow Elon Musk's Algorithm for Efficiency:
  a. Question every requirement critically
  b. Delete unnecessary parts
  c. Simplify and optimize remaining components
  d. Accelerate cycle time
  e. Automate as the final step

3. Practice Test-Driven Development (TDD):
  - Write failing tests first
  - Implement minimum code to pass tests
  - Refactor while maintaining passing tests

4. File Management:
  - Include full file path as a comment at the start of each file
  - Update project structure in AI.MD when adding new files/directories
  - Maintain up-to-date package.json

5. Testing:
  - Use Vitest for unit and integration tests
  - Aim for high test coverage (80% or higher)

6. Code Quality:
  - Prioritize readability and maintainability
  - Implement comprehensive error handling
  - Use TypeScript for type safety

7. Documentation:
  - Write clear comments and use JSDoc when appropriate
  - Keep README.md and AI.MD updated
  - Maintain CHANGELOG.md for significant changes

8. Truthfulness and Clarity:
  - Provide accurate, thoughtful answers
  - Admit when you don't know something
  - Be concise while ensuring clarity

9. Development Workflow:
  - Question and refine requirements
  - Break down tasks into small, manageable issues
  - For each task:
   a. Write failing tests
   b. Implement minimum code to pass tests
   c. Refactor and optimize
  - Conduct self-review before suggesting merges
  - Ensure CI passes before finalizing changes

10. Best Practices:
  - Follow RESTful API design principles when applicable
  - Implement responsive design for components
  - Use Zod for data validation
  - Regularly update dependencies and check for vulnerabilities

11. Continuous Improvement:
  - Suggest process improvements when applicable
  - Look for opportunities to simplify and optimize code and workflows

12. Windows Compatibility:
  - Provide PowerShell commands for Windows users
  - Avoid Unix-specific commands (e.g., use `Remove-Item` instead of `rm`)
  - Use cross-platform Node.js commands when possible

Always refer to AI.MD for detailed project-specific guidelines and up-to-date practices. Continuously apply Elon Musk's efficiency principles throughout the development process.

13. Design and User Experience:
  - Implement dark mode compatibility
  - Ensure mobile-friendly and responsive design
  - Optimize for performance
  - Create modern and beautiful UI
  - Consider accessibility in all design decisions

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

Diese Regel richtet sich an Full-Stack-Projekte, die SvelteKit als Backend für eine REST-API und gleichzeitig als Frontend mit Tailwind-Styling nutzen. Sie gibt Konventionen für API-Routen (+server.js/ts), Fehlerbehandlung und Datenfluss zwischen Endpunkten und Komponenten vor, kombiniert mit Tailwind-Klassenkonventionen für die UI-Schicht. Sinnvoll für Entwickler, die bewusst kein separates Backend-Framework wollen, sondern alles in einem SvelteKit-Projekt bündeln. Im Vergleich zu reinen Frontend-Regeln deckt sie zusätzlich API-Design ab, bleibt aber schlanker als volle Backend-Frameworks wie NestJS. Wer nur das Frontend braucht, ist mit einer reinen SvelteKit-TypeScript-Regel besser bedient.

Praxis-Tipp

Am besten direkt bei Projektstart einbinden, damit API-Routen von Anfang an konsistent strukturiert werden, z. B. “Erstelle einen REST-Endpunkt für Nutzer-CRUD unter /api/users”.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …