| name | architectural-thinking |
| description | Pre-planning procedure for new tasks. Visualize end state, identify structure, and anticipate problems before coding. Use when starting a new feature, scaffolding a project, or planning a multi-file change. |
| user-invocable | false |
Architectural Thinking
Spend 30 seconds thinking before writing code. Plan the shape of the solution first.
Before Creating Your Todo List
- Visualize the end state -- What files will exist? What's the component hierarchy? How does data flow?
- Anticipate problems -- What could break? (types, imports, circular dependencies) Are there conflicting patterns in the codebase?
- Design the experience -- What's the visual identity? What makes this feel polished rather than generic?
- Order the work -- Create todos in dependency order. Group related changes. Put configuration and setup first.
Example
Task: "Build a product catalog with filtering"
Think first:
Files needed: ProductCard, ProductGrid, FilterSidebar, useProducts hook, types.ts
Data flow: useProducts fetches → FilterSidebar updates query → ProductGrid re-renders
Risk: Filter state and URL sync could cause re-render loops
Order: types → hook → ProductCard → ProductGrid → FilterSidebar → integration
Then create the todo list and execute confidently.
Avoid
- Jumping straight into coding without understanding the full scope
- Creating files in random order, discovering missing dependencies mid-build
- Designing components in isolation without thinking about how they compose
