Salesforce Component Standards
github/awesome-copilot
Quality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages.
Work on Portwood's Canvas designer (docGenCanvas LWC and canvasModel.js).
Install Canvas Designer
$ npx skills add Portwood-Global-Solutions/Portwood --skill canvas-designer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Portwood-Global-Solutions/Portwood canvas-designer --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Portwood-Global-Solutions/Portwood.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/canvas-designer .claude/skills/canvas-designer && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "canvas-designer" agent skill from https://github.com/Portwood-Global-Solutions/Portwood/tree/main/.claude/skills/canvas-designer into .claude/skills/canvas-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-designer", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Portwood-Global-Solutions/Portwood/tree/main/.claude/skills/canvas-designerType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Portwood-Global-Solutions/Portwood --skill canvas-designer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Portwood-Global-Solutions/Portwood canvas-designer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Portwood-Global-Solutions/Portwood.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/canvas-designer .agents/skills/canvas-designer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "canvas-designer" agent skill from https://github.com/Portwood-Global-Solutions/Portwood/tree/main/.claude/skills/canvas-designer into .agents/skills/canvas-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-designer", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Portwood-Global-Solutions/Portwood --skill canvas-designer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Portwood-Global-Solutions/Portwood canvas-designer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Portwood-Global-Solutions/Portwood.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/canvas-designer .cursor/skills/canvas-designer && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "canvas-designer" agent skill from https://github.com/Portwood-Global-Solutions/Portwood/tree/main/.claude/skills/canvas-designer into .cursor/skills/canvas-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-designer", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Portwood-Global-Solutions/Portwood.git --path .claude/skills/canvas-designer--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Portwood-Global-Solutions/Portwood --skill canvas-designer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Portwood-Global-Solutions/Portwood canvas-designer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Portwood-Global-Solutions/Portwood.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/canvas-designer .gemini/skills/canvas-designer && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "canvas-designer" agent skill from https://github.com/Portwood-Global-Solutions/Portwood/tree/main/.claude/skills/canvas-designer into .gemini/skills/canvas-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-designer", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Portwood-Global-Solutions/Portwood canvas-designerInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Portwood-Global-Solutions/Portwood --skill canvas-designer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Portwood-Global-Solutions/Portwood.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/canvas-designer .github/skills/canvas-designer && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "canvas-designer" agent skill from https://github.com/Portwood-Global-Solutions/Portwood/tree/main/.claude/skills/canvas-designer into .github/skills/canvas-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-designer", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Portwood-Global-Solutions/Portwood --skill canvas-designer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Portwood-Global-Solutions/Portwood canvas-designer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Portwood-Global-Solutions/Portwood.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/canvas-designer .opencode/skills/canvas-designer && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "canvas-designer" agent skill from https://github.com/Portwood-Global-Solutions/Portwood/tree/main/.claude/skills/canvas-designer into .opencode/skills/canvas-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas-designer", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
canvas-designer- GitHub stars
- 126
- Token cost
- ~1.4k tokens
- SKILL.md length
- 683 words
- Files
- 1
- Skills in repo
- 7
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Work on Portwood's Canvas designer (docGenCanvas LWC and canvasModel.js).
- Changing the artboard
- SKILL.md covers The architecture, and why it…, Key functions in canvasModel.js, Test before you push — no org… and Traps, plus 1 more section
- Calls node
- The HTML serializer
What it does
Canvas Designer is an agent skill from Portwood-Global-Solutions/Portwood. Work on Portwood's Canvas designer (docGenCanvas LWC and canvasModel.js). Use when changing the artboard, the box model, the HTML serializer or importer, or when a Canvas template renders differently from what the canvas showed.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Documents & Office. It works with Salesforce. The repository describes itself as: Free, native document generation for Salesforce. PDF, DOCX, XLSX, PPTX — merge tags, images, barcodes, QR codes, bulk generation, Flow actions. 100% Apex + LWC, zero external… The licence is Apache-2.0.
When your agent uses it
- Changing the artboard
- The HTML serializer
- A Canvas template renders differently from what the canvas showed
Example prompts
- “/canvas-designer”
What it can do on your machine
Read from SKILL.md and the folder at commit 70ede0c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Canvas Designer loads about 1.4k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 683 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Portwood-Global-Solutions/Portwood at commit 70ede0c, republished under its Apache-2.0 licence (© Portwood-Global-Solutions). 683 words, ~1,388 tokens.
Download SKILL.mdSave it as
.claude/skills/canvas-designer/SKILL.md (or your agent's skills folder).- name
- canvas-designer
- description
- Work on Portwood's Canvas designer (docGenCanvas LWC and canvasModel.js). Use when changing the artboard, the box model, the HTML serializer or importer, or when a Canvas template renders differently from what the canvas showed.
Working on the Canvas designer
force-app/main/default/lwc/docGenCanvas/ — a Canva-style artboard that produces
HTML templates. ~9,900 lines of client code; canvasModel.js is the scene graph and
the only place that knows how it becomes HTML.
Canvas templates render through the HTML path (DocGenService.isHtmlBacked), so output
is always PDF. The Apex side is two lines — there is no DocGenCanvasService.
The architecture, and why it is that way
The model is the truth. The DOM is a disposable projection.
The older designer treated the rendered DOM as the document, reading it back with
innerHTML and re-parsing. Under Lightning Web Security's per-namespace sandbox that
repeatedly broke: ChildNode.replaceWith is missing on proxied nodes, and
cloneNode(true) silently omits browser-inserted nodes. Canvas never parses anything
back out of the live tree, so there is no tree to be distorted. contenteditable
survives only inside a single text box, where the browser's restructuring can't escape.
Rules that follow from this — do not break them:
- Never read the canvas back via
cloneNodeorreplaceWithon the live tree. - Never reconstruct model state from rendered DOM.
- Boxes are plain objects with inch coordinates. Pixels appear only at render time (inches × 96 × zoom), so changing zoom can never drift the document.
Key functions in canvasModel.js
| Function | What it does |
|---|---|
serialize(doc, geo) | Model → HTML. Pinned boxes first, then flow boxes in y order. |
deserialize(html) | HTML → model, for reopening a saved document |
htmlToCanvas(html, measure) | The importer — arbitrary HTML → boxes |
buildQueryConfig(doc) | Derives a V1 Query Config from the tags actually placed |
collectUsedFields(doc) | Merge-tag discovery, including conditions and totals |
snapBox / buildAnchorGroups | Alignment guides, and box linking with cycle detection |
sanitizeInline / collapseMarks | Rich-text handling and brace repair |
Two behaviors worth understanding before you change anything
flowMarginTop emits the GAP from the previous flow box, not the box's y. That
one function is the entire "a table grows and pushes everything below it down"
behavior. Emitting absolute y puts a box authored at y=5in five inches below the
table, and the error compounds with each additional flow box.
buildQueryConfig emits V1 flat format on purpose, not V3 — V1 is what a human can
read and correct in the Query Configuration tab. It is a suggestion the author
accepts, never a silent overwrite.
Test before you push — no org needed
The serializer is deliberately written to run without a DOM (typeof document === 'undefined' guards), so it can be checked in plain Node:
node scripts/qa/canvas-serializer-check.mjs
node scripts/qa/canvas-anchor-check.mjs
node scripts/qa/canvas-export-roundtrip-check.mjs
node scripts/qa/canvas-import-fidelity.mjs
node scripts/qa/canvas-import-placement-check.mjs
node scripts/qa/canvas-inline-sanitize-check.mjs
node scripts/qa/canvas-chart-box-check.mjsRun these first on any canvasModel.js change. They are the fastest feedback loop
in the repo. If you add a serializer rule, add a check here — a serializer that only
runs in a browser cannot be verified before it ships.
Show full SKILL.md (251 more words)Show less
Traps
Serializer fixes do not reach saved documents
A stored body keeps its old markup until it is re-saved. A fix to serialize changes
what new saves produce; it does nothing for documents already in the org. Plan
migrations accordingly, and don't treat "still broken after the fix" as a failed fix
until you've re-saved.
The Canvas picklist value is frozen forever
It shipped in a managed package (v3.54.0). The value and everything keyed to it can never be renamed or removed.
Bold vs symbols is an either/or
'Arial Unicode MS' is the only family that draws symbols/CJK, and it has no bold
face — canRenderBold() exists to disable the Bold control for it so the canvas
doesn't promise a weight the PDF can't deliver. Every other family bolds fine.
box.html vs box.text
textToHtml prefers box.html and falls back to box.text. The text path runs
through expandMarks, where __ is the underline mark — which collides with __c and
__r in Salesforce API names. For programmatic authoring, set box.html (escaped,
<br /> for newlines) and treat text as the legacy fallback. See issues #282 and #295.
LWS blocks some browser APIs
createObjectURL for text/html is blocked — the HTML export uses a data: URI
instead. Expect similar surprises with any browser API that hands out a URL or a live
node reference.
Reproducing namespace bugs
LWS distortion cannot be reproduced in a no-namespace scratch org. If you're touching DOM handling, the bug class is only visible in a namespaced package install or a namespaced scratch org.
© Portwood-Global-Solutions, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .claude/skills/canvas-designer of Portwood-Global-Solutions/Portwood.
Open the folder on GitHubat commit 70ede0c
Compare with similar skills
Canvas Designer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Canvas Designer this skillPortwood-Global-Solutions/Portwood | 126 | — | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| Salesforce Component Standardsgithub/awesome-copilot | 40k | 1 repos | ~2.4k | Automated safety check: Pass | MIT | |
| Implementing Zero Trust For SaaS Applicationsmukul975/Anthropic-Cybersecurity-Skills | 34k | — | ~2.9k | Automated safety check: Pass | Apache-2.0 | |
| Education Cloud Academic Calendar Generateforcedotcom/sf-skills | 1.1k | — | ~4.4k | Automated safety check: Pass | Apache-2.0 | |
| Automation Sandbox Post Copy Config Generateforcedotcom/sf-skills | 1.1k | — | ~4.1k | Automated safety check: Pass | Apache-2.0 | |
| Automation Sandbox Post Copy Config Generateforcedotcom/sf-skills | 1.1k | — | ~4.2k | Automated safety check: Pass | Apache-2.0 |
Similar skills
- Official
Implementing Zero Trust For SaaS Applications
mukul975/Anthropic-Cybersecurity-Skills
Secures SaaS apps (Microsoft 365, Google Workspace, Salesforce, Slack) via CASB/SSPM deployment, conditional access policies, OAuth app governance, and session-level DLP controls enforcing identity…
Education Cloud Academic Calendar Generate
forcedotcom/sf-skills
A skill your agent uses to set up, create, or generate an academic calendar for Education Cloud orgs.
Automation Sandbox Post Copy Config Generate
forcedotcom/sf-skills
Generate the JSON config file that the Salesforce sandbox post-copy automation tool consumes, from a customer SOP in any format (PDF, xlsx, csv, JSON, docx, Markdown, plain text, or a screenshot of…
Automation Sandbox Post Copy Config Generate
forcedotcom/sf-skills
Generate the JSON config file that the Salesforce sandbox post-copy automation tool consumes, from a customer SOP in any format (PDF, xlsx, csv, JSON, docx, Markdown, plain text, or a screenshot of…
Experience Lds Best Practices Apply
forcedotcom/sf-skills
A skill your agent uses when reviewing or implementing Lightning Data Service best practices in an LWC (.js, .html, .js-meta.xml) — UIAPI vs Apex, refreshApex / notifyRecordUpdateAvailable…
More from Portwood-Global-Solutions/Portwood
Dev Setup
Portwood-Global-Solutions/Portwood
Get from a fresh clone of Portwood to a working, fully-tested Salesforce org.
HTML Template Authoring
Portwood-Global-Solutions/Portwood
Author or repair a Portwood HTML template that renders correctly through Blob.toPdf (Flying Saucer).
Triage Report
Portwood-Global-Solutions/Portwood
Decide whether a Portwood bug report is a real code defect or a template-authoring problem, before any code is written.
Fix Merge Tag
Portwood-Global-Solutions/Portwood
Fix a Portwood merge-tag or parser bug correctly across all of its resolution paths.
Managed Package Rules
Portwood-Global-Solutions/Portwood
Constraints that only bite in a real managed-package install of Portwood — global visibility, Flow Apex-Defined types, namespace-prefixed keys, USERMODE on internal reads, immutable API names.
Run Tests
Portwood-Global-Solutions/Portwood
Run Portwood's test suites — the one-command QA harness, the anonymous-Apex e2e scripts, Apex unit tests, prettier, and Code Analyzer.
Related
Works with
Categories
Questions about Canvas Designer
What does Canvas Designer do?
Work on Portwood's Canvas designer (docGenCanvas LWC and canvasModel.js). Canvas Designer is an agent skill from Portwood-Global-Solutions/Portwood.js).
When should I use Canvas Designer?
Canvas Designer fits situations like: changing the artboard; the HTML serializer; A Canvas template renders differently from what the canvas showed.
How do I install Canvas Designer in Claude Code?
Run `npx skills add Portwood-Global-Solutions/Portwood --skill canvas-designer -a claude-code`. Or copy the skill folder (.claude/skills/canvas-designer in Portwood-Global-Solutions/Portwood) into .claude/skills/canvas-designer in your project. Claude Code loads it when a task matches its description.
How do I install Canvas Designer in Codex?
Run `npx skills add Portwood-Global-Solutions/Portwood --skill canvas-designer -a codex`. Or copy the skill folder (.claude/skills/canvas-designer in Portwood-Global-Solutions/Portwood) into .agents/skills/canvas-designer in your project. Codex loads it when a task matches its description.
Can I use Canvas Designer in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Portwood-Global-Solutions/Portwood --skill canvas-designer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/canvas-designer, .gemini/skills/canvas-designer, .github/skills/canvas-designer and .opencode/skills/canvas-designer in your project.
What does Canvas Designer need to run?
Going by SKILL.md and its folder, Canvas Designer needs the command-line tools its instructions call (node).
Does Canvas Designer access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Canvas Designer safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Canvas Designer use?
Canvas Designer is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Canvas Designer use?
About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Canvas Designer?
Skills that share tags, products or a category with Canvas Designer: Salesforce Component Standards (github/awesome-copilot, 40k stars), Implementing Zero Trust For SaaS Applications (mukul975/Anthropic-Cybersecurity-Skills, 34k stars), Education Cloud Academic Calendar Generate (forcedotcom/sf-skills, 1.1k stars) and Automation Sandbox Post Copy Config Generate (forcedotcom/sf-skills, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Canvas Designer?
Portwood-Global-Solutions (a GitHub organization) maintains it in Portwood-Global-Solutions/Portwood, which has 126 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 9, 2026.
Source: Portwood-Global-Solutions/Portwood on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.