learn-alternatives

# Show alternatives Compare different approaches to solve the same problem. ## Usage ``` /learn:alternatives # Compare approaches for current code /learn:alternatives auth # Compare authentication methods /learn:alternatives state # Compare state management options /learn:alternatives --detailed # Include code examples for each ``` ## Instructions 1. Identify the **problem being solved** (from context or argument) 2. Present **3-5 alternative approaches** 3. For each approach, explain: - What it is (one sentence) - When to use it - Trade-offs (pros/cons) 4. Provide a **recommendation** based on context 5. Optionally show code examples for top choices ## Response format ```markdown ## Problem: [What we're trying to solve] ### Approach 1: [Name] **What**: [One-sentence description] **When to use**: - [Scenario 1] - [Scenario 2] **Pros**: [List] **Cons**: [List] --- ### Approach 2: [Name] ... --- ## Comparison Table | Criteria | Approach 1 | Approach 2 | Approach 3 | |----------|------------|------------|------------| | Complexity | Low | Medium | High | | Performance | ★★☆ | ★★★ | ★★☆ | | Bundle size | Small | Medium | Large | | Learning curve | Easy | Medium | Steep | ## Recommendation **For your case**: [Recommended approach] because [reason based on context] **Consider instead if**: [Alternative scenarios] ``` ## Comparison criteria Standard criteria to evaluate (adjust based on problem): | Criteria | Description | |----------|-------------| | **Complexity** | How hard to implement and maintain | | **Performance** | Runtime speed, memory usage | | **Bundle size** | Impact on frontend bundle | | **Learning curve** | Time to understand and use correctly | | **Flexibility** | Ease of extending or modifying | | **Community** | Documentation, ecosystem, support | | **Testing** | How easy to test | | **Type safety** | TypeScript support quality | ## Depth modes ### Default - 3-4 alternatives - Brief description each - Comparison table - Recommendation ### `--detailed` - 4-5 alternatives - Code example for each - Detailed trade-offs - Migration considerations - Real-world case studies ### `--quick` - 2-3 alternatives - One-line each - Quick recommendation ## Example session ``` User: I'm using useState for form state. /learn:alternatives Claude: ## Problem: Managing Form State in React ### Approach 1: Multiple useState **What**: Separate useState for each field **When to use**: - Simple forms (< 5 fields) - No complex validation - No cross-field dependencies **Pros**: Simple, no dependencies, easy to understand **Cons**: Verbose with many fields, scattered state --- ### Approach 2: Single useState with Object **What**: One useState holding all fields as object **When to use**: - Medium forms (5-10 fields) - Need to reset entire form - Want cleaner code **Pros**: Grouped state, easy reset, cleaner **Cons**: Need spread operator, can cause unnecessary re-renders --- ### Approach 3: useReducer **What**: Reducer pattern for complex state transitions **When to use**: - Complex validation logic - Multi-step forms - Undo/redo functionality **Pros**: Predictable updates, handles complex logic, testable **Cons**: More boilerplate, learning curve --- ### Approach 4: Form Library (React Hook Form, Formik) **What**: Dedicated form state management library **When to use**: - Large forms (10+ fields) - Complex validation (async, cross-field) - Performance critical (many fields) **Pros**: Optimized re-renders, validation built-in, less code **Cons**: Dependency, learning curve, bundle size --- ## Comparison Table | Criteria | useState | useReducer | React Hook Form | |----------|----------|------------|-----------------| | Complexity | Low | Medium | Medium | | Performance | ★★☆ | ★★☆ | ★★★ | | Bundle size | 0kb | 0kb | ~8kb | | Validation | Manual | Manual | Built-in | | Best for | Simple | Complex logic | Large forms | ## Recommendation **For your case**: If this is a simple login/contact form, stick with **useState**. If you're building a multi-step checkout or admin form, consider **React Hook Form** for the validation and performance benefits. **Consider useReducer if**: You need undo/redo, complex state machines, or want reducer-style testing. ``` ## Common alternative comparisons | Topic | Typical Alternatives | |-------|---------------------| | **State** | useState, useReducer, Zustand, Redux, Jotai | | **Styling** | CSS Modules, Tailwind, styled-components, CSS-in-JS | | **Data fetching** | fetch, axios, React Query, SWR | | **Forms** | useState, React Hook Form, Formik | | **Auth** | JWT, sessions, OAuth, magic links | | **API design** | REST, GraphQL, tRPC, gRPC | | **Testing** | Jest, Vitest, Testing Library, Cypress | | **Databases** | PostgreSQL, MySQL, MongoDB, SQLite | $ARGUMENTS