Frame Synthesis

Step 2: Build the Component Library

Aggregate all components across all screens and categorize:

## Component Library

### Navigation
| Component | Occurrences | Screens | Notes |
|-----------|-------------|---------|-------|
| Global Nav Bar | 15 screens | SCR-001 through SCR-015 | 9 tabs: ORDERING, HISTORY, BUDGETS... |

### Forms
| Component | Field Label | Field Type | Screens | Validation/Rules |
|-----------|------------|------------|---------|-----------------|
| Text Input | "Text To Be Printed" | textarea | SCR-007 | Free text, no limit noted |

### Data Tables
| Table | Columns | Screens | Sortable | Filterable |
|-------|---------|---------|----------|------------|
| Order History | Order #, Ordered By, Submit Date, ... | SCR-012 | Yes (columns) | By wholesaler, date |

### Actions
| Button/Action | Label | Type | Screens | Behavior |
|--------------|-------|------|---------|----------|
| Add to Cart | "ADD TO CART" | Primary | SCR-005, SCR-006 | Adds item, shows quantity |

Step 3: Infer System Architecture

From URLs, navigation patterns, and transitions across all chunks, reconstruct:

Navigation Map

Home (/)
├── ORDERING → Catalog Dashboard (/Core/Catalog/Dashboard)
│   ├── Product List (by brand)
│   ├── Product Detail (/order/customize?InstanceID=...)
│   └── Cart (/order/cart?OrderID=...)
│       └── Checkout/Shipping (/order/billing?OrderID=...)
├── HISTORY → Order Search (/Core/OrderSearch)
│   └── Order Detail (/order/summary?OrderID=...)
├── BUDGETS → Budget Dashboard
├── APPROVALS → ...
├── BAM → [External: BAM digital asset management]
├── FULFILLMENT → Procurement Operations
├── REPORTING → Reports (/Core/MoreReport)
├── CONTACTS → Vendor Contacts
├── LINKS → External Links (TradeWearables, Strand Shop)
└── ADMIN → Catalog Management (/Core/Admin/Catalog)
    └── Item Detail (inline panel)

Entity-Relationship Sketch

From visible data across all screens, produce an inferred ER diagram:

Wholesaler/Distributor (Account)
  ├── has many → Budget Allocations (per Brand Family, per Year)
  ├── has many → Orders
  │   └── has many → Order Line Items
  │       └── references → Product/Item (SKU)
  └── has many → Shipping Addresses

Product/Item
  ├── belongs to → Brand Family
  ├── belongs to → Catalog (Everyday or Program)
  ├── has → Customization Config (if customizable)
  └── has → Pack-out Details, Dimensions, Images

Program
  ├── has → Window Dates (open/close)
  ├── has many → Products
  └── has many → Pre-Orders (pending release)

User
  ├── has role → Sales Rep / Procurement / Brand Team / Admin
  ├── assigned to → one or more Wholesalers
  └── has → Budget Visibility (per Wholesaler)

Data Field Catalog

Compile every field name observed across all screens:

| Field Name | Data Type (inferred) | Found On Screen(s) | Entity |
|-----------|---------------------|--------------------|---------|
| SKU | String (e.g., "TNT1132") | SCR-005, SCR-014 | Product |
| Cost Center | String (e.g., "495WES") | SCR-007 | Order/Customization |

Step 4: Identify Patterns and Anomalies

Flag cross-cutting observations:

• Repeated patterns — components that appear identically across multiple screens (reusable component candidates)
• Inconsistencies — same data displayed differently on different screens
• Missing features — screens referenced in navigation that were never shown (empty states, error pages)
• Performance indicators — loading states, "fairly slow" noted in frames
• Error states captured — any error screens or broken functionality
• Accessibility gaps — visible issues with contrast, text size, alt text, etc.

Output

Save three documents:

1. docs/screen-catalog.md — Complete deduplicated screen inventory
2. docs/component-library.md — Unified UI component catalog
3. docs/system-architecture-map.md — Navigation, ER diagram, and field catalog

Collaboration

When working as part of an agent team:

• Receive chunk analyses from all Frame Analyst agents
• Share the Screen Catalog and Component Library with the UI Migration Agent
• Share the System Architecture Map and Data Field Catalog with the Data Schema Agent
• Share the Entity-Relationship Sketch with the Integration/API Agent
• Feed all documents to the Gap Analysis Agent as input
• Alert the team lead if any chunks appear to have missed screens (gaps in the transition log)