snapshot-to-api

by ianzlm

Install this Skill

curl -fsSL -o snapshot-to-api.zip https://skill.seembox.com/api/v1/skills/snapshot-to-api/download && unzip snapshot-to-api.zip

Download snapshot-to-api.zip

SKILL.md About

---
name: snapshot-to-api
description: |
  Discover hidden APIs behind web pages and replace expensive browser snapshots with lightweight API calls.
  Saves ~15-20x tokens and 2x speed on browser automation tasks.

**Use when:**
  (1) You just completed a browser snapshot workflow and want to optimize it
  (2) User asks to "find the API" or "make this faster" for a browser task
  (3) A snapshot is too large, truncated, or unreliable
  (4) You need structured data from a web page (tables, lists, details)
  (5) User mentions "api discovery", "snapshot to api", "browser optimization"
---

# Snapshot to API

Replace browser snapshots with direct API calls. **15-20x fewer tokens, 2x faster, 100% complete data.**

## Why

Browser snapshots return the full DOM tree — menus, buttons, refs, styling — when you only need the data.
A typical table page: **45 KB DOM → ~15k tokens, ~15% useful**. The same data via API: **3.5 KB JSON → ~1k tokens, ~90% useful**.

## Core Workflow

### Step 1: Open the target page

```
browser(action=open, url="<target_url>", profile=openclaw)
```

Purpose: establish cookie/session auth. You don't need to read the page.

### Step 2: Discover API endpoints

```javascript
// Evaluate in the browser tab
() => {
  const entries = performance.getEntriesByType('resource')
    .filter(e => e.name.includes(window.location.hostname) &&
                 !e.name.match(/\.(js|css|png|jpg|webp|svg|woff|ttf)(\?|$)/))
    .map(e => e.name);
  return JSON.stringify(entries, null, 2);
}
```

This returns all API calls the page made during loading — the data sources behind the UI.

### Step 3: Identify the data API

Look for URLs containing:
- `/api/`, `/v2/`, `/v3/`
- Keywords matching your data need (`schema`, `table`, `list`, `detail`, `query`, `search`)
- `GET` endpoints with query params like `id=`, `name=`, `type=`

Ignore: analytics, tracking, user-info, config, SDK URLs.

### Step 4: Test the API via evaluate

```javascript
// Replace <API_PATH> with the path from Step 3
() => {
  return fetch('<API_PATH>')
    .then(r => r.json())
    .then(data => {
      // Inspect the structure
      const keys = Object.keys(data?.data || data || {});
      return JSON.stringify({
        topLevelKeys: keys,
        sample: JSON.stringify(data).substring(0, 1000)
      });
    });
}
```

### Step 5: Extract structured data

Once you understand the response shape, write a focused extractor:

```javascript
() => {
  return fetch('<API_PATH>')
    .then(r => r.json())
    .then(data => {
      // Extract only what you need — return clean JSON
      return JSON.stringify({ /* structured result */ });
    });
}
```

### Step 6: Close the browser tab

```
browser(action=close, targetId="<targetId>")
```

## Param Tuning

Many APIs need specific parameters to return full data. Common pattern:

1. Start with the full URL the page used (from Step 2)
2. Try removing parameters one at a time
3. ⚠️ Some params return **empty data instead of errors** when missing — always verify field counts

## Cross-Environment Variations

Different environments (regions, clusters, staging/prod) may have:
- **Different base domains** (e.g., `app.example.com` vs `app-eu.example.com`)
- **Different API path prefixes** (e.g., `/api/v2/` vs `/api_eu/v2/`)
- **Different ID suffixes** in query params (e.g., `@0` vs `@10`)

Always test each environment separately.

## When NOT to Use

- **Write operations** (forms, submissions) — keep using browser automation for safety
- **Pages requiring user interaction** to load data (click-to-expand, infinite scroll APIs)
- **Auth flows** that need OAuth redirects — cookie-based auth only
- **Frequently changing APIs** — snapshot may be more maintainable as fallback

## Comparison Reference

See `references/comparison.md` for detailed benchmark data (token counts, timing, completeness).

## After Discovery

1. **Update the original Skill** — replace snapshot steps with evaluate + fetch
2. **Keep snapshot as fallback** — in case the API changes or auth expires
3. **Document the API** — path, required params, response structure, environment differences
4. **Log to learnings** — record the discovery for future reference

_meta.json Metadata

{
  "ownerId": "kn760tr2jwmgpw207rk4x528c983598k",
  "publishedAt": 1773812657969,
  "slug": "snapshot-to-api",
  "version": "1.0.0"
}