Qwik Basic

Cursor-Regel mit Grundkonventionen für Komponentenstruktur und Resumability in Qwik.

Original-Beschreibung der Autoren: Cursor rules for Qwik development with TypeScript and Vite integration.

Die Regel

---
description: "Cursor rules for Qwik development with TypeScript and Vite integration."
globs: **/*
alwaysApply: false
---
// Qwik.js Basic Setup (with TypeScript and Vite) .cursorrules

// Prefer functional components

const preferFunctionalComponents = true;

// Qwik.js best practices

const qwikBestPractices = [
  "Use $ suffix for lazy-loaded functions",
  "Utilize useSignal() for reactive state",
  "Implement useStore() for complex state objects",
  "Use useResource$() for data fetching",
  "Implement useTask$() for side effects",
  "Utilize useVisibleTask$() for browser-only code",
  "Leverage TypeScript for type safety",
  "Use Vite's fast HMR for development",
];

// Folder structure

const folderStructure = `
src/
  components/
  routes/
  global.css
  root.tsx
  entry.ssr.tsx
public/
vite.config.ts
tsconfig.json
`;

// Additional instructions

const additionalInstructions = `
1. Use TypeScript for all .ts and .tsx files
2. Implement proper error boundaries
3. Utilize Qwik City for routing when applicable
4. Use Qwik's built-in optimization features
5. Implement lazy-loading for improved performance
6. Follow Qwik's naming conventions and best practices
7. Use server$ for server-side code execution
8. Leverage Vite plugins for optimized builds
`;

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 legt Grundkonventionen für Qwik-Projekte fest: wie Komponenten aufgebaut werden und wie die für Qwik charakteristische Resumability – also das verzögerte Laden und Fortsetzen von Interaktivität statt vollständigem Hydration – konsequent eingehalten wird. Das hilft vor allem Entwicklern, die von React oder Angular zu Qwik wechseln und die abweichenden Prinzipien noch nicht verinnerlicht haben, da Cursor sonst leicht klassische Hydration-Muster statt Qwik-typischer Patterns vorschlägt. Für reine Qwik-Einsteigerprojekte oder Prototypen ist die Regel besonders wertvoll, um früh die richtigen Gewohnheiten zu etablieren.

Praxis-Tipp

Nutzen Sie die Regel direkt beim Anlegen neuer Komponenten, z. B. mit dem Prompt „Erstelle eine Qwik-Komponente mit lazy-geladenem Event-Handler“, um Resumability korrekt umzusetzen.

Lizenz & Quelle

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

Lade …