Skip to main content
affpapa.org
RU EN
skill

screenshot-feature-extractor — Claude Code skill for screenshot analysis

Turns interface screenshots into a feature and task checklist. Use it to plan work from UI designs or visual references.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill development/screenshot-feature-extractor
Open on GitHub

What screenshot-feature-extractor does

The skill examines screenshots and produces development tasks focused on features and user actions rather than a technology stack. When several screens are provided, it removes duplicate items. The final checklist goes to docs/plans/YYYY-MM-DD-<product>-features.md and uses - [ ] task markers.

Five subagents handle the workflow. Three inspect the UI, interactions, and business functions at the same time; a synthesizer combines their findings, then a reviewer checks the result. The process relies on all five subagents and the references/output-format.md file for its final stages, so those components need to be available.

Give Claude Code the screenshots and any relevant context. The skill can also compare screens from different products and list features and gaps found in the visual references.

What it helps with

  • extract interface features from screenshots
  • turn a UI design into development tasks
  • merge several screens into one deduplicated checklist
  • compare product features across visual references

Example prompts for the agent

  • Analyze the screenshots in design/ and create a development task list.
  • Turn checkout.png into a checklist of features and user interactions.
  • Compare the screens in screens/ and write one plan without duplicate tasks.

How to install screenshot-feature-extractor

1claude-code-templates

npx claude-code-templates@latest --skill development/screenshot-feature-extractor

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill screenshot-feature-extractor -a claude-code

3Manually: put the files in place

~/.claude/skills/screenshot-feature-extractor/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/screenshot-feature-extractor/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about screenshot-feature-extractor

How do I install screenshot-feature-extractor in Claude Code?

Run npx claude-code-templates@latest --skill development/screenshot-feature-extractor.

What does screenshot-feature-extractor do?

It analyzes interface screenshots and writes development tasks about product features and user interactions to a plan file.

How does it handle multiple screenshots?

Three subagents inspect each screen in parallel, then a synthesizer merges their findings. Repeated features are removed from the final list.

Similar skills

All skills for Agent setup: memory, context, orchestration →
setup-matt-pocock-skills Matt Pocock This skill configures a repository for Matt Pocock's engineering skills by setting its issue tracker, triage labels, and domain docs layout. Run it before using the other skills. 1,052,851installs ask-matt Matt Pocock Routes you to the right Matt Pocock skill or flow for the task at hand. Use it when you need a starting point for a feature, prototype, incoming issue, or hard bug. 766,587installs to-tickets Matt Pocock Turns a plan, spec, or conversation into small end-to-end tickets with explicit blockers. Use it to agree on the work breakdown before tickets go to a tracker. 711,230installs writing-plans Jesse Vincent This skill turns requirements for a multi-step task into an implementation plan before code changes begin. It helps when another engineer needs exact files, interfaces, and checks. CX Codex 282,859installs caveman-review JuliusBrussee Turns code review comments into one line per finding: location, problem, fix. Useful when a diff or PR needs a fast pass without the filler. CX Codex +1 411,800installs caveman-compress JuliusBrussee Compresses CLAUDE.md, todo lists, and other prose files into a shorter format while retaining a readable backup. CX Codex +1 411,500installs

From the same set495

The whole set →
move-code-quality Checks Move packages against the Move Book code quality checklist and flags what breaks Move 2024 Edition rules. 100installs doc A skill for reading, creating and editing .docx files when layout matters — tables, page breaks, fonts. Useful when the document goes to a client. 99installs electron-development A Claude skill for building Electron desktop apps: context isolation, safe IPC through preload, electron-builder packaging and auto-update. 98installs statsmodels A skill for regressions, GLM, time series and hypothesis tests inside Claude. Useful when you need inference on coefficients, not just predictions. 97installs lint-and-validate This skill runs linting, type checks, and security audits after code changes. Use it to keep project checks in the editing loop. 96installs commit This skill formats commit messages using Sentry conventions, including issue references. Use it when you want a consistent Git history for a Sentry project. 94installs worktree-init Turns a list of tasks into separate git worktrees, each ready for its own Claude session in a Ghostty panel. 94installs observability-engineer Walks you through monitoring, logging and tracing design, SLI/SLO targets and incident response. Useful when you run many services and alert noise gets out of hand. 93installs

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