Skip to main content
affpapa.org
RU EN
subagent

screenshot-interaction-analyzer — Claude Code subagent: UI flows

A subagent that reads a UI screenshot and maps what can be clicked, where navigation leads and which states change. Useful when you have a screen image but no spec.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --agent ui-analysis/screenshot-interaction-analyzer
Open on GitHub

What screenshot-interaction-analyzer does

The subagent acts as an interaction designer. It looks at a screenshot and splits it into layers: clickable elements, input fields, navigation, state transitions and feedback patterns such as loading indicators or confirmation dialogs. Primary actions get a priority label — high, medium or low.

The result is structured JSON. It contains primary_actions, a navigation block with the user's current location, input_flows with fields and submission method, state_transitions as trigger-and-result pairs, and user_journeys listing possible paths. That shape is easy to hand off to tests, layout tickets or a prototype description.

The toolset is narrow: Read and TodoWrite. So it reads the image and keeps a task list, but never opens project code — checking the analysis against real markup is a separate step. The agent file lands at .claude/agents/screenshot-interaction-analyzer.md.

What it helps with

  • break a screenshot into clickable elements and rank them
  • reconstruct navigation and locate the current screen in it
  • list form fields and how the form is submitted
  • write down state transitions triggered by a click or tap
  • sketch possible user journeys from a single screen

Example prompts for the agent

  • analyze this checkout screenshot and return JSON with actions and transitions
  • look at this screenshot and list the input fields and filters on it
  • map the navigation in this screenshot and list possible user paths

How to install screenshot-interaction-analyzer

1claude-code-templates

npx claude-code-templates@latest --agent ui-analysis/screenshot-interaction-analyzer

2Manually: put the files in place

.claude/agents/screenshot-interaction-analyzer.md

For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

Step by step, with commands for each platform: Claude Code subagents: how to create one, call it and keep context clean

Questions about screenshot-interaction-analyzer

How do I install screenshot-interaction-analyzer in Claude?

Use the templates CLI: run npx claude-code-templates@latest --agent ui-analysis/screenshot-interaction-analyzer, then the file .claude/agents/screenshot-interaction-analyzer.md is added to your project.

What does screenshot-interaction-analyzer do?

It analyzes a UI screenshot and returns JSON covering clickable elements, navigation, input fields, state transitions and possible user journeys.

Which tools does the subagent have?

Only Read and TodoWrite. It reads the image and tracks tasks, but does not open or edit project code.

Similar subagents

All subagents for Agent setup: memory, context, orchestration →
screenshot nexu-io Captures app windows or pixel regions across operating systems. Useful for bug reports and design reviews. CX Codex +1 2,700installs interaction-patterns-components hueyexe Guides the agent through picking and critiquing UI interaction patterns and reusable components: navigation, tables, modals, forms, states. CX Codex +1 539installs interaction-design secondsky A skill for designing interface feedback: loading states, errors, empty screens, animation timing and accessibility. Useful when you need to plan how UI behaves, not just how it looks. CX Codex +1 441installs full-page-screenshot nexu-io This skill captures full-page screenshots of web pages using Chrome DevTools Protocol with no external dependencies. Handy for portfolios, case studies, and audit reports. CX Codex +1 2,800installs argent-screenshot-diff software-mansion Compares before and after screenshots to catch layout shifts, spacing, color and text rendering changes. CX Codex +1 25,000installs browser-screenshot-diff ruvnet Compares two recorded browser sessions by matching steps, screenshots, and accessibility snapshots. Use it for visual regression and replay checks. CX Codex +1 696installs

From the same set205

The whole set →
flutter-go-reviewer A Claude subagent that reviews pull request diffs and fresh code across Go, Protobuf, PostgreSQL, Flutter, Riverpod and GetX. 452installs laravel-expert A skill that makes Claude answer as a senior Laravel engineer: thin controllers, FormRequest validation, API Resources, queues and caching. Useful when you build or refactor a Laravel 10/11+ backend. 449installs penetration-test A slash command that runs penetration testing on a web app, API or auth flow and returns a report with fixes. 434installs session-learning-capture A slash command that pulls lessons out of the current Claude session and writes them into the project's memory files, so the next run starts informed. 425installs firecrawl-scraper A Claude skill for deep page scraping, screenshots, PDF parsing and site crawling through the Firecrawl API. 407installs python-pro A Claude skill that steers Python 3.12+ development: async patterns, typing, profiling, plus uv, ruff, pydantic and FastAPI. 399installs troubleshooting-guide Writes a troubleshooting document with diagnostic steps, common failures and shell commands for checking a system. Useful when a service needs a runbook. 397installs performance-budget-guard A Claude hook that measures your Next.js JS bundle after a build and blocks the deploy when it goes over the performance budget. 393installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor