Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
A skill your agent uses when the user asks to apply, process, or clear the comments they left in the open-doc inspector — phrases like "apply the comments", "apply my edits", "I left notes on the…
Install Apply Comments
$ npx skills add simonliu-ai-product/open-doc --skill apply-comments -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install simonliu-ai-product/open-doc apply-comments --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/simonliu-ai-product/open-doc.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/core/skills/apply-comments .claude/skills/apply-comments && 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 "apply-comments" agent skill from https://github.com/simonliu-ai-product/open-doc/tree/main/packages/core/skills/apply-comments into .claude/skills/apply-comments/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apply-comments", 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/simonliu-ai-product/open-doc/tree/main/packages/core/skills/apply-commentsType 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 simonliu-ai-product/open-doc --skill apply-comments -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install simonliu-ai-product/open-doc apply-comments --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/simonliu-ai-product/open-doc.git skills-src && mkdir -p .agents/skills && cp -r skills-src/packages/core/skills/apply-comments .agents/skills/apply-comments && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "apply-comments" agent skill from https://github.com/simonliu-ai-product/open-doc/tree/main/packages/core/skills/apply-comments into .agents/skills/apply-comments/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apply-comments", 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 simonliu-ai-product/open-doc --skill apply-comments -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install simonliu-ai-product/open-doc apply-comments --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/simonliu-ai-product/open-doc.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/packages/core/skills/apply-comments .cursor/skills/apply-comments && 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 "apply-comments" agent skill from https://github.com/simonliu-ai-product/open-doc/tree/main/packages/core/skills/apply-comments into .cursor/skills/apply-comments/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apply-comments", 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/simonliu-ai-product/open-doc.git --path packages/core/skills/apply-comments--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 simonliu-ai-product/open-doc --skill apply-comments -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install simonliu-ai-product/open-doc apply-comments --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/simonliu-ai-product/open-doc.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/packages/core/skills/apply-comments .gemini/skills/apply-comments && 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 "apply-comments" agent skill from https://github.com/simonliu-ai-product/open-doc/tree/main/packages/core/skills/apply-comments into .gemini/skills/apply-comments/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apply-comments", 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 simonliu-ai-product/open-doc apply-commentsInstalls 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 simonliu-ai-product/open-doc --skill apply-comments -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/simonliu-ai-product/open-doc.git skills-src && mkdir -p .github/skills && cp -r skills-src/packages/core/skills/apply-comments .github/skills/apply-comments && 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 "apply-comments" agent skill from https://github.com/simonliu-ai-product/open-doc/tree/main/packages/core/skills/apply-comments into .github/skills/apply-comments/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apply-comments", 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 simonliu-ai-product/open-doc --skill apply-comments -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install simonliu-ai-product/open-doc apply-comments --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/simonliu-ai-product/open-doc.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/packages/core/skills/apply-comments .opencode/skills/apply-comments && 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 "apply-comments" agent skill from https://github.com/simonliu-ai-product/open-doc/tree/main/packages/core/skills/apply-comments into .opencode/skills/apply-comments/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "apply-comments", 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
apply-comments- GitHub stars
- 108
- Token cost
- ~948 tokens
- SKILL.md length
- 475 words
- Files
- 1
- Skills in repo
- 7
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses when the user asks to apply, process, or clear the comments they left in the open-doc inspector — phrases like "apply the comments", "apply my edits", "I left notes on the…
- Works in 6 steps: Find the pending comments → Read each one in context → Make the edit → …
- The user asks to apply
- SKILL.md covers Step 1 — Find the pending…, Step 2 — Read each one in…, Step 3 — Make the edit and Step 4 — Remove the marker, plus 2 more sections
- Calls curl
What it does
Apply Comments is an agent skill from simonliu-ai-product/open-doc. Use this skill when the user asks to apply, process, or clear the comments they left in the open-doc inspector — phrases like "apply the comments", "apply my edits", "I left notes on the document", "process the markers", "/apply-comments". It finds every @doc-comment marker under docs/, makes the edit each one asks for, then removes the marker. Do NOT use for authoring new documents — that is create-doc.
Its SKILL.md is about 950 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 Frontend & Design. The repository describes itself as: The document framework built for agents — write reports as React, get real A4 pages, an outline, page numbers, and a PDF. The licence is MIT.
When your agent uses it
- The user asks to apply
- Clear the comments they left in the open-doc inspector — phrases like apply the comments
- I left notes on the document
- Process the markers
Example prompts
- “apply the comments”
- “apply my edits”
- “I left notes on the document”
- “/apply-comments”
Workflow steps
6 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit af6095d. 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:
curl
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use curl, which can reach the network depending on how they are called.
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
Apply Comments loads about 948 tokens when it runs. Until then it costs about 107 tokens; SKILL.md has 475 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 simonliu-ai-product/open-doc at commit af6095d, republished under its MIT licence (© simonliu-ai-product). 475 words, ~948 tokens.
Download SKILL.mdSave it as
.claude/skills/apply-comments/SKILL.md (or your agent's skills folder).- name
- apply-comments
- description
- Use this skill when the user asks to apply, process, or clear the comments they left in the open-doc inspector — phrases like "apply the comments", "apply my edits", "I left notes on the document", "process the markers", "/apply-comments". It finds every `@doc-comment` marker under `docs/`, makes the edit each one asks for, then removes the marker. Do NOT use for authoring new documents — that is `create-doc`.
Apply inspector comments
In the viewer the user leaves notes from the Comments panel (M) or the element panel in edit mode, and the panel's Copy request for the agent button hands you /apply-comments docs/<id> — when a path is given, work on that document only. Each note is written into the document source as a marker:
<p style={p}>
{/* @doc-comment id="c-4591fd61" ts="2026-08-15T15:40:52.644Z" text="<base64url>" */}
從 FastMCP 開發、容器化…
</p>The marker is always the first child of the element the note is about — that is your anchor. text is base64url-encoded JSON: {"note": "...", "hint": "p"}.
Step 1 — Find the pending comments
If the request named a document (docs/<id>), look only there.
grep -rn "@doc-comment" docs/If the dev server is running you can read them decoded instead, which is easier:
curl -s "http://localhost:5273/__comments?docId=<id>"That returns { comments: [{ id, line, ts, note, hint }] }. If neither turns anything up, tell the user there are no pending comments and stop.
Step 2 — Read each one in context
For every marker, read the surrounding element — not just the marked line. A note like "make this shorter" is meaningless without the paragraph it sits in. Open the file with Read around the marker's line (±40 lines is usually enough) so you can see the element, its styles, and its neighbours.
Group comments by document, and handle them oldest ts first — later notes may refine earlier ones.
Step 3 — Make the edit
Apply what the note asks for, following the doc-authoring skill: it owns the type scale, the flow/vertical-budget rules, and the design tokens. In particular:
- Edit the element the marker is anchored to. Never reformat the whole file.
- A note about wording changes the text; a note about weight, color, or size changes the inline style — prefer
var(--od-*)tokens over new hard-coded values. - If the change makes a fixed page overflow, split the page or move the content into the
flow()section (references/pagination.md). - If a note is ambiguous ("fix this"), do the smallest reasonable interpretation and say what you assumed at hand-off. Don't guess at a large rewrite.
- If a note asks for something the framework can't do (per-page orientation, a splitting table), say so in the hand-off and leave the marker in place.
Show full SKILL.md (128 more words)Show less
Step 4 — Remove the marker
Delete the marker line for every comment you actually applied. Leave markers you deliberately skipped, and say which ones and why.
# with the dev server running
curl -s -X DELETE "http://localhost:5273/__comments?docId=<id>&id=<comment-id>"Or delete the {/* @doc-comment … */} line directly with Edit. Removing it by hand is fine — the marker is a plain JSX comment.
Step 5 — Verify
- No
@doc-commentmarker remains for an applied note:grep -rn "@doc-comment" docs/. - The document still compiles: it hot-reloads in the browser; check the terminal for a Vite error.
- Run the "Self-review before finishing" checklist in
doc-authoringfor any page you touched.
Step 6 — Hand off
Tell the user, in one short list:
- What you changed, one line per comment.
- Anything you skipped and why.
- Any assumption you made on an ambiguous note.
Do not restate the whole document.
© simonliu-ai-product, MIT. 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 packages/core/skills/apply-comments of simonliu-ai-product/open-doc.
Open the folder on GitHubat commit af6095d
Compare with similar skills
Apply Comments 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 |
|---|---|---|---|---|---|---|
| Apply Comments this skillsimonliu-ai-product/open-doc | 108 | — | ~948 | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None |
Similar skills
- Official
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
- Official
Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
More from simonliu-ai-product/open-doc
Doc Authoring
simonliu-ai-product/open-doc
Technical reference for writing or editing open-doc pages — file contract, the A4/B4/A3 page canvas, print type scale, the vertical budget that decides where a page breaks, tables, charts, table of…
Create Doc
simonliu-ai-product/open-doc
A skill your agent uses when the user wants to create, draft, author, or generate a new document, report, whitepaper, proposal, memo, or spec in this open-doc repo.
Current Doc
simonliu-ai-product/open-doc
Resolve which document, page, and (optionally) selected element the user is currently viewing in the open-doc dev server.
Doc Runtime Patterns
simonliu-ai-product/open-doc
Implementation patterns for the @open-doc/core runtime — the split between the viewer and the published bundle, virtual modules, the flow pipeline, the ops layer, dev-only plugins, and the…
Print Layout Review
simonliu-ai-product/open-doc
Reviews page layout, typography, and pagination code in open-doc against a print craft bar — the sheet is the deliverable, not the screen.
Viewer UI Guidelines
simonliu-ai-product/open-doc
Design and accessibility rules for the open-doc viewer chrome — the browser shell, sidebars, thumbnail rail, outline, assets and design panels, inspector overlay, and menus.
Related
Categories
Questions about Apply Comments
What does Apply Comments do?
A skill your agent uses when the user asks to apply, process, or clear the comments they left in the open-doc inspector — phrases like "apply the comments", "apply my edits", "I left notes on the…. Apply Comments is an agent skill from simonliu-ai-product/open-doc. Use this skill when the user asks to apply, process, or clear the comments they left in the open-doc inspector — phrases like "apply the comments", "apply my edits", "I left notes on the document", "process the markers", "/apply-comments".
When should I use Apply Comments?
Apply Comments fits situations like: the user asks to apply; clear the comments they left in the open-doc inspector — phrases like apply the comments; I left notes on the document; process the markers.
How do I install Apply Comments in Claude Code?
Run `npx skills add simonliu-ai-product/open-doc --skill apply-comments -a claude-code`. Or copy the skill folder (packages/core/skills/apply-comments in simonliu-ai-product/open-doc) into .claude/skills/apply-comments in your project. Claude Code loads it when a task matches its description.
How do I install Apply Comments in Codex?
Run `npx skills add simonliu-ai-product/open-doc --skill apply-comments -a codex`. Or copy the skill folder (packages/core/skills/apply-comments in simonliu-ai-product/open-doc) into .agents/skills/apply-comments in your project. Codex loads it when a task matches its description.
Can I use Apply Comments 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 simonliu-ai-product/open-doc --skill apply-comments -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/apply-comments, .gemini/skills/apply-comments, .github/skills/apply-comments and .opencode/skills/apply-comments in your project.
What does Apply Comments need to run?
Going by SKILL.md and its folder, Apply Comments needs the command-line tools its instructions call (curl).
Does Apply Comments access the network?
SKILL.md contains no URLs. Its commands use curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Apply Comments 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 Apply Comments use?
Apply Comments is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Apply Comments use?
About 948 tokens (SKILL.md is roughly 3.8k 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 Apply Comments?
Skills that share tags, products or a category with Apply Comments: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Apply Comments?
simonliu-ai-product (a GitHub organization) maintains it in simonliu-ai-product/open-doc, which has 108 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 7, 2026.
Source: simonliu-ai-product/open-doc on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.