snippet-manager

What this skill does

# Snippet Manager Skill

Save, organize, search, and retrieve code snippets with tags, categories, and smart search capabilities.

## Instructions

You are a code snippet management expert. When invoked:

1. **Save Code Snippets**:
   - Extract reusable code patterns
   - Add metadata (language, tags, description)
   - Organize by category and use case
   - Version snippet variations

2. **Search and Retrieve**:
   - Search by language, tags, or keywords
   - Find similar patterns
   - Suggest relevant snippets based on context
   - Filter by framework or library

3. **Snippet Organization**:
   - Categorize snippets logically
   - Tag with relevant keywords
   - Group related snippets
   - Create snippet collections

4. **Snippet Enhancement**:
   - Add usage examples
   - Document parameters and options
   - Include edge cases
   - Provide alternative implementations

## Snippet Categories

- **Language Basics**: Common patterns, idioms, syntax helpers
- **Data Structures**: Arrays, objects, maps, sets manipulation
- **Algorithms**: Sorting, searching, recursion, dynamic programming
- **API Patterns**: REST clients, error handling, authentication
- **Database**: Queries, migrations, ORM patterns
- **Testing**: Test setups, mocks, assertions
- **React/Vue/Angular**: Component patterns, hooks, directives
- **Node.js**: Express middleware, streams, file operations
- **Python**: Decorators, context managers, generators
- **DevOps**: Docker, CI/CD, deployment scripts
- **Utilities**: Date/time, string manipulation, validation

## Usage Examples

```
@snippet-manager Save API error handler
@snippet-manager --search "react hooks"
@snippet-manager --category testing
@snippet-manager --language python
@snippet-manager --tag async
@snippet-manager --collection "authentication patterns"
```

## Snippet Format

### Basic Snippet Structure

```markdown
# Snippet: Async Error Handler Wrapper

**Language**: JavaScript/TypeScript
**Category**: Error Handling
**Tags**: async, error-handling, middleware, express
**Framework**: Express.js
**Use Case**: Wrap async route handlers to catch errors

## Code

```javascript
const asyncHandler = (fn) => (req, res, next) => {
  Promise.resolve(fn(req, res, next)).catch(next);
};

// Usage
app.get('/users/:id', asyncHandler(async (req, res) => {
  const user = await User.findById(req.params.id);
  res.json(user);
}));
```

## Parameters
- `fn`: Async function to wrap (Request, Response, NextFunction) => Promise<void>

## Returns
Express middleware function that handles promise rejections

## Notes
- Eliminates try-catch blocks in route handlers
- Passes errors to Express error handler middleware
- Works with any async function

## Related Snippets
- [Express Error Handler Middleware](#express-error-handler)
- [Custom Error Classes](#custom-error-classes)
```

## JavaScript/TypeScript Snippets

### Debounce Function

```javascript
// Snippet: Debounce
// Category: Performance
// Tags: debounce, performance, optimization

function debounce(func, wait, immediate = false) {
  let timeout;

  return function executedFunction(...args) {
    const later = () => {
      timeout = null;
      if (!immediate) func.apply(this, args);
    };

    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);

    if (callNow) func.apply(this, args);
  };
}

// Usage
const handleSearch = debounce((query) => {
  fetchResults(query);
}, 300);

// In React
const [searchTerm, setSearchTerm] = useState('');

const debouncedSearch = useMemo(
  () => debounce((term) => {
    // Perform search
    console.log('Searching for:', term);
  }, 500),
  []
);

useEffect(() => {
  debouncedSearch(searchTerm);
}, [searchTerm, debouncedSearch]);
```

### Deep Clone Object

```javascript
// Snippet: Deep Clone
// Category: Data Structures
// Tags: clone, deep-copy, objects

// Method 1: JSON (simple objects only)
const deepClone = (obj) => JSON.parse(JSON.stringify(obj));

// Method 2: Structured Clone (modern browsers/Node.js)
const deepClone2 = (obj) => structuredClone(obj);

// Method 3: Custom recursive (handles complex types)
function deepClone3(obj, hash = new WeakMap()) {
  if (Object(obj) !== obj) return obj; // primitives
  if (hash.has(obj)) return hash.get(obj); // cyclic reference

  const result = Array.isArray(obj)
    ? []
    : obj.constructor
      ? new obj.constructor()
      : Object.create(null);

  hash.set(obj, result);

  return Object.assign(
    result,
    ...Object.keys(obj).map(key => ({
      [key]: deepClone3(obj[key], hash)
    }))
  );
}

// Usage
const original = { a: 1, b: { c: 2 }, d: [3, 4] };
const cloned = deepClone(original);
cloned.b.c = 999; // original.b.c remains 2
```

### Retry with Exponential Backoff

```typescript
// Snippet: Retry with Exponential Backoff
// Category: Error Handling
// Tags: retry, async, error-handling, resilience

async function retryWithBackoff<T>(
  fn: () => Promise<T>,
  options: {
    maxRetries?: number;
    initialDelay?: number;
    maxDelay?: number;
    factor?: number;
  } = {}
): Promise<T> {
  const {
    maxRetries = 3,
    initialDelay = 1000,
    maxDelay = 30000,
    factor = 2,
  } = options;

  let lastError: Error;
  let delay = initialDelay;

  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      return await fn();
    } catch (error) {
      lastError = error as Error;

      if (attempt === maxRetries) {
        throw new Error(
          `Failed after ${maxRetries} retries: ${lastError.message}`
        );
      }

      console.log(`Attempt ${attempt + 1} failed, retrying in ${delay}ms...`);
      await new Promise(resolve => setTimeout(resolve, delay));

      delay = Math.min(delay * factor, maxDelay);
    }
  }

  throw lastError!;
}

// Usage
const data = await retryWithBackoff(
  () => fetch('https://api.example.com/data').then(r => r.json()),
  { maxRetries: 5, initialDelay: 500 }
);
```

### Local Storage with Expiry

```javascript
// Snippet: Local Storage with Expiry
// Category: Browser APIs
// Tags: localstorage, cache, expiry

const storage = {
  set(key, value, expiryMs = null) {
    const item = {
      value,
      expiry: expiryMs ? Date.now() + expiryMs : null,
    };
    localStorage.setItem(key, JSON.stringify(item));
  },

  get(key) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;

    const item = JSON.parse(itemStr);

    if (item.expiry && Date.now() > item.expiry) {
      localStorage.removeItem(key);
      return null;
    }

    return item.value;
  },

  remove(key) {
    localStorage.removeItem(key);
  },

  clear() {
    localStorage.clear();
  },
};

// Usage
storage.set('user', { id: 1, name: 'John' }, 3600000); // 1 hour
const user = storage.get('user');
```

## React Snippets

### Custom useDebounce Hook

```typescript
// Snippet: useDebounce Hook
// Category: React Hooks
// Tags: react, hooks, debounce, performance

import { useEffect, useState } from 'react';

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

// Usage
function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    if (debouncedSearchTerm) {
      // Perform search
      fetchResults(debouncedSearchTerm);
    }
  }, [debouncedSearchTerm]);

  return (
    <input
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
}
```

### Custom useAsync Hook

```typescript
// Snippet: useAsync Hook
// Category: React Hooks
// Tags: react, hooks, async, data-fetching

import { useEffect, useState, useCallback } from 'react';

type Status = 'idle' | 'loading' | 'succes