qwik basic
via PatrickJS/awesome-cursorrules
TypeScript and Vite setup for Qwik functional components with reactive state management.
What is qwik basic?
Cursor rules for Qwik development emphasizing functional components, reactive state with useSignal() and useStore(), and Vite integration. Use this rule when building Qwik applications to ensure proper lazy-loading patterns, type safety, and performance optimization.
- Use $ suffix for lazy-loaded functions and server$ for server-side execution
- Manage reactive state with useSignal() for simple state and useStore() for complex objects
- Handle data fetching with useResource$() and side effects with useTask$() and useVisibleTask$()
- Leverage TypeScript for type safety across .ts and .tsx files
- Organize code with standard folder structure (components, routes, global styles)
- Implement error boundaries and lazy-loading for improved performance
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 = `
- Use TypeScript for all .ts and .tsx files
- Implement proper error boundaries
- Utilize Qwik City for routing when applicable
- Use Qwik's built-in optimization features
- Implement lazy-loading for improved performance
- Follow Qwik's naming conventions and best practices
- Use server$ for server-side code execution
- Leverage Vite plugins for optimized builds `;
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.