screenshot-feature-extractor

Extracts feature lists and development task checklists from product UI screenshots.

30.5k|3.5k|Updated Jul 4, 2025
One-click install
npx skills add https://github.com/davila7/claude-code-templates --skill screenshot-feature-extractor
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: screenshot-feature-extractor
Source: https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/development/screenshot-feature-extractor
Command: npx skills add https://github.com/davila7/claude-code-templates --skill screenshot-feature-extractor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Turning UI screenshots from competitors or design mockups into actionable development task lists is slow and error-prone when done manually, and important features or interactions are easily missed.

Core Features & Use Cases

  • Multi-Agent Screenshot Analysis: Runs three parallel analyzer agents (UI, interaction, business) to capture components, navigation flows, and domain logic from each screenshot.
  • Synthesis and Review Pipeline: A synthesizer agent merges parallel results into a unified task list, then a reviewer agent validates completeness and quality.
  • Structured Task Output: Produces checkbox-style development task checklists written to docs/plans/YYYY-MM-DD-<product>-features.md, describing WHAT to build without prescribing tech stacks.
  • Use Case: A product manager collects five screenshots of a competitor's app, runs the skill, and receives a deduplicated feature checklist organized by module for sprint planning.

Quick Start

Analyze the attached product screenshots and generate a development task checklist saved to docs/plans.

Frequently Asked Questions about screenshot-feature-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a task list from app screenshots?

Provide the screenshot file paths to the skill, which launches three parallel analyzer agents for UI, interaction, and business perspectives. A synthesizer agent then merges results into a checkbox task list saved under docs/plans/.

How to analyze competitor product screenshots for features?

Collect screenshots of the competitor's product and run the analysis pipeline on them. The skill deduplicates features across screens and highlights unique features and gaps useful for competitive analysis.

Can I analyze multiple screenshots from the same product at once?

Yes, batch analysis of multiple screens is supported. The skill determines whether screenshots belong to the same product and deduplicates features across all screens during synthesis.

Does the generated task list include technology stack recommendations?

No, the output deliberately describes WHAT to build in terms of features and interactions, not HOW. Tasks avoid implementation details like specific frameworks, APIs, or databases.

Where is the output file saved and in what format?

The final task list is written to docs/plans/YYYY-MM-DD-<product>-features.md in Markdown. It uses checkbox syntax with modules, main tasks, and subtasks following the references/output-format.md template.