Qwik Basic

Cursor-Regel mit Grundkonventionen für Qwik-Projekte: Komponentenstruktur und Resumability-Prinzipien.

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

Grundlegende Cursor-Regel für das Qwik-Framework, die dem KI-Editor die Basiskonventionen für Qwik-Projekte vorgibt – etwa Komponentenstruktur, Resumability-Prinzipien und typische Datei-Organisation. Qwik unterscheidet sich von React oder Angular durch sein Resumability-Konzept (kein vollständiges Hydration nötig), weshalb generische Frontend-Regeln hier oft nicht passen. Für Entwickler, die neu mit Qwik in Cursor arbeiten, spart diese Regel das wiederholte Erklären der Framework-Eigenheiten. Eine gute Ergänzung ist die spezialisiertere Regel für Qwik mit Tailwind, falls Styling-Konventionen zusätzlich benötigt werden.

Praxis-Tipp

In .cursor/rules ablegen, bevor du ein neues Qwik-Projekt startest – so schlägt Cursor von Anfang an qwik-typische Komponentenmuster statt React-Konventionen vor.

Lizenz & Quelle

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

Lade …