axonhub: Skill for Claude Code

Design

This skill is a local build of the claude.ai Design (canvas) artifact type: the rules below are the type's own, with the Artifact tool replaced by files on disk and this skill's scripts/artifact.mjs (The calls). A canvas is a folder, <root>; its content is ITS OWN files under <root>/project/. The editor page (scripts/editor/, served by artifact.mjs open) reads those files and saves the user's edits back into them.

Write only under <root>/project/: a file elsewhere never shows.

The canvas exists

Work on THAT canvas, its <root> in every command: never create another. If no canvas exists yet: <root> = a new folder designs/<slug>/ named for the canvas (designs/spring-menu/) in the working directory, or where the user says; the canvas's name (REQUIRED; as the user says it; not "Design" or "Untitled") goes in title. Read <root>/project/canvas.json: none, or boards empty: if just made, see Creating; else list its files; no .dc.html: see Creating. Else see Revising.

Tell the user what happens on the canvas, never the mechanism. Asked to send it to apps like Canva: there is no Send to here; point the user to the editor's Export, if shown, to save a file they can import there. Give an app's import tool no other link, never the editor's local address.

The canvas's files: exact shapes

• project/canvas.json, the index: {"v":3,"createdOnFiles":{"v":1,"at":"2026-09-14T18:20:00Z"},"title":"Spring Menu Poster","launch":{"view":"canvas"},"pages":[],"boards":{"Main.dc.html":{"x":0,"y":0,"w":880,"h":560}},"order":["Main.dc.html"],"notes":{},"designSystems":[]}. createdOnFiles: an index YOU create carries it exactly so, at = now. boards = one entry per artboard, keyed by its file's path under project/: x,y,w,h = the FRAME on the canvas in CSS px (w,h 40–8000; 80 px between frames in a row, 120 between rows), plus optional title, page (none = the first), expand ("fill": a PAGE), print ("flow": PDF paginates), paper ("letter"|"a4"), is_interactive (true: working controls), frameless (editor-set, keep it), guides (format.md), radius (corner px). order = the same paths, back to front; name the first artboard Main.dc.html (the entry). EVERY .dc.html outside project/ds/ shows, listed or not, <dc-import>ed ones too: list each (w,h = its $preview); give it its importer's <head> lines to render alone; its <helmet> (rerun in importers): only font <link>, upload @font-face, body{margin:0}; font-family, color on its root. An entry needs its file: write it. Optional pages [{"id","name"}] (≤40; ids [A-Za-z0-9_-]{1,40}) and launch: {"view":"canvas"} (optionally "page": a listed page id) or {"view":"focused","file":"Main.dc.html"}. notes {"<id>":{"x":0,"y":-300,"text":"Flows","kind":"title1","maxW":1840}}: x,y,text required; <1000 notes; ids as for pages. kind title1 = a title for SEVERAL artboards, never for one (a frame's name strip shows its title or filename): one bold 72 px line; set maxW (its row's width; maxH if tight): longer text shrinks. ≥223 px above its row, off name strips, nothing over it. No kind = a sticky: set w; up to 4/3 w tall (keep that clear), taller in empty canvas, then scrolls. Both take size px|s|m|l|xl|xxl, bold, italic, page, color/sticky fill gray|red|orange|green|teal|blue|purple|pink. kind rect|oval|pen|line|arrow|image is the user's; leave it. designSystems, and the files under project/ds/<folder>/: only step 4's install writes them. An index that exists: keep every key and entry you are not changing, ones not named here too.
• project/<path>, one file per artboard: the WHOLE .dc.html source. <path> ends .dc.html; segments start with a letter, digit or _, then only those and . -, no spaces; stems unique.
• A support file you name goes under project/ too, linked relatively; an unnamed image or a font stays an upload (step 3).
• project/assets/: the uploads (The calls); never write there yourself.