Skip to content
Back to skills

Rebuild From Screenshot

ASecurity

Reproduce a chart from a screenshot — read the user's pasted image, diff against the live chart, then set symbol/indicators/drawings to match. Use when the user pastes a chart image and says "recreate this" or "set up my chart like this".

  • 595 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added September 2, 2026
ai-agents

Works with

  • mcp

Security analysis

A100/100

Scanned September 2, 2026

npx -y skills add FerroxLabs/wayland --skill rebuild-from-screenshot --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Rebuild From Screenshot?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Rebuild From Screenshot
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/ferroxlabs-rebuild-from-screenshot/badge)](https://www.skillsdirectory.com/skills/ferroxlabs-rebuild-from-screenshot)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: rebuild-from-screenshot
description: Reproduce a chart from a screenshot — read the user's pasted image, diff against the live chart, then set symbol/indicators/drawings to match. Use when the user pastes a chart image and says "recreate this" or "set up my chart like this".
---

# Rebuild From Screenshot

You are recreating a chart layout from a user-provided screenshot using vision + MCP tools.

## Step 1: Receive the Screenshot

The user pastes an image. Visually read it and extract:

- **Symbol** — from the top-left ticker label
- **Timeframe** — from the resolution selector (e.g., "5", "15", "1H", "D")
- **Chart type** — Candles, Heikin Ashi, Line, Bars, etc.
- **Indicators** — every pane + overlay study (names + approximate params like "EMA(200)")
- **Drawings** — trend lines, rectangles, horizontal levels, text
- **Visible date range** — leftmost to rightmost bar dates

## Step 2: Capture Live Chart State

1. `chart_vision_read` — returns combined image + readings (symbol, timeframe, indicator list, key values) in one call. Prefer this over separate `capture_screenshot` + `chart_get_state` for this workflow.

If `chart_vision_read` fails with `CHART_LOADING`, wait and retry once.

## Step 3: Diff

Compare the pasted screenshot against the `chart_vision_read` output. Build a minimal change list:

- Symbol match? If not, queue `chart_set_symbol`
- Timeframe match? If not, queue `chart_set_timeframe`
- Indicator set — which to add, which to remove, which to reconfigure
- Drawings — which to add (source coords from the screenshot), which to clear

## Step 4: Apply Changes

Execute in this order to minimize reflows:

1. `chart_set_symbol` (e.g., `"NASDAQ:TSLA"`)
2. `chart_set_timeframe` (e.g., `"60"`)
3. `chart_set_type` if needed (e.g., `"HeikinAshi"`)
4. For each missing indicator: `chart_manage_indicator` with `action: "add"` and `indicator:` set to the
   **full name** ("Moving Average Exponential", not "EMA"). The key is `indicator`, not `name` —
   an unknown key is silently dropped and the call then fails with "indicator is required for add action"
5. `indicator_set_inputs` to match params. It needs `entity_id` (from `chart_get_state`) and `inputs`
   as a JSON **string**, e.g. `inputs: '{"length": 200}'`
6. For each drawing:
   - Horizontal level → `draw_shape` with `shape: "horizontal_line"` and `point: { time, price }`.
     `time` is required even for a horizontal line — use the last bar time from `chart_get_visible_range`
   - Trend line → `draw_shape` with `shape: "trend_line"` + `point` and `point2`, both `{ time, price }`
   - Text → `draw_shape` with `shape: "text"` and a `text` string
7. If leftover studies/drawings don't belong: `chart_manage_indicator` remove + `draw_remove_one` by id

Concrete example — rebuilding a TSLA 1H chart with EMA(20)/EMA(200) and a horizontal at 250.00:

```
chart_set_symbol("NASDAQ:TSLA")
chart_set_timeframe("60")
chart_manage_indicator({ action: "add", indicator: "Moving Average Exponential" })
chart_manage_indicator({ action: "add", indicator: "Moving Average Exponential" })
chart_get_state()                 // read both entity_ids back
indicator_set_inputs({ entity_id: "<ema1 entity_id>", inputs: '{"length": 20}' })
indicator_set_inputs({ entity_id: "<ema2 entity_id>", inputs: '{"length": 200}' })
chart_get_visible_range()         // bars_range.to is the last bar time
draw_shape({ shape: "horizontal_line", point: { time: 1741964700, price: 250.00 } })
```

## Step 5: Verify

1. `chart_vision_read` again — confirm the new live state
2. Diff once more against the user's screenshot
3. If mismatches remain (e.g., indicator param still off), iterate on step 4

## Step 6: Report

Tell the user what was applied, what couldn't be matched exactly (e.g., proprietary indicators not recognizable by name), and show the final screenshot path.

## Error Notes

- `CHART_LOADING` — chart still rendering; wait 1-2s and retry
- `INDICATOR_NOT_FOUND` — name in screenshot isn't a built-in (likely custom Pine); ask user to load it manually
- If colors/styles matter for the match, mention them but don't chase perfection — focus on structural fidelity

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.