ReddRadar
Agent skill
windsurf-local-dev-loop
Configure Windsurf local development with hot reload and testing. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Windsurf. Trigger with phrases like "windsurf dev setup", "windsurf local development", "windsurf dev environment", "develop with windsurf".
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/windsurf-local-dev-loop
SKILL.md
Windsurf Local Dev Loop
Overview
Set up a fast, reproducible local development workflow for Windsurf.
Prerequisites
- Completed
windsurf-install-authsetup - Node.js 18+ with npm/pnpm
- Code editor with TypeScript support
- Git for version control
Instructions
Step 1: Create Project Structure
my-windsurf-project/
├── src/
│ ├── windsurf/
│ │ ├── client.ts # Windsurf client wrapper
│ │ ├── config.ts # Configuration management
│ │ └── utils.ts # Helper functions
│ └── index.ts
├── tests/
│ └── windsurf.test.ts
├── .env.local # Local secrets (git-ignored)
├── .env.example # Template for team
└── package.json
Step 2: Configure Environment
bash
# Copy environment template
cp .env.example .env.local
# Install dependencies
npm install
# Start development server
npm run dev
Step 3: Setup Hot Reload
json
{
"scripts": {
"dev": "tsx watch src/index.ts",
"test": "vitest",
"test:watch": "vitest --watch"
}
}
Step 4: Configure Testing
typescript
import { describe, it, expect, vi } from 'vitest';
import { WindsurfClient } from '../src/windsurf/client';
describe('Windsurf Client', () => {
it('should initialize with API key', () => {
const client = new WindsurfClient({ apiKey: 'test-key' });
expect(client).toBeDefined();
});
});
Output
- Working development environment with hot reload
- Configured test suite with mocking
- Environment variable management
- Fast iteration cycle for Windsurf development
Error Handling
| Error | Cause | Solution |
|---|---|---|
| Module not found | Missing dependency | Run npm install |
| Port in use | Another process | Kill process or change port |
| Env not loaded | Missing .env.local | Copy from .env.example |
| Test timeout | Slow network | Increase test timeout |
Examples
Mock Windsurf Responses
typescript
vi.mock('@windsurf/sdk', () => ({
WindsurfClient: vi.fn().mockImplementation(() => ({
// Mock methods here
})),
}));
Debug Mode
bash
# Enable verbose logging
DEBUG=WINDSURF=* npm run dev
Resources
Next Steps
See windsurf-sdk-patterns for production-ready code patterns.
Didn't find tool you were looking for?