Windsurf Integration

Windsurf is an AI-native IDE by Codeium. This guide shows how to integrate Hubify skills with Windsurf.

Prerequisites

• Windsurf IDE installed
• Hubify CLI installed (npm install -g hubify)
• Hubify initialized in your project (hubify init)

Setup

1. Initialize Hubify

cd your-project
hubify init

2. Install Skills

hubify install typescript-strict-mode react-best-practices

3. Configure Cascade

Add Hubify context to Windsurf's Cascade AI:

Create .windsurf/cascade.md:

# Project Context

## Hubify Skills

This project uses Hubify for AI skill management.

### Commands

- `hubify search "<query>"` - Find skills
- `hubify info <skill> --prompt` - View instructions
- `hubify report <skill> --success/--fail` - Report results

### Installed Skills

- typescript-strict-mode: TypeScript configuration
- react-best-practices: React patterns

### Workflow

Before complex tasks:
1. Search for relevant skills
2. Apply skill guidance
3. Report results

Using with Cascade

In Chat

@cascade Configure TypeScript strict mode for this project.

First, check the Hubify skill:
hubify info typescript-strict-mode --prompt

Then apply those guidelines.

Flows Integration

Create a Hubify flow in .windsurf/flows/:

# .windsurf/flows/hubify-skill.yaml
name: Apply Hubify Skill
steps:
  - run: hubify search "{{task}}"
    output: skills
  - run: hubify info {{skills[0].name}} --prompt
    output: instructions
  - apply: instructions
  - run: hubify report {{skills[0].name}} --success

Workspace Configuration

Rules File

Create .windsurf/rules.md:

# Windsurf Rules

## Hubify Integration

When working on coding tasks:

1. **Check for Skills**: Run `hubify search "<task>"` to find relevant skills
2. **Apply Guidance**: Use `hubify info <skill> --prompt` for instructions
3. **Report Results**: Run `hubify report <skill> --success/--fail`

## Installed Skills

### Coding Standards
- `typescript-strict-mode` - Strict TypeScript
- `eslint-recommended` - ESLint configuration

### Security
- `security-checklist` - Security review
- `input-validation` - Input sanitization

### Workflow
- `pr-review-checklist` - PR reviews
- `commit-conventions` - Commit messages

Settings Integration

Add to Windsurf settings:

{
  "cascade.context": {
    "includes": [
      ".windsurf/cascade.md",
      ".hubify/config.yaml"
    ]
  },
  "terminal.defaultProfile": "bash",
  "hubify.autoSuggest": true
}

Example Workflows

New Component

@cascade Create a new React component for user authentication.

Check Hubify skills first:
- hubify search "react authentication component"
- hubify info react-auth-patterns --prompt

Apply the skill's patterns to create the component.

After completion:
hubify report react-auth-patterns --success

Code Review

@cascade Review the changes in this PR.

Use Hubify's review checklist:
hubify info pr-review-checklist --prompt

Apply each checklist item to the code changes.

Configuration

@cascade Set up ESLint for this TypeScript project.

1. Check Hubify skill:
   hubify info eslint-typescript --prompt

2. Apply the configuration

3. Report:
   hubify report eslint-typescript --success

Flows Examples

Skill Discovery Flow

# .windsurf/flows/discover-skill.yaml
name: Discover Skill
trigger: manual
inputs:
  - name: task
    type: string
    prompt: "What task are you working on?"
steps:
  - shell: hubify search "{{task}}" --json
    output: results
  - display: |
      Found {{results.length}} skills:
      {{#each results}}
      - {{name}} ({{confidence}}% confidence)
      {{/each}}

Apply Skill Flow

# .windsurf/flows/apply-skill.yaml
name: Apply Skill
trigger: manual
inputs:
  - name: skillName
    type: string
steps:
  - shell: hubify info {{skillName}} --prompt
    output: prompt
  - cascade: |
      Apply the following skill instructions to the current file:

      {{prompt}}
  - shell: hubify report {{skillName}} --success

Soul Integration

Apply agent personalities:

hubify soul apply pragmatic-engineer

Reference in cascade context:

## Agent Personality

Using Hubify soul: pragmatic-engineer

Approach:
- Prefer simple solutions
- Consider maintenance costs
- Document decisions clearly

Terminal Integration

Windsurf's terminal works seamlessly with Hubify:

# Quick skill lookup
hubify search "api design" | head -5

# View skill details
hubify info rest-api-patterns --prompt

# Interactive report
hubify report rest-api-patterns --success --note "Applied to Express.js API"

Tips

Quick Search Shortcut

Add a keyboard shortcut for terminal:

1. Open Settings > Keyboard Shortcuts
2. Search for "terminal"
3. Bind "Create Terminal" to a convenient key
4. Use for quick Hubify searches

Context Awareness

Add to .windsurf/cascade.md:

## Project Tech Stack

- Framework: Next.js 14
- Language: TypeScript (strict)
- Styling: Tailwind CSS
- Testing: Vitest

## Relevant Hubify Skills

Match skills to your stack:
- nextjs-patterns
- typescript-strict-mode
- tailwind-best-practices
- vitest-testing-patterns

Automatic Reporting

Create a post-task reminder:

## After Completing Tasks

Always report Hubify skill usage:
- Success: `hubify report <skill> --success`
- Partial: `hubify report <skill> --partial --note "..."`
- Failure: `hubify report <skill> --fail --error "..."`

Include improvement suggestions when applicable.

Troubleshooting

Check Installation

hubify doctor

Verify Skills

hubify list

Update Skills

hubify update

Cascade Context Issues

Ensure .windsurf/cascade.md is readable:

cat .windsurf/cascade.md

Next Steps