Cursor

Cursor reads .cursorrules from your project root to understand framework conventions. Whisq projects include this file automatically.

Setup

Create a new project — .cursorrules is included:

npm create whisq@latest my-app
cd my-app
# .cursorrules is already at the project root

Open the project in Cursor and start prompting. Cursor will follow Whisq patterns automatically.

What .cursorrules Contains

The file teaches Cursor:

• Import patterns — always import from @whisq/core
• Reactive children — use () => value not value directly
• Event handling — onclick, oninput with standard DOM events
• Component structure — component() function wrapping signals and a return statement
• Anti-patterns to avoid — no JSX, no this, no class components

Example Workflow

In Cursor, use Cmd+K (or Ctrl+K) to open the AI prompt and describe what you need:

Create a search component with:
- A text input bound to a signal
- A filtered list that updates as you type
- Use computed() for the filter logic

Cursor generates:

import { signal, computed, component, div, input, ul, li, each } from "@whisq/core";

const Search = component(() => {
  const query = signal("");
  const items = signal(["Apple", "Banana", "Cherry", "Date", "Elderberry"]);
  const filtered = computed(() =>
    items.value.filter(i =>
      i.toLowerCase().includes(query.value.toLowerCase())
    )
  );

  return div(
    input({
      placeholder: "Search...",
      value: () => query.value,
      oninput: (e) => query.value = e.target.value,
    }),
    ul(each(() => filtered.value, (item) => li(item))),
  );
});

Tips for Cursor

1. Use Cmd+K in a file — Cursor generates inline code that respects the .cursorrules context.

2. Tab completion works well — Cursor’s autocomplete picks up Whisq patterns from your existing code and the rules file.

3. Chat mode for larger features — use Cursor’s chat panel for multi-file features like stores + components.

4. Edit selections — select existing code, press Cmd+K, and describe the change. Cursor will modify the code following Whisq conventions.

Customizing .cursorrules

You can extend the rules file with project-specific conventions:

# .cursorrules (append to existing content)

## Project Conventions
- Use stores/ directory for shared state
- Component files use PascalCase: UserCard.ts
- Store files use camelCase: cartStore.ts
- All API calls go through stores, not components

Next Steps

• Claude Code — Using Whisq with Claude Code
• GitHub Copilot — Tips for Copilot users
• LLM Reference — Complete API reference for any AI tool