# screenshot-feature-extractor

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

- skill · `type=skill` · Claude Code · 97 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/screenshot-feature-extractor
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/screenshot-feature-extractor

## What it 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.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/screenshot-feature-extractor
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill screenshot-feature-extractor -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/screenshot-feature-extractor/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/screenshot-feature-extractor/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/screenshot-feature-extractor/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/screenshot-feature-extractor/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates screenshot-feature-extractor
```

2. **Manually: put the files in place**
- File: `.github/skills/screenshot-feature-extractor/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/screenshot-feature-extractor
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/screenshot-feature-extractor/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/screenshot-feature-extractor

## When to use it
- 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
- 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.

## Similar
- [setup-matt-pocock-skills](https://affpapa.org/en/nevibecode/skills/setup-matt-pocock-skills.md) — skill · 1052851 installs
- [ask-matt](https://affpapa.org/en/nevibecode/skills/ask-matt.md) — skill · 766587 installs
- [to-tickets](https://affpapa.org/en/nevibecode/skills/to-tickets.md) — skill · 711230 installs
- [writing-plans](https://affpapa.org/en/nevibecode/skills/writing-plans.md) — skill · 282859 installs
- [caveman-review](https://affpapa.org/en/nevibecode/skills/caveman-review.md) — skill · 411800 installs
- [caveman-compress](https://affpapa.org/en/nevibecode/skills/caveman-compress.md) — skill · 411500 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md