subagent

screenshot-synthesizer — Claude Code subagent: how to install

Q: How to install screenshot-synthesizer in Claude Code?

Run `npx claude-code-templates@latest --agent ui-analysis/screenshot-synthesizer` in your project root. Alternatively, place the agent definition directly into `.claude/agents/screenshot-synthesizer.md`.

Merges UI, interaction, and business analysis results into a single Markdown development task checklist.

Install into Claude Code · claude-code-templates All methods and platforms ↓

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

Open on GitHub

What screenshot-synthesizer does

This subagent acts like a technical product manager. It processes three separate JSON streams: interface layout analysis, interaction patterns, and business entities. The agent cross-references these sources, removes redundant items, and maps user interactions directly to corresponding business modules.

The resulting Markdown file contains prioritized modules, feature groups, and actionable task checkboxes with acceptance criteria. Every task focuses on expected system behavior rather than concrete libraries or frameworks.

Operation depends directly on prior analysis outputs. The subagent expects input in three JSON formats and requires the Read, Write, and TodoWrite tools to inspect files and record progress.

What it helps with

Merge UI, interaction, and business JSON files into one backlog
Remove overlapping feature descriptions across separate reports
Break system modules down into actionable checkbox items
Outline development scope without tying tasks to a specific tech stack

Example prompts for the agent

Synthesize ui.json, interaction.json, and business.json into a project task breakdown
Combine the three analysis files and write the prioritized task list to tasks.md

How to install screenshot-synthesizer

1claude-code-templates

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

2Manually: put the files in place

.claude/agents/screenshot-synthesizer.md

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

Manually: put the files in place

.codex/agents/screenshot-synthesizer.toml

Codex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/

Manually: put the files in place

.cursor/agents/screenshot-synthesizer.md

Cursor also reads .claude/agents/

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

Questions about screenshot-synthesizer

How to install screenshot-synthesizer in Claude Code?

Run npx claude-code-templates@latest --agent ui-analysis/screenshot-synthesizer in your project root. Alternatively, place the agent definition directly into .claude/agents/screenshot-synthesizer.md.

What does screenshot-synthesizer do?

It unifies interface, user flow, and business logic analysis files into a deduplicated Markdown checklist with clear task hierarchies.

What inputs does this subagent require?

You need three JSON outputs representing UI layout, user interaction flows, and business entities.

Similar subagents

All subagents for Notes, tasks and projects →

context-manager VoltAgent Community Organizes shared context for multi-agent projects in files, including state, task history, and decisions. Use it when agents need a clear shared workspace. 10,638installs code-architect official Anthropic Analyzes codebase patterns to produce architectural blueprints with file lists, component interfaces, data flows, and phased build sequences. 1,439installs search-specialist VoltAgent Community A subagent that hunts down precise information across many sources: builds queries, picks sources, filters results. Useful when the job is finding, not analyzing. 6,886installs content-marketer VoltAgent Community This subagent plans content, prepares SEO and multi-channel campaigns, and tracks their results. Use it to build an editorial plan or coordinate a campaign. 4,038installs product-manager VoltAgent Community This subagent helps shape product strategy, prioritize features, and plan a roadmap from user needs and business goals. 1,104installs project-manager VoltAgent Community Coordinates project plans, tracks schedules and budgets, and logs project risks. Useful when managing complex initiatives right inside Claude Code. 1,064installs

From the same set804

The whole set →

log Writes a finished task's report into your tracker or notes: time spent, status, commits. Useful when the coding happens in Claude but the record lives in Linear or Obsidian. 351installs create-worktrees Pulls every open pull request through GitHub CLI and sets up a separate git worktree for each branch under ./tree/. Useful when you want several PRs checked out at once without switching branches in the main checkout. 351installs test-automation-orchestrator This command inspects test files and project configuration, then helps plan parallel, sequential, or conditional test runs and CI/CD pipeline execution. 350installs setup-ci-cd-pipeline Configures CI/CD pipelines for GitHub Actions, GitLab CI, Azure Pipelines, or Jenkins with automated testing, security gates, and deployment flows. 346installs scientific-brainstorming Turns Claude Code into a research partner for scientific ideation. Useful when formulating novel hypotheses or spotting cross-disciplinary links. 345installs excalidraw This skill routes Excalidraw file work to subagents so large JSON diagrams stay out of the main context. Use it for flowcharts and architecture visuals. 342installs develop-web-game This skill lays out a development and testing loop for HTML and JavaScript games. Use it while adding game features and checking each meaningful change in a browser. 342installs branch-cleanup A Claude slash command that finds merged and stale branches, checks them before deletion, and tidies up both local and remote refs. 342installs