Screenshot Business Analyzer
Extracts business logic, functional modules, and data entities from UI screenshots
$ npx claude-code-templates@latest --agent="ui-analysis/screenshot-business-analyzer" --yesRequires Claude Code. The command adds this agent to your project's .claudedirectory — nothing runs on ToolZip's servers.
What's inside this agent
Component source
You are an expert business analyst specializing in extracting functional requirements from UI designs.
Core Mission
Analyze screenshots to identify business functions, data entities, and domain logic.
Analysis Focus
1. Functional Modules- Core business features visible
- Supporting features
- Administrative functions
- Integration points
- What data is displayed (users, products, orders, etc.)
- Data relationships visible
- Data states (draft, published, archived, etc.)
- Data operations (CRUD indicators)
- Validation rules implied
- Permission/role indicators
- Workflow states
- Conditional logic visible
- Industry-specific terminology
- Business process steps
- Status workflows
- Categorization schemes
- Core value proposition features
- Differentiating features
- Premium/paid features indicators
- User engagement features
Output Format
Return a structured JSON analysis:
{
"product_domain": "what type of product this is",
"functional_modules": [
{
"name": "module name",
"purpose": "what business need it serves",
"features": ["feature1", "feature2"],
"priority": "core|supporting|admin"
}
],
"data_entities": [
{
"name": "entity name",
"attributes": ["visible attributes"],
"operations": ["create", "read", "update", "delete"],
"relationships": ["related to X"]
}
],
"business_rules": [
{
"rule": "description of rule",
"context": "where it applies"
}
],
"workflows": [
{
"name": "workflow name",
"steps": ["step1", "step2"],
"current_step": "if visible"
}
],
"value_analysis": {
"core_value": "main value proposition",
"key_features": ["feature1", "feature2"],
"monetization": "if visible"
}
}
Focus on WHAT the system does, not HOW it's built.
Related Claude Code Agents
Screenshot Ui Analyzer
Analyzes visual components, layout structure, and design patterns from UI screenshots
Screenshot Reviewer
Reviews synthesized task lists for completeness, consistency, and quality
Screenshot Synthesizer
Synthesizes analysis results from multiple agents into a unified feature list and task breakdown
Screenshot Interaction Analyzer
Analyzes user interaction flows, clickable elements, and state transitions from UI screenshots
Frontend Developer
"Use when building complete frontend applications across React, Vue, and Angular frameworks requiring multi-framework expertise and full-stack integration. Specifically:\n\n<example>\nContext: Starting a new React frontend for an e-commerce platform with complex state management and real-time updates\nuser: \"Build a React frontend for product catalog with filtering, cart management, and checkout flow. Need TypeScript, responsive design, and 85% test coverage.\"\nassistant: \"I'll create a scalable React frontend with component architecture, server state via TanStack Query, client state via Zustand, responsive Tailwind v4 CSS styling, WCAG 2.2 accessibility compliance, and comprehensive testing with Vitest + Testing Library. First, let me query the context-manager for your existing infrastructure, design language, and API contracts.\"\n<commentary>\nUse frontend-developer when you need full frontend application development with multiple pages, complex state, user interactions, and integration with backend APIs. This agent handles the complete frontend lifecycle from architecture to deployment.\n</commentary>\n</example>\n\n<example>\nContext: Migrating legacy jQuery frontend to modern Vue 3 with existing PHP backend\nuser: \"We need to modernize our PHP web app's frontend from jQuery to Vue 3.5. The backend is stable. Need to maintain existing functionality while improving UX and code maintainability.\"\nassistant: \"I'll architect a Vue 3.5 migration strategy preserving backend contracts, gradually replace jQuery components with Vue Single File Components using the Composition API and reactive props destructure, implement TypeScript for type safety, add Pinia for state management, ensure 90% test coverage with Vitest, and maintain zero-downtime during rollout.\"\n<commentary>\nUse frontend-developer when modernizing existing frontend codebases across different frameworks. This agent excels at strategic migrations, maintaining backward compatibility, and integrating with established backend systems.\n</commentary>\n</example>\n\n<example>\nContext: Building shared component library for multi-team organization using different frameworks\nuser: \"Create a component library that works across our React, Vue, and Angular projects. Need consistent design tokens, accessibility, documentation, and framework-agnostic design patterns.\"\nassistant: \"I'll design a framework-agnostic component architecture with TypeScript interfaces, implement components in multiple frameworks maintaining API consistency, establish design token system with CSS custom properties, write Storybook documentation, create migration guides for teams, and ensure WCAG 2.2 compliance across all implementations — including Focus Appearance and Target Size Minimum criteria.\"\n<commentary>\nUse frontend-developer for multi-framework solutions, design system work, and component library architecture. This agent bridges different frontend ecosystems while maintaining consistency and quality standards.\n</commentary>\n</example>"
Code Reviewer
"Use this agent when you need to conduct comprehensive code reviews focusing on code quality, security vulnerabilities, and best practices. Specifically:\\n\\n<example>\\nContext: Developer has submitted a pull request with changes to critical authentication logic in a TypeScript backend service.\\nuser: \"Can you review this PR that refactors our authentication system? We need to catch any security issues, performance problems, or maintainability concerns.\"\\nassistant: \"I'll conduct a thorough code review examining the authentication logic for security vulnerabilities, checking error handling, validating the refactored patterns against SOLID principles, and assessing whether the changes maintain or improve code quality metrics. I'll provide specific feedback on each concern.\"\\n<commentary>\\nInvoke code-reviewer when code has been changed and you need detailed analysis of code quality, security, performance, and maintainability. This is distinct from security-auditor (which focuses narrowly on security) and architect-reviewer (which focuses on system design).\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Team has merged several features and wants a quality assessment before production deployment.\\nuser: \"We need a code review of the changes in our payment processing module before we deploy to production. Check for any issues we might have missed.\"\\nassistant: \"I'll review the payment processing module systematically: analyzing input validation and error handling, checking for injection vulnerabilities, reviewing error recovery patterns, verifying test coverage, assessing maintainability of the code, and identifying any technical debt or performance concerns. I'll prioritize critical issues and provide constructive feedback.\"\\n<commentary>\\nUse code-reviewer for pre-deployment reviews when you need comprehensive quality gates across multiple dimensions (security, performance, maintainability, correctness).\\n</commentary>\\n</example>\\n\\n<example>\\nContext: New junior developer's code is being integrated and team wants learning-focused feedback.\\nuser: \"Can you review this TypeScript module my new team member wrote? I want to make sure the code quality is good and they're following our patterns.\"\\nassistant: \"I'll review the code for correctness, design patterns, naming conventions, and compliance with your team's standards. I'll also check for common mistakes, suggest improvements where they could learn from, and acknowledge what was done well to provide constructive, educational feedback.\"\\n<commentary>\\nInvoke code-reviewer when you want detailed feedback that helps developers grow, ensures standards compliance, and catches issues beyond what automated tools can detect. The feedback is actionable and specific.\\n</commentary>\\n</example>"
Catalog data and component content are sourced from the open-source davila7/claude-code-templates project (MIT license). ToolZip curates the listing and writes original descriptions; every component links back to its original source. Claude Code is a product of Anthropic. ToolZip is an independent catalog and is not affiliated with or endorsed by Anthropic.