screenshot-feature-extractor
Converts visual product designs into actionable development checklists.
Install
mkdir -p .claude/skills/screenshot-feature-extractor && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4438" && unzip -o skill.zip -d .claude/skills/screenshot-feature-extractor && rm skill.zipInstalls to .claude/skills/screenshot-feature-extractor
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Analyze product screenshots to extract feature lists and generate development task checklists. Use when: (1) Analyzing competitor product screenshots for feature extraction, (2) Generating PRD/task lists from UI designs, (3) Batch analyzing multiple app screens, (4) Conducting competitive analysis from visual references.Key capabilities
- →Performs parallel feature identification from screenshots
- →Extracts interaction patterns and UX flows
- →Synthesizes visual data into structured task lists
- →Executes multi-agent reviews to minimize hallucination
- →Categorizes features from competitor UI examples
How it works
Uses a coordinator to split the image analysis into parallel streams, then synthesizes the output through sequential Reviewer agents to verify completeness.
Inputs & outputs
When to use screenshot-feature-extractor
- →Analyzing competitor product features
- →Generating development checklists from UI mockups
- →Batch processing multiple application screens for requirements
- →Conducting competitive analysis based on visuals
About this skill
Screenshot Analyzer (Multi-Agent)
Extract product features from UI screenshots using a coordinated multi-agent analysis pipeline.
Core principle: Describe WHAT to build (features/interactions), NOT HOW (no tech stack).
Multi-Agent Architecture
This skill orchestrates 5 specialized agents for comprehensive analysis:
┌─────────────────┐
│ Coordinator │
│ (this skill) │
└────────┬────────┘
│
┌───────────────────┼───────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ UI Analyzer │ │ Interaction │ │ Business │
│ (parallel) │ │ Analyzer │ │ Analyzer │
│ │ │ (parallel) │ │ (parallel) │
└────────┬────────┘ └────────┬────────┘ └────────┬────────┘
│ │ │
└───────────────────┼───────────────────┘
▼
┌─────────────────┐
│ Synthesizer │
│ (sequential) │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Reviewer │
│ (sequential) │
└─────────────────┘
Process
Phase 1: Screenshot Collection
Gather all screenshots to analyze:
- Read the screenshot file(s) provided by the user
- For each screenshot, note the file path and any context provided
- If multiple screenshots, determine if they are from the same product
Phase 2: Parallel Analysis
Launch THREE Task agents IN PARALLEL for each screenshot:
Agent 1: screenshot-ui-analyzer
Analyze this screenshot for UI components, layout structure, and design patterns.
Screenshot: [file path]
Return your analysis as JSON.
Agent 2: screenshot-interaction-analyzer
Analyze this screenshot for user interactions, navigation flows, and state transitions.
Screenshot: [file path]
Return your analysis as JSON.
Agent 3: screenshot-business-analyzer
Analyze this screenshot for business functions, data entities, and domain logic.
Screenshot: [file path]
Return your analysis as JSON.
IMPORTANT: Use the Task tool with THREE parallel calls in a single message to maximize efficiency.
Phase 3: Synthesis
After all parallel analyses complete, launch the synthesizer agent:
Agent 4: screenshot-synthesizer
Synthesize these analysis results into a unified development task list.
UI Analysis:
[paste UI analyzer result]
Interaction Analysis:
[paste Interaction analyzer result]
Business Analysis:
[paste Business analyzer result]
Product Name: [product name]
Output file: docs/plans/YYYY-MM-DD-<product>-features.md
Phase 4: Review
Launch the reviewer agent to validate the output:
Agent 5: screenshot-reviewer
Review this task list for completeness and quality.
Original screenshot(s): [file paths]
Task list: [synthesized output]
If issues found, provide corrections.
Phase 5: Output
- Write final task list to
docs/plans/YYYY-MM-DD-<product>-features.md - Use format from references/output-format.md
- Present summary to user
Key Guidelines
- Use
- [ ]checkbox format for all tasks - Break features into small, executable subtasks
- Focus on user interactions, not implementation details
- For multiple screenshots: deduplicate features across all screens
- For competitive analysis: highlight unique features and gaps
Benefits of Multi-Agent Approach
- Thoroughness - Three specialized perspectives catch more details
- Speed - Parallel analysis reduces total time
- Quality - Synthesis + Review ensures coherent, complete output
- Specialization - Each agent focuses on its domain expertise
When not to use it
- →With low-resolution or blurry screenshots that lack clear UI elements
- →For designs that are purely creative/abstract without standard interactions
- →When the user needs actual code output rather than task lists
Prerequisites
Limitations
- →Requires clear visual UI hierarchies to be effective
- →Multi-agent coordination can be non-deterministic
- →Cannot infer backend requirements from frontend visuals
How it compares
It keeps the output tech-agnostic and strictly feature-focused, whereas typical tools might guess component libraries or tech stacks prematurely.
Compared to similar skills
screenshot-feature-extractor side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| screenshot-feature-extractor (this skill) | 1 | 7mo | No flags | Intermediate |
| spec-workflow | 10 | 8mo | No flags | Intermediate |
| executing-plans | 6 | 3mo | No flags | Intermediate |
| feature-design-assistant | 6 | 7mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
spec-workflow
TencentCloudBase
Standard software engineering workflow for requirement analysis, technical design, and task planning. Use this skill when developing new features, complex architecture designs, multi-module integrations, or projects involving database/UI design.
executing-plans
obra
Use when you have a written implementation plan to execute in a separate session with review checkpoints
feature-design-assistant
davila7
Turn ideas into fully formed designs and specs through natural collaborative dialogue. Use when planning new features, designing architecture, or making significant changes to the codebase.
superpowers-plan
anthonylee991
Writes an implementation plan with small steps, exact files to touch, and verification commands. Use before making non-trivial changes.
create-steering-documents
jasonkneen
Create comprehensive steering documents for development projects. Generates project-specific standards, git workflows, and technology guidelines in .kiro/steering/ directory.
implementation-planner
galz10
Expertise in creating detailed, atomic, and safe implementation plans. Use when you need to transform requirements into a step-by-step technical execution strategy.