Qwik Cursor Rules

Learn about cursor rules specific to Qwik development.

Qwik-Specific Rules

Cursor rules in Qwik enhance your development experience by providing smart navigation and manipulation features tailored for Qwik's unique architecture and features.

Navigate between component definitions and their usages
Quick access to component props and signals
Smart navigation through lazy-loaded boundaries
Jump between server and client components

Smart Selection

Select complete component blocks including JSX
Expand selection to include signal declarations
Smart selection of resource loaders
Select complete route handlers

Code Manipulation

Quick component optimization helpers
Automated signal and store management
Smart import handling for lazy loading
Route parameter manipulation

Best Practices

Use resumability-aware navigation for better code organization
Leverage Qwik's fine-grained reactivity features
Utilize progressive enhancement patterns effectively

Examples

// Navigate through component definitions
export const Counter = component$(() => {
  const count = useSignal(0);

  return (
    <div>
      <span>{count.value}</span>
      <button onClick$={() => count.value++}>Increment</button>
    </div>
  );
});

// Smart selection of resource loaders
export const useProductData = routeLoader$(() => {
  return {
    products: getProducts(),
    categories: getCategories()
  };
});

// Component optimization patterns
export const ProductList = component$(() => {
  const products = useResource$(() =>
    fetch('/api/products').then(res => res.json())
  );

  return (
    <Resource
      value={products}
      onPending={() => <div>Loading...</div>}
      onResolved={(data) => (
        <ul>
          {data.map(product => (
            <li key={product.id}>{product.name}</li>
          ))}
        </ul>
      )}
    />
  );
});

Configuration

Customize Qwik-specific cursor rules in your settings:

{
  "qwik.cursorRules": {
    "componentNavigation": true,
    "smartSelection": true,
    "optimizationHelpers": true,
    "resumabilityAware": true
  }
}