init

.opencode/skills/sequential-thinking/references/examples-architecture.md

@@ -0,0 +1,94 @@
+# Example: Architecture Decision with Sequential Thinking
+
+**Problem**: Choose state management for growing React app.
+
+## Sequential Thinking Approach
+
+```
+Thought 1/4: Initial assessment
+
+React app growing complex. useState scattered across components.
+Need centralized state management.
+Options: Redux, MobX, Zustand, Context API, Jotai.
+
+Next: Define requirements
+
+Thought 2/5: Requirements (adjusted up)
+
+App needs:
+- Real-time updates (WebSocket)
+- Offline support
+- Complex nested state
+- Multiple devs (maintainability)
+- TypeScript (type safety)
+
+These eliminate simpler solutions.
+Next: Evaluate remaining options
+
+Thought 3/5 [REVISION of Thought 1]: Scope refinement
+
+Original assumption: Need global state management.
+Realization: Not all state needs centralization.
+
+Better breakdown:
+- Server state (API data): React Query
+- UI state (modals, forms): Local useState
+- Auth state: Context API
+- App-wide settings: Simple global store
+
+This reduces problem scope significantly.
+Changes evaluation criteria.
+Next: Re-evaluate with refined scope
+
+Thought 4/6: Re-evaluation (adjusted)
+
+Only need lightweight store for app-wide settings.
+Zustand fits:
+- Minimal boilerplate
+- Excellent TypeScript support
+- No provider wrapper
+- ~1KB size
+
+React Query handles server state (caching, refetch, offline).
+Most state stays local.
+
+Next: Verify this handles all requirements
+
+Thought 5/6 [HYPOTHESIS]: Hybrid approach
+
+Hypothesis: Zustand + React Query + local state solves needs.
+
+- Zustand: Theme, user prefs, global UI flags
+- React Query: All server data, caching, sync
+- useState: Component-local UI
+
+Benefits: Simple, performant, maintainable.
+Uncertainty: Real-time updates?
+
+Thought 6/6 [FINAL]: Verified solution
+
+React Query supports WebSocket via custom hooks.
+Zustand handles global UI simply.
+Local state for component-specific needs.
+
+Architecture decision:
+- Zustand for global UI state
+- React Query for all server interactions
+- Local useState for component state
+
+Confidence: High
+Assumptions: Team comfortable with React Query patterns
+Benefits: Simpler than Redux, more powerful than Context
+Trade-offs: Learning curve for React Query (but worthwhile)
+```
+
+## Key Insights
+
+1. **Scope revision crucial**: Original "need global state" reframed to specific state categories
+2. **Separation of concerns**: Different state types need different solutions
+3. **Hypothesis verification**: Confirmed WebSocket support before finalizing
+4. **Simpler is better**: Avoided over-engineering with heavy Redux solution
+
+## Impact of Revision
+
+Without Thought 3 revision, might have chosen Redux for all state—significant over-engineering. Revision led to more appropriate, simpler solution.