dessn-cloud-code
Installation
SKILL.md
The app's code in Dessn's cloud
Every Dessn project holds its app's whole repository: the Library and every frame are a checkout of it on a cloud sandbox. You can search it, read it and change copies of it through the Dessn MCP with no clone. The person sees each change as a live frame.
The loop
- Find the project.
dessn_projects_search({ query: '<project name>' })gives itslink. A link the person pasted goes todessn_canvas_get. - Find the surface from their words.
dessn_surfaces_list({ project, query })matches a Library surface's name, its route and the words its picture shows, so "the Completed view" or "the empty state" finds it. Each surface has arouteand alink. - Find the code behind it. Search for the exact words on the screen:
dessn_files_list({ at: <project or surface link>, grep: 'No completed projects' }). It answers each file and line with the lines around it, which is enough to explain it and to write an edit. Find nothing? Try a shorter piece. Text may be split over elements, come from data (dessn.mocks/), or be uppercased by CSS. Then search for the component's name to find where it's used.path(a folder) andglob('**/*.tsx') narrow a search;regex: truetakes a pattern. - Read and explain.
dessn_files_read({ at, path, from, to })reads the lines around a match.as: 'outline'gives a long file's components and functions with their lines, andpaths: [...]reads several files in one call.dessn_canvas_geton a frame lists itsentryFiles(the files its picture renders). Explain what you found in the person's terms: which component, what decides when it shows, where its words and data come from. Name the files and lines so they can check. - Copy, always. Never edit the original: other people see it. Put the surface on a page and copy it:
dessn_pages_create({ project, title: '<the change>', private: true, key })makes a page only they see (or use a page they named).dessn_nodes_create({ page, key, items: [{ kind: 'frame', from: { surface: '<route>' }, x: 0, y: 0 }] })adds the original.dessn_nodes_create({ page, key, items: [{ kind: 'frame', from: { frame: <its id>, copy: true }, position: { rightOf: <its id> } }] })adds the copy, on its own sandbox.- A change that shows only in a state (an empty list, a search with no results, another tab): give the original that state's route, and the copy keeps it (
route: '/?view=completed&search=zzz'on the frame item), so the board itself shows before and after. If no route reaches the state, say so; change the app's sample data only when the person asks.
- Edit the copy.
dessn_files_write({ at: <the copy's link>, key, files: [{ path, edits: [{ oldString, newString }] }] }). CopyoldStringexactly from the search's or the read's lines. The answer waits for the build and givesbuild(compile, runtime and type errors) andpicture. A failed edit says why and shows the nearest lines; fix it and send it again. - Look. Check the write's picture (
picture.landed, or itsnextCall), or calldessn_canvas_screenshot({ target: <the copy's link> }). Compare it with the original. If the write's answer hasfit, send itsnextCallso the frame shows the whole page. - Put it on the board. The original and the copy sit side by side. Add a note above or beside them saying what changed and where, for example "Empty state message: src/views/Completed.tsx:42, 'No completed projects' → 'Nothing finished yet. Your wins will show up here'":
dessn_nodes_create({ page, key, items: [{ kind: 'note', html: '<p>…</p>', position: { above: <copy id> } }] }). Give the person the page link and a picture of it. - Undo if it goes wrong.
dessn_canvas_geton the copy lists itshistory(newest first, each with aseq).dessn_files_write({ at: <copy>, key, restore: <seq> })brings that version back as a new entry, so nothing is lost.restore: 'undo'undoes the last restore.