| name | clone-analysis |
| description | Deep architecture analysis of selected target -- UI audit, code audit, API reverse-engineering |
Clone Analysis
When to Use
- Target product selected (output of clone-discovery)
- Need full technical understanding before writing spec
- Want to map every component, API call, and data flow
Process
- UI walkthrough -- open target in Playwright, screenshot every screen and interaction flow
- Map all pages/routes
- Capture modal dialogs, dropdowns, edge states
- Note animations, transitions, loading states
- Code audit (if open-source) -- clone repo, analyze:
- Project structure and framework choices
- Core algorithms and business logic
- Database schema and migrations
- Third-party dependencies
- API analysis -- open DevTools Network tab via Playwright:
- Capture all API endpoints (REST/GraphQL/WebSocket)
- Document request/response shapes
- Identify authentication flow (JWT, OAuth, API keys)
- Map rate limits and error handling patterns
- Component tree -- build hierarchical map of UI components
- Data flow diagram -- trace how data moves: user input --> frontend --> API --> AI model --> response --> UI
- Tech stack identification -- confirm: framework, language, hosting, AI provider, database, CDN
Output
- Architecture document (markdown) with:
- Component map (hierarchical)
- Tech stack summary table
- Data flow diagram (text-based or Mermaid)
- API endpoint catalog
- Screenshots archive (numbered, annotated)
Example
Target: Gamma.app. UI walkthrough reveals 12 core screens. Network analysis shows REST API at api.gamma.app with 34 endpoints. Tech stack: React + Next.js frontend, Python backend, GPT-4 for content generation, Unsplash for images. Component tree: Editor (BlockEditor, SlideCanvas, AIPanel, ThemePicker).
