From windsurf-pack
Builds Windsurf extensions with VS Code API to track editor events like file saves, active editor changes, terminal output, and send to external systems.
How this skill is triggered — by the user, by Claude, or both
Slash command
/windsurf-pack:windsurf-webhooks-eventsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Windsurf is built on VS Code and supports the full VS Code Extension API. Build custom extensions to track workspace events, integrate with external tools, and extend Cascade's capabilities. This skill covers extension development specific to the Windsurf environment.
Windsurf is built on VS Code and supports the full VS Code Extension API. Build custom extensions to track workspace events, integrate with external tools, and extend Cascade's capabilities. This skill covers extension development specific to the Windsurf environment.
yo and generator-code for scaffolding# Install scaffolding tools
npm install -g yo generator-code
# Generate extension
yo code
# Select: New Extension (TypeScript)
# Name: my-windsurf-extension
// src/extension.ts
import * as vscode from "vscode";
export function activate(context: vscode.ExtensionContext) {
console.log("Extension active in Windsurf");
// Track file saves
const saveListener = vscode.workspace.onDidSaveTextDocument(
async (document) => {
const diagnostics = vscode.languages.getDiagnostics(document.uri);
const errors = diagnostics.filter(
(d) => d.severity === vscode.DiagnosticSeverity.Error
);
if (errors.length > 0) {
vscode.window.showWarningMessage(
`${document.fileName}: ${errors.length} error(s) after save`
);
}
}
);
// Track active editor changes
const editorListener = vscode.window.onDidChangeActiveTextEditor(
(editor) => {
if (editor) {
const lang = editor.document.languageId;
const lines = editor.document.lineCount;
console.log(`Opened: ${editor.document.fileName} (${lang}, ${lines} lines)`);
}
}
);
// Track terminal output
const terminalListener = vscode.window.onDidWriteTerminalData((event) => {
// Can monitor for specific patterns (errors, warnings)
if (event.data.includes("ERROR") || event.data.includes("FAIL")) {
vscode.window.showWarningMessage("Error detected in terminal output");
}
});
context.subscriptions.push(saveListener, editorListener, terminalListener);
}
// src/webhook.ts
import * as vscode from "vscode";
interface WorkspaceEvent {
event: string;
file?: string;
language?: string;
timestamp: string;
metadata?: Record<string, unknown>;
}
async function sendEvent(event: WorkspaceEvent): Promise<void> {
const webhookUrl = vscode.workspace
.getConfiguration("windsurf-events")
.get<string>("webhookUrl");
if (!webhookUrl) return;
try {
await fetch(webhookUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(event),
});
} catch (err) {
console.warn("Webhook delivery failed:", err);
}
}
// Debounce frequent events
const debounceMap = new Map<string, NodeJS.Timeout>();
function debouncedSend(event: WorkspaceEvent, delayMs = 2000): void {
const key = `${event.event}:${event.file}`;
clearTimeout(debounceMap.get(key));
debounceMap.set(
key,
setTimeout(() => {
sendEvent(event);
debounceMap.delete(key);
}, delayMs)
);
}
{
"name": "windsurf-events",
"displayName": "Windsurf Events",
"version": "1.0.0",
"engines": { "vscode": "^1.85.0" },
"activationEvents": ["onStartupFinished"],
"main": "./dist/extension.js",
"contributes": {
"configuration": {
"title": "Windsurf Events",
"properties": {
"windsurf-events.webhookUrl": {
"type": "string",
"description": "URL to send workspace events to"
},
"windsurf-events.trackSaves": {
"type": "boolean",
"default": true,
"description": "Track file save events"
},
"windsurf-events.trackErrors": {
"type": "boolean",
"default": true,
"description": "Track terminal error events"
}
}
},
"commands": [
{
"command": "windsurf-events.showStatus",
"title": "Windsurf Events: Show Status"
}
]
}
}
# Build
npm run compile
# or: npm run build
# Package as .vsix
npx vsce package
# Install in Windsurf
windsurf --install-extension windsurf-events-1.0.0.vsix
# Or publish to marketplace
npx vsce publish
1. Open Extension Development Host: F5 in Windsurf
2. A new Windsurf window opens with extension loaded
3. Open a file, save it, trigger events
4. Check Output panel > "Windsurf Events" channel
5. Verify webhook delivery (use https://webhook.site for testing)
| Issue | Cause | Solution |
|---|---|---|
| Extension not activating | Wrong activationEvents | Use onStartupFinished for always-on |
| Webhook fails | Network/URL issue | Queue locally, retry with backoff |
| High CPU usage | Too many listeners | Debounce frequent events (saves, edits) |
| API incompatibility | Windsurf vs VS Code version | Pin engines.vscode version |
vsce package fails | Missing fields | Add publisher, repository, license |
// Track AI acceptance rate per developer
vscode.languages.registerInlineCompletionItemProvider(
{ pattern: "**" },
{
provideInlineCompletionItems(document, position) {
// Log completion requests (don't interfere with Supercomplete)
console.log(`Completion at ${document.fileName}:${position.line}`);
return []; // Return empty -- let Windsurf handle completions
}
}
);
# Start a test webhook receiver
npx -y webhook-relay -p 3456
# Configure extension: windsurf-events.webhookUrl = "http://localhost:3456"
For multi-environment setup, see windsurf-multi-env-setup.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin windsurf-packInstalls and configures Windsurf IDE extensions for language support, linting, formatting, Git, and productivity. Generates team configs, settings.json, and documentation for rapid setup.
Walks new Windsurf users through Supercomplete completions, Cascade Write/Chat modes, and Command inline edits via TypeScript/Express examples. For setup testing and basic workflow learning.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.