--- name: snippet-manager description: Save, organize, search, and retrieve code snippets with tags, categories, and smart search capabi... --- # 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 ## 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( fn: () => Promise, options: { maxRetries?: number; initialDelay?: number; maxDelay?: number; factor?: number; } = {} ): Promise { 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(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] = useState(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 ( 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' | 'success' | 'error'; interface AsyncState { status: Status; data: T | null; error: Error | null; } function useAsync( asyncFunction: () => Promise, immediate = true ) { const [state, setState] = useState>({ status: 'idle', data: null, error: null, }); const execute = useCallback(async () => { setState({ status: 'loading', data: null, error: null }); try { const data = await asyncFunction(); setState({ status: 'success', data, error: null }); return data; } catch (error) { setState({ status: 'error', data: null, error: error as Error }); throw error; } }, [asyncFunction]); useEffect(() => { if (immediate) { execute(); } }, [execute, immediate]); return { ...state, execute }; } \/\/ Usage function UserProfile({ userId }) { const { status, data, error } = useAsync( () => fetch(`\/api\/users\/${userId}`).then(r => r.json()), true ); if (status === 'loading') return

Loading...<\/div>; if (status === 'error') return

Error: {error.message}<\/div>; if (status === 'success') return

User: {data.name}<\/div>; return null; } ``` ### Custom useLocalStorage Hook ```typescript \/\/ Snippet: useLocalStorage Hook \/\/ Category: React Hooks \/\/ Tags: react, hooks, localstorage, persistence import { useState, useEffect } from 'react'; function useLocalStorage( key: string, initialValue: T ): [T, (value: T | ((val: T) => T)) => void] { \/\/ Get from local storage then parse stored json or return initialValue const readValue = (): T => { if (typeof window === 'undefined') { return initialValue; } try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { console.warn(`Error reading localStorage key "${key}":`, error); return initialValue; } }; const [storedValue, setStoredValue] = useState(readValue); const setValue = (value: T | ((val: T) => T)) => { try { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); if (typeof window !== 'undefined') { window.localStorage.setItem(key, JSON.stringify(valueToStore)); } } catch (error) { console.warn(`Error setting localStorage key "${key}":`, error); } }; useEffect(() => { setStoredValue(readValue()); }, []); return [storedValue, setValue]; } \/\/ Usage function App() { const [theme, setTheme] = useLocalStorage('theme', 'light'); return (