# tesseract-editor

Build or change a browser-based editor for Tesseract .tsrct projects. The skill covers interface controls, previews, and saving project data.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 installs · ★ 158
- Author: mirage-hq
- License: LicenseRef-Unknown · policy=link-only · description only; the file stays with the author
- Source: https://github.com/mirage-hq/Tesseract/tree/HEAD/skills/tesseract-editor/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/tesseract-editor

## What it does

This skill guides an agent through building a web app that opens and edits `.tsrct` projects. A static HTML app can use the browser engine directly, with its runtime files beside the page. The app handles its own controls, selection, and playback; the engine exposes the actions it supports.

Saving with `toBlob()` packages the document and its original assets into a Blob, but does not write a file to disk. A page refresh drops unsaved changes. Overwriting the source file can disrupt later reads of its assets, so the saved-Blob reopening flow matters.

The editor needs HTTP file serving and browser support for GPU and media. Keep the runtime’s JavaScript, type definitions, and WASM from the same release, and check the archive checksum. The browser engine cannot export video. Direct project authoring belongs to the motion or video skill.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-editor -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-editor -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/tesseract-editor/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-editor -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mirage-hq/Tesseract tesseract-editor
```

2. **Manually: put the files in place**
- File: `.github/skills/tesseract-editor/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-editor -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/mirage-hq/Tesseract --path skills/tesseract-editor
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add mirage-hq/Tesseract --skill tesseract-editor -a opencode
```

### 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/mirage-hq/Tesseract/tree/HEAD/skills/tesseract-editor/SKILL.md

## When to use it
- build a browser editor for `.tsrct` projects
- add layer controls and project previews
- package a project with its original assets
- investigate runtime versions and file compatibility

## Example prompts
- Build a browser editor for this `.tsrct` project with a preview and save flow.
- Add layer controls and object selection to the editor.
- Check why an older `.tsrct` opens or renders differently after a runtime update.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [mirage-hq/tesseract](https://affpapa.org/en/nevibecode/by/mirage-hq/tesseract.md) — 4 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