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 wants to create a source-backed report, document, memo, research note, operating update, or data interpretation page delivered as editable static HTML with a…
Install Report Page
$ npx skills add OWWZO/ai-agent --skill report-page -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install OWWZO/ai-agent report-page --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/OWWZO/ai-agent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/runtime/skills/report-page .claude/skills/report-page && 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 "report-page" agent skill from https://github.com/OWWZO/ai-agent/tree/master/runtime/skills/report-page into .claude/skills/report-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-page", 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/OWWZO/ai-agent/tree/master/runtime/skills/report-pageType 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 OWWZO/ai-agent --skill report-page -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install OWWZO/ai-agent report-page --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OWWZO/ai-agent.git skills-src && mkdir -p .agents/skills && cp -r skills-src/runtime/skills/report-page .agents/skills/report-page && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "report-page" agent skill from https://github.com/OWWZO/ai-agent/tree/master/runtime/skills/report-page into .agents/skills/report-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-page", 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 OWWZO/ai-agent --skill report-page -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install OWWZO/ai-agent report-page --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OWWZO/ai-agent.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/runtime/skills/report-page .cursor/skills/report-page && 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 "report-page" agent skill from https://github.com/OWWZO/ai-agent/tree/master/runtime/skills/report-page into .cursor/skills/report-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-page", 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/OWWZO/ai-agent.git --path runtime/skills/report-page--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 OWWZO/ai-agent --skill report-page -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install OWWZO/ai-agent report-page --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OWWZO/ai-agent.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/runtime/skills/report-page .gemini/skills/report-page && 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 "report-page" agent skill from https://github.com/OWWZO/ai-agent/tree/master/runtime/skills/report-page into .gemini/skills/report-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-page", 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 OWWZO/ai-agent report-pageInstalls 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 OWWZO/ai-agent --skill report-page -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/OWWZO/ai-agent.git skills-src && mkdir -p .github/skills && cp -r skills-src/runtime/skills/report-page .github/skills/report-page && 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 "report-page" agent skill from https://github.com/OWWZO/ai-agent/tree/master/runtime/skills/report-page into .github/skills/report-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-page", 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 OWWZO/ai-agent --skill report-page -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install OWWZO/ai-agent report-page --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/OWWZO/ai-agent.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/runtime/skills/report-page .opencode/skills/report-page && 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 "report-page" agent skill from https://github.com/OWWZO/ai-agent/tree/master/runtime/skills/report-page into .opencode/skills/report-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "report-page", 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
report-page- GitHub stars
- 188
- Token cost
- ~4k tokens
- SKILL.md length
- 2,079 words
- Files
- 12 (incl. references, assets)
- Skills in repo
- 17
- Repo updated
- First seen
- Licence
- None found
At a glance
A skill your agent uses when the user wants to create a source-backed report, document, memo, research note, operating update, or data interpretation page delivered as editable static HTML with a…
- Works in 12 steps: Interpret the user's goal first. Infer… → Read references/output-layout.md, create… → Read references/story-planning.md, then… → …
- The user wants to create a source-backed report
- SKILL.md covers Overview, Workflow, Page Contract and Story Contract, plus 9 more sections
- Runs JavaScript scripts from its folder
What it does
Report Page is an agent skill from OWWZO/ai-agent. Use when the user wants to create a source-backed report, document, memo, research note, operating update, or data interpretation page delivered as editable static HTML with a clean document reading experience and optional ECharts figures.
Its SKILL.md is about 4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 13 other files, including reference files and assets (for example `assets/doc.js`, `assets/echarts.min.js` and `assets/mermaid.min.js`).
It sits in Frontend & Design. The repository describes itself as: 一个面向全网研究与复杂数据分析的云端智能体，能在公开网络、YouTube、BiliBili、X、小红书、Hacker News上研究任何主题 。项目wiki：https://zread.ai/OWWZO/ai-agent.
When your agent uses it
- The user wants to create a source-backed report
- Operating update
- Data interpretation page delivered as editable static HTML with a clean document reading experience and optional ECharts figures
Example prompts
- “/report-page”
Requirements
- Python 3
- Node.js
Workflow steps
12 steps, taken from the first numbered list in SKILL.md.
- Interpret the user's goal first. Infer the likely reader, page purpose, desired depth, tone, and the interpretation or explanation they…
- Read references/output-layout.md, create one folder for the page, and keep all page-specific files inside that folder.
- Read references/story-planning.md, then draft a page spine that fits the inferred genre: context, core question or promise, main thesis or…
- Choose the output path before writing. The output is a static hand-authored HTML document.
- Inspect any provided input data, files, links, screenshots, or research sources. Confirm source URLs/files, dates, units, and material…
- Put reviewed source data in page-slug/data/ and page-specific images in page-slug/images/ when practical. For news, weekly digests…
- Read references/page-structure.md before changing page blocks or document markup.
- Read references/media-and-diagrams.md before adding diagrams, workflow visuals, architecture maps, Mermaid blocks, images, or other…
- Read references/data-and-charts.md before changing quantitative chart data, inline JSON payloads, ECharts options, or source notes.
- Read references/chart-selection.md before choosing chart families, adding new ECharts option builders, or deciding that a table/prose…
- Read references/visual-interactions.md before changing CSS, table of contents behavior, chart menus, Mermaid behavior, or lightweight…
- Make an explicit page plan before writing blocks. Decide the opening shape separately from the rest of the document: what the first screen…
What it can do on your machine
Read from SKILL.md and the folder at commit cb6e389. 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
Report Page loads about 4k tokens when it runs, and up to ~14k if it reads all its reference files. Until then it costs about 63 tokens; SKILL.md has 2,079 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
Without a licence we can't republish the file, so here is its outline and opening line. It has 2,079 words (~3,960 tokens).
“Build a report or document that reads like the kind of deliverable the user actually asked for: clear narrative sections, calm typography, useful blocks, optional source-backed evidence, optional quantitative figures rendered through ECharts, tables, images, diagrams, captions, and a dynamic…”
- name
- report-page
Files
SKILL.md and 11 other files (references, assets) in runtime/skills/report-page of OWWZO/ai-agent.
- SKILL.md
- assets/doc.css
- assets/doc.js
- assets/echarts.min.js
- assets/mermaid.min.js
- references/chart-selection.md
- references/data-and-charts.md
- references/media-and-diagrams.md
- references/output-layout.md
- references/page-structure.md
- references/story-planning.md
- references/visual-interactions.md
Open the folder on GitHubat commit cb6e389
Compare with similar skills
Report Page 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 |
|---|---|---|---|---|---|---|
| Report Page this skillOWWZO/ai-agent | 188 | — | ~4k | Automated safety check: Pass | None | |
| 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 OWWZO/ai-agent
All 17 skills in this repoThreejs Animation
OWWZO/ai-agent
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing.
Threejs Fundamentals
OWWZO/ai-agent
Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems.
Gpt Image 2 Style Library
OWWZO/ai-agent
Choose GPT-Image2 / gpt-image-2 visual styles and industrial prompt templates from the awesome-gpt-image-2 style library.
Ppt Page
OWWZO/ai-agent
Create single-file HTML presentation galleries as a vertical, single-column feed of capped-width slide cards.
Threejs Geometry
OWWZO/ai-agent
Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing.
Threejs Interaction
OWWZO/ai-agent
Three.js interaction - raycasting, controls, mouse/touch input, object selection.
Related
Categories
Questions about Report Page
What does Report Page do?
A skill your agent uses when the user wants to create a source-backed report, document, memo, research note, operating update, or data interpretation page delivered as editable static HTML with a…. Report Page is an agent skill from OWWZO/ai-agent. Use when the user wants to create a source-backed report, document, memo, research note, operating update, or data interpretation page delivered as editable static HTML with a clean document reading experience and optional ECharts figures.
When should I use Report Page?
Report Page fits situations like: the user wants to create a source-backed report; operating update; data interpretation page delivered as editable static HTML with a clean document reading experience and optional ECharts figures.
How do I install Report Page in Claude Code?
Run `npx skills add OWWZO/ai-agent --skill report-page -a claude-code`. Or copy the skill folder (runtime/skills/report-page in OWWZO/ai-agent) into .claude/skills/report-page in your project. Claude Code loads it when a task matches its description.
How do I install Report Page in Codex?
Run `npx skills add OWWZO/ai-agent --skill report-page -a codex`. Or copy the skill folder (runtime/skills/report-page in OWWZO/ai-agent) into .agents/skills/report-page in your project. Codex loads it when a task matches its description.
Can I use Report Page 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 OWWZO/ai-agent --skill report-page -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/report-page, .gemini/skills/report-page, .github/skills/report-page and .opencode/skills/report-page in your project.
What does Report Page need to run?
Going by SKILL.md and its folder, Report Page needs JavaScript for the scripts in its folder. Our summary lists: Python 3; Node.js.
Does Report Page 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 Report Page 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 Report Page use?
No licence was found for Report Page or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Report Page use?
About 4k tokens (SKILL.md is roughly 16k 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 9.6k tokens, read only when the agent opens those files.
What are the alternatives to Report Page?
Skills that share tags, products or a category with Report Page: 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 Report Page?
OWWZO (a GitHub user) maintains it in OWWZO/ai-agent, which has 188 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on September 19, 2026.
Source: OWWZO/ai-agent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.