GitHub Copilot

GitHub Copilot works with Whisq through pattern recognition. The more Whisq code in your project, the better Copilot’s suggestions become.

Getting Started

Copilot doesn’t read .cursorrules or CLAUDE.md the same way dedicated AI editors do. Instead, it learns from:

• Open files — keep a few Whisq components open as reference
• Existing code in the project — Copilot picks up patterns from your codebase
• Comments — describe what you want above where you’re writing

Writing Effective Comments

Guide Copilot with descriptive comments:

import { signal, computed, component, div, input, button, p, when } from "@whisq/core";

// Whisq component: email signup form
// - email input bound to signal
// - validation: must contain @
// - submit button disabled when invalid
// - show success message after submission
const EmailSignup = component(() => {
  // Copilot will generate the implementation here

Copilot sees the imports, the comment, and the component() call — it has enough context to generate correct Whisq code.

Patterns Copilot Handles Well

Signal creation and reactive text:

const name = signal("");
// Copilot correctly suggests:
span(() => `Hello, ${name.value}`);

Event handlers:

input({
  // After typing oninput, Copilot suggests the full handler:
  oninput: (e) => name.value = e.target.value,
});

Conditional rendering:

// After typing when(, Copilot picks up the pattern:
when(() => isLoading.value, () => p("Loading..."));

Patterns That Need Attention

Copilot occasionally generates React-style code in Whisq projects. Watch for these:

Common Mistake

// ❌ Copilot might generate JSX syntax
return <div>{count}</div>;

// ✅ Correct Whisq
return div(() => count.value);

Common Mistake

// ❌ Copilot might suggest useState
const [count, setCount] = useState(0);

// ✅ Correct Whisq
const count = signal(0);

Tips

1. Keep 2-3 Whisq files open — Copilot uses open tabs as context. Having good examples visible improves suggestions.

2. Accept and correct — when Copilot generates almost-right code, accept it and fix the small issues. It learns from your corrections within the session.

3. Use line-by-line completion — rather than expecting Copilot to generate entire components, let it complete one line at a time. It’s more accurate this way.

4. Start with the import — typing import { signal, computed, component, div sets the context. Copilot understands you’re writing Whisq.

5. Use Copilot Chat — paste the content of CLAUDE.md into a Copilot Chat session for better results on complex components.

Next Steps

• Claude Code — Deeper AI integration with CLAUDE.md
• Cursor — AI-first editor with .cursorrules support
• LLM Reference — Complete API for pasting into any AI