Skip to main content
rule

qwik-basic-cursorrules-prompt-file — Cursor rule: Qwik

A Cursor rule that sets Qwik conventions for the agent: lazy functions with the $ suffix, signals, tasks, and a TypeScript plus Vite project layout.

Install into Cursor · Manually: put the files in place All methods and platforms ↓
.cursor/rules/qwik-basic-cursorrules-prompt-file.mdc
Open on GitHub

What qwik-basic-cursorrules-prompt-file does

The file tells the agent how to write Qwik code in the editor. It lists the practices to follow: the $ suffix for lazy-loaded functions, useSignal() for reactive state, useStore() for complex state objects, useResource$() for data fetching, useTask$() for side effects, and useVisibleTask$() for browser-only code. Components stay functional.

A folder layout comes with it: src/ holding components/, routes/, global.css, root.tsx and entry.ssr.tsx, plus public/, vite.config.ts and tsconfig.json. A separate instruction block asks for TypeScript in every .ts and .tsx file, error boundaries, Qwik City routing, server$ for server-side code, and lazy loading.

The rule lives in .cursor/rules/qwik-basic-cursorrules-prompt-file.mdc, and its frontmatter sets alwaysApply: false while globs: **/* covers the whole project. So you have to attach it to a chat yourself. Otherwise the agent starts a Qwik task with none of this in context.

What it helps with

  • get the agent to use the $ suffix on lazy Qwik functions
  • pick between useSignal, useStore and useResource$ for a given task
  • lay out a project across src, routes and public
  • wire up server$ for server-side code
  • move components to TypeScript in .tsx files

Example prompts for the agent

  • Build a Qwik counter component with useSignal and a lazy handler
  • Place this new route using the folder structure from the rule
  • Rewrite this component in TypeScript and add an error boundary

How to install qwik-basic-cursorrules-prompt-file

Manually: put the files in place

.cursor/rules/qwik-basic-cursorrules-prompt-file.mdc

Frontmatter: description, globs, alwaysApply

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about qwik-basic-cursorrules-prompt-file

How do I install qwik-basic-cursorrules-prompt-file in Cursor?

Create .cursor/rules/qwik-basic-cursorrules-prompt-file.mdc in your project root and paste the rule contents into it.

What does qwik-basic-cursorrules-prompt-file do?

It gives the Cursor agent Qwik practices: the $ suffix on lazy functions, state and task hooks, a folder layout, and TypeScript requirements.

Does the rule apply to every file automatically?

No. It sets alwaysApply: false, so you attach it to a conversation by hand, even though globs: **/* spans the whole project.

Source text

qwik-basic-cursorrules-prompt-file.mdc · CC0-1.0
---
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
`;

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set68

react-styled-components-cursorrules-prompt-file A Cursor rule that tells the agent how to write React code with styled-components: functional components, theming through ThemeProvider, a fixed folder layout. ★ 41,011repo stars react-query-cursorrules-prompt-file A Cursor rule that tells the agent how to write React Query code: where QueryClient lives, how hooks and query keys are named. ★ 41,011repo stars react-native-expo-cursorrules-prompt-file A Cursor rule that tells the agent how to write React Native code with Expo. Useful when you want new screens and components to follow one stack. ★ 41,011repo stars rails-cursorrules-prompt-file A Cursor rule file that tells the agent how to write Rails 8 code: generators, bin/dev, the Solid stack, Minitest and Hotwire. ★ 41,011repo stars python A Cursor rule that sets project layout, code style and stack choices for Python work with Flask and SQLite. Useful when the agent edits files in your repo. ★ 41,011repo stars python-github-setup-cursorrules-prompt-file Tells Cursor how to write and review Python code: style, tests, GitHub Pull Requests and GitHub Actions CI. Useful when the team has no shared rulebook. ★ 41,011repo stars python-fastapi-best-practices-cursorrules-prompt-f A Cursor rule that sets the agent's coding style for Python and FastAPI: functional code, Pydantic v2, async operations. ★ 41,011repo stars python-cursorrules-prompt-file-best-practices A Cursor rule that makes the assistant write Python with type annotations, PEP 257 docstrings and pytest tests. ★ 41,011repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor