Rule

qwik basic

via PatrickJS/awesome-cursorrules

TypeScript and Vite setup guide for Qwik functional component development.

What is qwik basic?

This rule provides foundational patterns for Qwik development with TypeScript and Vite integration. Use it when starting a Qwik project or establishing team conventions for reactive state management, lazy-loaded functions, and server-side code execution.

Enforce functional components and TypeScript for type safety
Guide reactive state patterns using useSignal(), useStore(), and useTask$()
Document folder structure for src/components, routes, and configuration files
Recommend lazy-loading with $ suffix functions and useResource$() for data fetching
Advise on Qwik City routing, error boundaries, and Vite HMR for development
Suggest server$ for server-side execution and Vite plugins for optimized builds

Applies to

File patterns this rule matches.

**/*

Rule definition (reference)

Source of truth, from the repository.

// 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 = `