npx skills add ...
npx skills add zhaono1/agent-playbook --skill architecting-solutions
Designs technical solutions and architecture. Use when user says "design solution", "architecture design", "technical design", or "方案设计" WITHOUT mentioning PRD. For PRD-specific work, use prd-planner skill instead.
npx skills add zhaono1/agent-playbook --skill architecting-solutions
Analyzes requirements and creates technical solution documents for software implementation.
Use this skill when you need to:
Install through apb skills add ./skills/architecting-solutions --scope global --target all --link when possible.
The skill guides Claude through a structured workflow:
{PROJECT_ROOT}/docs/IMPORTANT: Use prd-planner when the user asks for a PRD. This skill writes non-PRD architecture and solution artifacts to the project's docs/ folder.
Copy this checklist and track progress:
Ask these questions to understand the problem:
Critical for Refactoring:
CRITICAL: Before proposing a refactoring, ask:
Look for:
For unfamiliar domains, search for best practices.
Before settling on a solution, ALWAYS present multiple options:
Example:
Ask user BEFORE writing the solution document:
For each major decision, document:
| Option | Pros | Cons | Selected |
|---|---|---|---|
| Approach A | Pro1, Pro2 | Con1 | ✓ |
| Approach B | Pro1 | Con1, Con2 |
IMPORTANT: Always write the solution document to the project's docs/ directory, never to plan files or hidden locations. Use prd-planner instead when the requested artifact is a PRD.
Output location: {PROJECT_ROOT}/docs/{feature-name}-solution.md
Example:
/Users/user/my-project/, write to /Users/user/my-project/docs/feature-name-solution.mddata-refresh-logic-refactoring-solution.mdBefore finalizing:
For bugs, state, refresh, or lifecycle issues, verify:
Common mistakes include assuming separate instances share state, leaving inert callbacks, checking only the first link in a chain, and confusing an event's registration with proof that it fired.
ALL existing state is accounted for: List every piece of state being migrated
ALL consumers are identified: Find every file that uses the code being changed
Dependency usage points are covered: Every consumer of the changed interface is identified
| Anti-Pattern | Better Approach |
|---|---|
| "Optimize the code" | "Reduce render time from 100ms to 16ms by memoizing expensive calculations" |
| "Make it faster" | "Implement caching to reduce API calls from 5 to 1 per session" |
| "Clean up the code" | "Extract duplicate logic into shared utility functions" |
| "Fix the bug" | "Handle null case in getUserById when user doesn't exist" |
| "Refactor the state layer" | "Migrate from Context+Ref to a centralized store: " |
| Over-engineering | Start with simplest solution, extend only if needed |
Illustrative lesson: A request to refresh after an operation completes may need only an existing completion signal, not a new shared state subsystem. Trace the current lifecycle before proposing a broader abstraction.
Key: Comprehensive solutions should be a CHOICE, not the DEFAULT.
docs/ folder| Wrong | Correct | Why |
|---|---|---|
| "Shared state" | "Each instance polls independently" | Hooks don't share state unless explicitly connected |
| "Pending changes" | "Pending count decreases" | Code checks !isPending && prevIsPending (true→false) |
| "Triggers refresh" | "Calls navigation.goBack() which triggers..." | Show the complete chain |
Bad: "onRefresh triggers data refresh" Good:
Include file paths and line numbers for each step!
If module has 5 operations (Create/Edit/Delete/Import/Export), test all 5. Don't just test the 2 you're focused on.
Draw out the timeline:
This shows WHY it doesn't work.
| Mistake | Example | Fix |
|---|---|---|
| Empty callback | onRefresh: () => {} | Implement actual logic or remove |
| Incomplete root cause | "It doesn't refresh" | Explain WHY: timing/scope/disconnected |
| Missing call chain | "Somehow triggers refresh" | Document every step with file:line |
| Incomplete testing | Only test Create/Edit | Also test Delete/Import/Export |
| Assumptions as facts | "revalidateOnFocus fires on modal close" | Verify: only fires on actual focus change |
| Wrong trigger condition | "Pending changes" | Code shows: !isPending && prevIsPending (decreases) |
# Find all imports/usages of a module
grep -r "existing-interface" src/ --include="*.ts" --include="*.tsx"
grep -r "related-event" src/ --include="*.ts" --include="*.tsx"Problem: Data doesn't refresh after operation
Option 1 (Minimal): Hook into existing pending request count decrease
- Changes: 1-2 files
- Risk: Low
- Selected: ✓
Option 2 (Medium): Add refresh callback through existing shared context
- Changes: 3-5 files
- Risk: Medium
Option 3 (Comprehensive): Migrate to a centralized state-store pattern
- Changes: 10+ files, new atoms/actions
- Risk: High
- Time: 2-3 days