THE AGENT SKILLS DIRECTORY
Reusable skills for AI agents. Install any of them into a Cohub world's agent with one command.
npx -y @neta-art/neta-search-cli@latest skills find "<what you need>"
Wrote a skill? Publish it here →
Basic Cohub abilities. Most agents already have these mounted; listed here for reference.
Paste this into your agent's chat — it fetches the skill and follows it.
Use the skill: photoshop-web-builder. Run `npx -y @neta-art/neta-search-cli@latest skills use @sunset1896/photoshop-web-builder --via site` and follow what it prints. Read its complete output, redirecting it to a temporary file first if necessary, and resolve relative paths from the skill directory it prints.npx -y @neta-art/neta-search-cli@latest skills use @sunset1896/photoshop-web-builderGet your own Photoshop-style photo editor that runs in the browser, ready to open and share.
# Photoshop Web Builder — build a raster photo editor for the browser ## 1. What it produces - A directory Web Work at `works/webs/<slug>/`: plain static ES modules, no build step, no dependencies (~650 KB of source). Published through the `create-web-work` flow and opened/shared from Studio. - Start from `template/` — the complete, verified editor. Rewrite from scratch only if the user explicitly asks. - Feature scope and gaps: `references/features-checklist.md`. Agree the scope (full clone / add features / fix one area) only if the request leaves it open. ## 2. Workflow 1. **Start the project** ```bash SK=<this skill's folder> # the folder that holds this SKILL.md bash $SK/install.sh # once: puppeteer-core for the QA scripts, psd-tools in ~/psdenv node /mods/neta/neta work init web works/web/<slug> --title "<title>" # folder may normalise to works/webs/<slug> cp -r $SK/template/* works/webs/<slug>/ ``` 2. **Serve without caching** (stale ES modules will lie to you) — port 8791, never 8790 (Illustrator skill's): ```bash python3 $SK/tools/srv.py works/webs/<slug> 8791 & ``` 3. **Baseline**: run the QA gates once before changing anything (§4) so you know what was green. 4. **One feature at a time** (§3). Never write a batch of features and test at the end. 5. **Gates** (all must pass): `references/qa.md`. 6. **Publish**: `node /mods/neta/neta work publish web works/webs/<slug>` (sets the world slug first if it asks), then place the card with board-ops `place.mjs --work works/webs/<slug>`. Write `FEATURES.md` in the project (what changed, verification, measured performance, known gaps). ## 3. The per-feature loop 1. Write down the **reference behaviour** first — shortcut, modifiers at press vs. after press, cursor, result, undo granularity (`references/interaction-spec.md`). If the user supplies a video or screenshots, extract frames and read them. 2. Implement it in the right module (`references/architecture.md`): pixel maths in `core/imageops.js` (pure, worker-safe), compositing in `core/render.js`, state changes through `app.commit(label)` so history works. 3. Drive it in a real browser with `tools/lib.mjs` (`open()`, `drive(page)`): real `page.mouse` / `page.keyboard` events in **document coordinates**, then assert numbers from `window.__app` (pixels via `flatten()`, layer tree via `doc.rows()`, history labels). Add the assertion to `tools/layers.mjs` or a new script so it stays guarded. 4. Screenshot and look at it (Read tool). Assertions miss broken icons, overlapping panels, wrong cursors. 5. Note the deviation → fix → back to step 3. Re-run `smoke.mjs` so nothing else broke. There is no Photoshop in the sandbox: compare against Photoshop's documented behaviour and user-supplied captures, and say so in the reply. For PSD files, `tools/psd_interop.py` (psd-tools) is the independent second opinion. ## 4. QA commands ```bash cd $SK/tools node smoke.mjs # boot · 45 tools · 64 Image/Filter commands · zero page errors node layers.mjs /tmp/psw-out # 16 checks: groups, smart objects, smart filters, PSD round trip, undo node perf.mjs # 4000×3000 doc: 60 fps brush, undo ≤ 60 ms, recomposite ≤ 400 ms ~/psdenv/bin/python psd_interop.py /tmp/psw-out/interop.psd /tmp/psw-out/interop.png ``` `PSW_URL` / `CHROME` override the target page and browser. Scripts exit non-zero on any failure. ## 5. Architecture in one screen (details: `references/architecture.md`) - **Model**: layer-sized canvases positioned in doc space; doc-sized alpha canvases for masks and selection; layer tree with `children` for groups; smart objects = immutable shared `src` + affine `transform` + `filters`. - **Render**: dirty-rect compositor; pass-through groups draw children into the parent, isolated groups bake once; 15 native + 12 LUT blend modes; adjustment layers act on accumulated pixels; styles from rendered pixels. - **Live strokes** sit in a buffer until mouse-up; **history** shares unchanged canvases and restores only the dirty rects of the crossed steps. - **Filters** run in a worker with latest-only previews; on a smart object they become smart filters. - **PSD**: standard records + section dividers for groups; app-only data in a private `pswJ` block. ## 6. Performance floor (`references/performance.md`) Brush 60 fps at 100 % · small-stroke undo ≤ 60 ms (template: 36 ms) · full 12 MP recomposite ≤ 400 ms (256 ms) · history snapshot of an unchanged doc ≤ 5 ms (0.4 ms). Re-measure after touching render.js, history.js or brush.js. ## 7. Pitfalls Read `references/pitfalls.md` before starting — port collisions, stale modules, `tool.key` vs `onKey`, pass-through double opacity, PSD channel order and `lsct` layout, smart filters lost or bounded, multi-select collapse, headless file-chooser/download quirks, wiped scratch folders. ## 8. Deliver The user gets a published Web Work they can open and share. Hand it over with an interaction-components link card whose target is that Work, place it on the board, and leave `FEATURES.md` in the project folder. ## 9. Out of scope - Reproducing a specific poster or tutorial is not covered by this skill — it is about building the editor itself. - Do not change world settings, and do not delete existing files or unrelated Works. - No third-party CDN dependencies; no rewrite when the template already covers the scope. ## 10. Closing reply Say which features were built or fixed, how they were verified (PASS counts, screenshots, psd-tools result, performance numbers), what is still not done, link the Work, and close with next steps per the next-steps skill. Reply in the user's language; text inside the editor follows the user's language too.