cli-tool/components/skills/development/screenshot-feature-extractor/SKILL.md
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.
npx skillsauth add davila7/claude-code-templates screenshot-feature-extractorInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
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).
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) │
└─────────────────┘
Gather all screenshots to analyze:
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.
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
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.
docs/plans/YYYY-MM-DD-<product>-features.md- [ ] checkbox format for all taskstools
No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity - these platforms have their own patterns, pitfalls, and breaking points. This skill covers when to use which platform, how to build reliable automations, and when to graduate to code-based solutions. Key insight: Zapier optimizes for simplicity and integrations (7000+ apps), Make optimizes for power
tools
Use only when the user explicitly asks to stage, commit, push, and open a GitHub pull request in one flow using the GitHub CLI (`gh`).
tools
Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost money and angry customers. With it, workflows resume exactly where they left off. This skill covers the platforms (n8n, Temporal, Inngest) and patterns (sequential, parallel, orchestrator-worker) that turn brittle scripts into production-grade automation. Key insight: The platforms make different tradeoffs. n8n optimizes for accessibility
development
Trigger.dev expert for background jobs, AI workflows, and reliable async execution with excellent developer experience and TypeScript-first design. Use when: trigger.dev, trigger dev, background task, ai background job, long running task.