Web Artifacts Builder
LeastBit/Claude_skills_zh-CN
用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。
A skill your agent uses when adding @axhub/annotation to standalone React apps, plain HTML pages, Vite prototypes, or other web hosts that need annotation markers, directories, Markdown notes, or…
Install Axhub Annotation Standalone
$ npx skills add lintendo/Axhub-Skills --skill axhub-annotation-standalone -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install lintendo/Axhub-Skills axhub-annotation-standalone --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/lintendo/Axhub-Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/axhub-annotation-standalone .claude/skills/axhub-annotation-standalone && 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 "axhub-annotation-standalone" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/axhub-annotation-standalone into .claude/skills/axhub-annotation-standalone/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "axhub-annotation-standalone", 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/lintendo/Axhub-Skills/tree/main/skills/axhub-annotation-standaloneType 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 lintendo/Axhub-Skills --skill axhub-annotation-standalone -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install lintendo/Axhub-Skills axhub-annotation-standalone --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/axhub-annotation-standalone .agents/skills/axhub-annotation-standalone && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "axhub-annotation-standalone" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/axhub-annotation-standalone into .agents/skills/axhub-annotation-standalone/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "axhub-annotation-standalone", 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 lintendo/Axhub-Skills --skill axhub-annotation-standalone -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install lintendo/Axhub-Skills axhub-annotation-standalone --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/axhub-annotation-standalone .cursor/skills/axhub-annotation-standalone && 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 "axhub-annotation-standalone" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/axhub-annotation-standalone into .cursor/skills/axhub-annotation-standalone/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "axhub-annotation-standalone", 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/lintendo/Axhub-Skills.git --path skills/axhub-annotation-standalone--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 lintendo/Axhub-Skills --skill axhub-annotation-standalone -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install lintendo/Axhub-Skills axhub-annotation-standalone --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/axhub-annotation-standalone .gemini/skills/axhub-annotation-standalone && 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 "axhub-annotation-standalone" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/axhub-annotation-standalone into .gemini/skills/axhub-annotation-standalone/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "axhub-annotation-standalone", 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 lintendo/Axhub-Skills axhub-annotation-standaloneInstalls 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 lintendo/Axhub-Skills --skill axhub-annotation-standalone -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/axhub-annotation-standalone .github/skills/axhub-annotation-standalone && 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 "axhub-annotation-standalone" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/axhub-annotation-standalone into .github/skills/axhub-annotation-standalone/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "axhub-annotation-standalone", 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 lintendo/Axhub-Skills --skill axhub-annotation-standalone -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install lintendo/Axhub-Skills axhub-annotation-standalone --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/axhub-annotation-standalone .opencode/skills/axhub-annotation-standalone && 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 "axhub-annotation-standalone" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/axhub-annotation-standalone into .opencode/skills/axhub-annotation-standalone/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "axhub-annotation-standalone", 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
axhub-annotation-standalone- GitHub stars
- 130
- Token cost
- ~831 tokens
- SKILL.md length
- 250 words
- Files
- 5 (incl. references)
- Skills in repo
- 13
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses when adding @axhub/annotation to standalone React apps, plain HTML pages, Vite prototypes, or other web hosts that need annotation markers, directories, Markdown notes, or…
- Works in 6 steps: 启动宿主预览。 → 确认目标元素上出现 marker。 → 点击 marker，能看到短标注或 Markdown 正文。 → …
- Adding @axhub/annotation to standalone React apps
- SKILL.md covers 参考案例, 接入前提, 入口选择 and React 接入, plus 4 more sections
- Runs JavaScript scripts from its folder
What it does
Axhub Annotation Standalone is an agent skill from lintendo/Axhub-Skills. Use when adding @axhub/annotation to standalone React apps, plain HTML pages, Vite prototypes, or other web hosts that need annotation markers, directories, Markdown notes, or state controls.
Its SKILL.md is about 830 tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `references/annotation-source.json` and `references/axhub-annotation.global.js`).
It sits in Frontend & Design, covering HTML artifacts and Note-taking. It works with React, Vite and npm. The licence is MIT.
When your agent uses it
- Adding @axhub/annotation to standalone React apps
- Plain HTML pages
- Vite prototypes
- Other web hosts that need annotation markers
Example prompts
- “/axhub-annotation-standalone”
Requirements
- Node.js
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- 启动宿主预览。
- 确认目标元素上出现 marker。
- 点击 marker，能看到短标注或 Markdown 正文。
- 打开目录，验证 route、markdown、link。
- 修改状态控件，确认 React 状态或普通 DOM 同步变化。
- 检查控制台是否有 import、peer dependency 或 locator 错误。
What it can do on your machine
Read from SKILL.md and the folder at commit 1e1c5bc. 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
Ships script files (JavaScript), which the agent can run.
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
Axhub Annotation Standalone loads about 831 tokens when it runs, and up to ~240k if it reads all its reference files. Until then it costs about 55 tokens; SKILL.md has 250 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 lintendo/Axhub-Skills at commit 1e1c5bc, republished under its MIT licence (© lintendo). 250 words, ~831 tokens.
Download SKILL.mdSave it as
.claude/skills/axhub-annotation-standalone/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- axhub-annotation-standalone
- description
- Use when adding @axhub/annotation to standalone React apps, plain HTML pages, Vite prototypes, or other web hosts that need annotation markers, directories, Markdown notes, or state controls.
Axhub Annotation Standalone
在独立 Web 项目中使用 @axhub/annotation 时，用这个技能。它只说明运行时接入：页面已有标注数据，只需要展示 marker、标注面板、目录和状态控件。
参考案例
| 宿主 | 使用方式 | 文件 |
|---|---|---|
| React | AnnotationViewer 组件 | references/react-example.tsx |
| 普通 HTML / DOM | browser bundle + window.AxhubAnnotation.createAnnotationViewer | references/axhub-annotation.global.js + references/html-example.html |
| 数据源 | AnnotationSourceDocument JSON | references/annotation-source.json |
接入前提
- 标注数据使用一份
AnnotationSourceDocument，静态 import 或由宿主 loader 返回。 - 被标注元素优先加稳定属性，例如
data-annotation-id。 - React 18 / Vite 等现代宿主可以安装
@axhub/annotation并走 ESM。 - 普通 HTML、DOM-only、React 17、Vue、Angular、托管注入或
file://静态页，优先走 standalone browser bundle，不要求宿主安装 React / ReactDOM / antd。
入口选择
- 用户明确说 React 18、Vite、ESM 或已有前端工程时，使用
AnnotationViewer或 ESMcreateAnnotationViewer。 - 用户说普通 HTML、静态 HTML、DOM、无构建、
file://、只想打开 HTML 看效果，必须使用 browser bundle，可从本 skill 的references/axhub-annotation.global.js或 npm 包 / 本地构建产物里的dist/browser/axhub-annotation.global.js复制。 - HTML 模式只接入包提供的 runtime：
window.AxhubAnnotation.createAnnotationViewer(...)。 - 不要在宿主里手写 marker、浮层面板、目录、Markdown 渲染或状态控件的等价 UI；如果缺少 browser bundle，先构建或复制 bundle，而不是重做 UI。
React 接入
- 挂载
AnnotationViewer。 - 多页面时传
options.currentPageId。 - 目录
route在options.onDirectoryRoute中交给宿主切页。 - 状态标注用
useProtoDevState()读取controls值。 - 发布为带源码 HTML 后，发布产物会注入
sourceReference，指向source/manifest.json；宿主接入代码不需要生成它。
普通 HTML 接入
- 从 npm 包、本地构建产物或本 skill 的
references/axhub-annotation.global.js复制 browser bundle 到静态资源目录；npm / 本地构建路径为dist/browser/axhub-annotation.global.js。 - 在页面里先加载
<script src="./axhub-annotation.global.js"></script>，实际路径按静态资源目录调整。 - 用
window.AxhubAnnotation.createAnnotationViewer()创建运行时。 - 用
getCurrentPageId返回当前页面。 - 切页后调用
viewer.refresh()。 - 状态控件可订阅
window.__AXHUB_PROTO_DEV__，从getState()读值并更新 DOM。 - 如果页面必须直接用
file://打开，避免依赖跨文件 fetch/import；运行时仍然必须来自 browser bundle。
数据要点
directory.nodes放folder/route/markdown/link，不需要locator。type: "markdown"目录文档可以直接写markdown正文。- 需要把目录文档拆成
.md文件时，可以写markdownPath，例如docs/prd-03-status.md；这是构建侧约定，运行时仍读取内联后的markdown。 markdownPath只用于目录文档，不用于 marker 标注节点。data.nodes[]放页面 marker，必须有能在宿主页面解析到的locator。- marker 只属于某些页面或状态时，写
pageId。 - 长正文用
hasMarkdown: true+markdownMap[node.id]。 - 状态标注写节点
controls；JSON 里只放可序列化字段。 - 页面有对话框或遮罩层时，检查实际 DOM，把包含内容的活动层根选择器写入
presentation.layerSelectors。 sourceReference不放在 JSON 数据源里，只描述发布包中的源码清单位置，不内联源码文件。
验收
- 启动宿主预览。
- 确认目标元素上出现 marker。
- 点击 marker，能看到短标注或 Markdown 正文。
- 打开目录，验证
route、markdown、link。 - 修改状态控件，确认 React 状态或普通 DOM 同步变化。
- 检查控制台是否有 import、peer dependency 或 locator 错误。
常见错误
- 不要把函数写进 JSON controls。
- 不要为了让静态页可见而手写标注 UI；HTML 模式也必须使用
@axhub/annotation的 browser runtime。 - 不要在普通 HTML 模式里先跳到 Vite/ESM 接入；最短路径是 browser bundle +
window.AxhubAnnotation.createAnnotationViewer(...)。 - 不要依赖脆弱的生成 CSS 选择器；能加
data-annotation-id就加。 - 不要期待
route自动跳转；宿主必须在onDirectoryRoute里处理。
© lintendo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 4 other files (references) in skills/axhub-annotation-standalone of lintendo/Axhub-Skills.
- SKILL.md
- references/annotation-source.json
- references/axhub-annotation.global.js
- references/html-example.html
- references/react-example.tsx
Open the folder on GitHubat commit 1e1c5bc
Compare with similar skills
Axhub Annotation Standalone 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 |
|---|---|---|---|---|---|---|
| Axhub Annotation Standalone this skilllintendo/Axhub-Skills | 130 | — | ~831 | Automated safety check: Pass | MIT | |
| Web Artifacts BuilderLeastBit/Claude_skills_zh-CN | 590 | — | ~458 | Automated safety check: Pass | Apache-2.0 | |
| Web Artifacts Buildersickn33/agentic-awesome-skills | 47k | 3 repos | ~824 | Automated safety check: Pass | Apache-2.0 | |
| Artifacts Builderboshi-xixixi/TraeSkill | 276 | — | ~768 | Automated safety check: Pass | Apache-2.0 | |
| Web Artifacts Buildermajiayu000/spellbook | 287 | — | ~744 | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 |
Similar skills
Web Artifacts Builder
sickn33/agentic-awesome-skills
To build powerful frontend claude.ai artifacts, follow these steps:
Artifacts Builder
boshi-xixixi/TraeSkill
当用户需要创建复杂的多组件 HTML Artifacts（包含 React、Tailwind CSS、shadcn/ui）时使用。此 Skill 用于需要状态管理、路由或 shadcn/ui 组件的复杂 Artifacts，不适用于简单的单文件 HTML/JSX。
Web Artifacts Builder
majiayu000/spellbook
A skill your agent uses when creating elaborate, multi-component claude.ai HTML artifacts with React, Tailwind CSS, shadcn/ui, state management, routing, or complex frontend structure; not for…
- Official
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.
Frontend Build Timing Audit
openops-cloud/openops
Detects and diagnoses chunk-evaluation timing bugs in the Vite/rolldown production build of react-ui (works-in-dev / broken-in-build i18n regressions, missing UI labels, module-scope t()…
More from lintendo/Axhub-Skills
All 13 skills in this repoReact To Figma Make
lintendo/Axhub-Skills
A skill your agent uses when 需要把现有 React、Vite、Next.js、V0 或 AI Studio 页面转换为 Figma Make 可导入的 .fig 资产，或补齐、更新、验证已有 Figma Make 导出壳和 canvas.fig。
Search Design System
lintendo/Axhub-Skills
A skill your agent uses when selecting an existing design system or theme for a product, page, prototype, or implementation through Axhub design knowledge indexes; not when creating or updating a…
Axhub Prototype Context
lintendo/Axhub-Skills
A skill your agent uses when an annotated prototype URL exposes PRD, directory, annotation, or source context that an AI Agent needs for review, implementation planning, production work, source…
Extract Axure Data
lintendo/Axhub-Skills
Extract structured data from Axure prototypes using Playwright — screenshots, design tokens, interaction maps, annotations, and page text.
Clone Page
lintendo/Axhub-Skills
高精度克隆网页。使用 Playwright 渐进式采集页面数据（DOM 结构、样式、截图、资源）， 然后分阶段构建完整的 HTML/CSS 还原。支持快速还原和高精度还原两种模式。
Extract Page Data
lintendo/Axhub-Skills
Extract structured data from any web page using Playwright — screenshots, design tokens, page text as Markdown, interactive element maps, and full page data packs.
Related
Categories
Questions about Axhub Annotation Standalone
What does Axhub Annotation Standalone do?
A skill your agent uses when adding @axhub/annotation to standalone React apps, plain HTML pages, Vite prototypes, or other web hosts that need annotation markers, directories, Markdown notes, or…. Axhub Annotation Standalone is an agent skill from lintendo/Axhub-Skills. Use when adding @axhub/annotation to standalone React apps, plain HTML pages, Vite prototypes, or other web hosts that need annotation markers, directories, Markdown notes, or state controls.
When should I use Axhub Annotation Standalone?
Axhub Annotation Standalone fits situations like: adding @axhub/annotation to standalone React apps; plain HTML pages; vite prototypes; other web hosts that need annotation markers.
How do I install Axhub Annotation Standalone in Claude Code?
Run `npx skills add lintendo/Axhub-Skills --skill axhub-annotation-standalone -a claude-code`. Or copy the skill folder (skills/axhub-annotation-standalone in lintendo/Axhub-Skills) into .claude/skills/axhub-annotation-standalone in your project. Claude Code loads it when a task matches its description.
How do I install Axhub Annotation Standalone in Codex?
Run `npx skills add lintendo/Axhub-Skills --skill axhub-annotation-standalone -a codex`. Or copy the skill folder (skills/axhub-annotation-standalone in lintendo/Axhub-Skills) into .agents/skills/axhub-annotation-standalone in your project. Codex loads it when a task matches its description.
Can I use Axhub Annotation Standalone 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 lintendo/Axhub-Skills --skill axhub-annotation-standalone -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/axhub-annotation-standalone, .gemini/skills/axhub-annotation-standalone, .github/skills/axhub-annotation-standalone and .opencode/skills/axhub-annotation-standalone in your project.
What does Axhub Annotation Standalone need to run?
Going by SKILL.md and its folder, Axhub Annotation Standalone needs JavaScript for the scripts in its folder. Our summary lists: Node.js.
Does Axhub Annotation Standalone 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 Axhub Annotation Standalone 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 Axhub Annotation Standalone use?
Axhub Annotation Standalone 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 Axhub Annotation Standalone use?
About 831 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 239k tokens, read only when the agent opens those files.
What are the alternatives to Axhub Annotation Standalone?
Skills that share tags, products or a category with Axhub Annotation Standalone: Web Artifacts Builder (LeastBit/Claude_skills_zh-CN, 590 stars), Web Artifacts Builder (sickn33/agentic-awesome-skills, 47k stars), Artifacts Builder (boshi-xixixi/TraeSkill, 276 stars) and Web Artifacts Builder (majiayu000/spellbook, 287 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Axhub Annotation Standalone?
lintendo (a GitHub user) maintains it in lintendo/Axhub-Skills, which has 130 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on August 21, 2026.
Source: lintendo/Axhub-Skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.