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)?