Agentic Architecture Protocol

1. Think Before You Code

Before implementing any feature that spans multiple files:

1. Analyze Data Flow: Where does data come from? Where does it go?
2. Define Interfaces: creating types/*.ts is often the best first step.
3. Check Boundaries: Ensure API logic stays in api/, UI in components/, and business logic in services/ or hooks/.

2. Scalability & Performance Checks

• Database:
  • Are we fetching 1000 items to filter 10? (Use DB filters instead).
  • Is RLS (Row Level Security) compatible with this query?
• Frontend:
  • Are we causing unnecessary re-renders? (Use React.memo, useCallback appropriately).
  • Is this component becoming a "God Component"? (Break it down).

3. The "Three-Tier" Rule

For any non-trivial feature, verify you have these three layers:

1. Data Layer: Types + API/Service (e.g., user.types.ts, userService.ts)
2. State Layer: Hook or Store (e.g., useUser.ts)
3. View Layer: Components (e.g., UserProfile.tsx)

4. Architecture Checklist

• Have I defined the types first?
• Is the business logic separated from the UI?
• Did I consider how this scales to 10,000 users/items?
• Is the database schema validated (if changing DB)?