illustrator-web-builder

Community@sunset1896/illustrator-web-builder
Community skill — not reviewed. It was shared by 落嵛 and has not been checked by Neta. Read SKILL.md below before letting an agent use it.
Use it in Cohub

Paste this into your agent's chat — it fetches the skill and follows it.

Use the skill: illustrator-web-builder. Run `npx -y @neta-art/neta-search-cli@latest skills use @sunset1896/illustrator-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.
Install from a terminal
npx -y @neta-art/neta-search-cli@latest skills use @sunset1896/illustrator-web-builder
Summary

Get your own working vector design app in the browser, like a simplified Illustrator, published and ready to share.

  • Draw with a pen, shapes, text and a direct-select tool, and organise work with layers and multiple artboards.
  • Includes the tools designers expect: combine and cut shapes, gradients, clipping masks, text that fills a shape, and your own fonts.
  • Export your design as SVG or PNG, with undo and redo for every step.
  • Ask for a full editor, a few added features, a bug fix, or a speed-up of an existing one.
  • Can copy a technique from a tutorial video, such as a falling-text poster, and recreate it as a poster in the editor.
SKILL.md
# Illustrator Web Builder — build a vector design app for the browser

## 0. Tell the user first (required)

**The first time this skill is used after installation, say this before starting work: "Use Claude Opus 5.5 for the best results."**
Run `bash <this skill's folder>/tools/first-run.sh`: exit code 0 means it is the first run, so open your reply with that line;
exit code 1 means it has already been shown, so do not repeat it. Put the line in the first line of your reply, then
carry on normally without waiting for confirmation.

## 1. When to use it, and what it produces

- Output: a directory-type Web Work at `works/webs/<slug>/` (plain static ES Modules, no build step),
  which can be opened and shared in Studio once published; optionally ship one image made with it.
- Start from `template/` (a complete, already verified editor, about 1 MB, including paper.js /
  paperjs-offset / opentype.js and five open-source fonts). Rewrite from scratch only if the user
  explicitly asks for that.
- Publish with the `create-web-work` flow: `neta work init web` → write the source → `neta work publish web`
  → drop a card on the board with `place.mjs` from `board-ops`.

## 2. Workflow

1. **Fix the scope**: check `references/features-checklist.md` and either ask for or decide the feature
   list for this run (full clone / add a few features / reproduce one tutorial). If the scope is
   already clear, do not ask.
2. **Start the project**:
   ```bash
   SK=<this skill's folder>          # e.g. /workspace/.agents/skills/illustrator-web-builder
   node /mods/neta/neta work init web works/web/<slug> --title "<title>"   # the real folder may be normalised to works/webs/<slug>
   cp -r $SK/template/* works/webs/<slug>/
   ```
3. **Local server + browser** (module caching will lie to you — always use a no-store server):
   ```bash
   python3 $SK/tools/srv.py works/webs/<slug> 8790 &
   agent-browser --session ai open "http://localhost:8790/?fresh=1" --args "--no-sandbox,--disable-dev-shm-usage"
   agent-browser --session ai set viewport 1440 960
   ```
   `?fresh=1` skips restoring the autosave. `/tmp` can be wiped between sessions, so keep tool scripts
   in this skill's folder as the source of truth.
4. **Implement one feature → compare → polish** (the core loop, see §3).
5. **Quality gates** (all must pass before you call it done, see `references/qa.md`): feature assertions,
   visual check of screenshots, random fuzzing across ≥3 seeds with zero errors, performance benchmarks met.
6. **Publish**: `node /mods/neta/neta work publish web works/webs/<slug>`, then place it on the board.
   Update `FEATURES.md` (feature comparison table + measured performance + bugs fixed).

## 3. Comparing one feature at a time (computer use)

Every feature goes through the same loop. Do not write everything first and test it all at the end:

1. Write down Illustrator's **reference behaviour** (shortcut, modifiers, cursor, resulting geometry,
   undo granularity). Source: `references/interaction-spec.md`; if the user gave a tutorial video,
   extract frames from it (§6).
2. Implement it.
3. Inject `tools/harness.js` with `tools/ab.sh` and drive the tool with **real PointerEvent /
   KeyboardEvent** (document coordinates → screen coordinates are converted for you), then assert on
   values in the model:
   ```bash
   $SK/tools/ab.sh "(async()=>{ T.fresh(); T.tool('rect'); T.drag(100,100,300,250,{shift:true});
     return JSON.stringify(await T.sel()) })()"
   ```
   For critical paths, re-check once with `agent-browser mouse move/down/up` and `press`, using a real
   mouse and keyboard (this catches shortcuts swallowed by the browser, focus issues, scrolling — things
   synthetic events cannot see).
4. `agent-browser screenshot`, look at the image with the Read tool, and compare it side by side with the
   reference (video frame / screenshot).
5. Record the deviation → fix → go back to step 3. Run the fuzzer as well to make sure nothing else broke.

## 4. Architecture notes (details in `references/architecture.md`)

- **Document model**: flat `Map<id, obj>` plus parent/child ids; every change is wrapped in a transaction
  `doc.begin(label) → doc.touch(id) → change → doc.mark(id) → doc.commit()`. A transaction records before/after
  snapshots, so undo/redo is a wholesale replacement. During a drag, `doc.snap()/restore()` recomputes from the
  baseline every frame, avoiding accumulated error.
- **Render layers**: background canvas (pasteboard / artboard / grid) + SVG (artwork, incrementally updated by
  dirty id) + overlay canvas (selection box, anchors, smart guides, hints); all three share one view matrix.
- **Geometry**: path nodes are `{x,y,ix,iy,ox,oy,smooth}` (handles in absolute coordinates); transforms are baked
  directly into nodes; rectangles/ellipses/polygons/stars keep `live` parameters (live shapes) and degrade to
  plain paths after a shear.
- **Boolean and offset**: paper.js (unite/subtract/split…); offset path and outline stroke run in a
  **Web Worker with a 4 s timeout** (paperjs-offset loops forever on some degenerate paths).
- **Type**: a hand-written layout engine — point type, rectangular area type, area type inside any closed shape
  (scanline intervals), justification, and letter-level wrapping in narrow spaces; outlining uses opentype.js
  and lays glyphs out manually (bypassing its lack of GSUB support).

## 5. Performance floor (5,000 stroked objects, details in `references/performance.md`)

| Scenario | Target |
|---|---|
| Single hit test | < 0.5 ms |
| Drag all, per frame | < 4 ms (above 150 leaves, preview with an SVG element transform and bake on release) |
| Pan / zoom | steady 60 fps (wheel zoom previews with a CSS composited transform, redraws 140 ms after idle) |
| Click-select with the Layers panel open | < 20 ms (change row state only, never rebuild the tree) |

Measure with `tools/perf.js` and write the numbers into FEATURES.md.

## 6. Reproducing tutorials / posters (example: the falling-text poster)

`references/falling-text-poster.md` records the whole process of learning a technique from a Xiaohongshu /
video tutorial and reproducing it in this editor: fetch the note → download the video → extract frames with
ffmpeg and read the steps → map them onto editor commands → run the script (`tools/poster.js`) → compare region
by region against the original and tune → export PNG/SVG/source file. Reuse the same route for a different subject.
If a user-supplied font has no stated licence, use it only locally; never bundle it into a published Web Work.

## 7. Pitfalls

Read `references/pitfalls.md` before you start (a dozen real bugs and their fixes: empty `children` making an
object unclickable, a tool's `key` field being shadowed by a method so shortcuts die, a focused panel input
scrolling the whole column sideways, the ruler canvas widening the stage and covering panels, empty groups,
Worker timeouts, a stale measurement cache after fonts load…).

## 8. Deliver

At the end the user has a published Web Work they can open and share: `node /mods/neta/neta work publish web
works/webs/<slug>` prints the Work id and URL. Hand it over with an interaction-components card whose target is that
Work, then put the card on the board with `place.mjs`. Also leave `FEATURES.md` in the project folder.

## 9. Out of scope

- No changes to world settings, world files or existing Works, and no deleting anything the user did not ask about.
- No rewriting from scratch when the template covers the scope, and no third-party CDN dependencies.
- Nothing beyond the editor itself (and its feature/test notes): no marketing pages, no other skills' folders.

## 10. Closing reply

Briefly state: which features were built, how they were verified (numeric assertions + screenshots + fuzzing +
performance numbers), what is not done yet, attach the work link, and finish with next-step directions per the
next-steps skill. Reply in the user's language; any text the user sees inside the deliverable follows the user's
language as well.
Related skills
character-startup-animationVerifiedTurn one character picture into a short entrance clip where the line art draws itself in, with optional colour-up and eye-opening.photoshop-web-builderVerifiedGet your own Photoshop-style photo editor that runs in the browser, ready to open and share.falling-text-posterCommunityMake a poster where neat typewriter text breaks apart, letters tumble down and pile into a mountain of type.