New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Use Artifacts

by KonghaYao in KonghaYao/peri

Teach the agent when and how to use the artifact tool: what content belongs in artifacts, when to upload/update, and the SearchExtraTools + ExecuteExtraTool invocation flow for the deferred artifact…

Apache-2.0Auto-check passed

Install Use Artifacts

skills CLI
$ npx skills add KonghaYao/peri --skill use-artifacts -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install KonghaYao/peri use-artifacts --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/KonghaYao/peri.git skills-src && mkdir -p .claude/skills && cp -r skills-src/peri-middlewares/src/skills/builtin/skills/use-artifacts .claude/skills/use-artifacts && rm -rf skills-src

Use ~/.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/

Facts

Skill name
use-artifacts
GitHub stars
223
Token cost
~1.1k tokens
SKILL.md length
308 words
Files
1
Skills in repo
19
Repo updated
First seen
Licence
Apache-2.0

At a glance

Teach the agent when and how to use the artifact tool: what content belongs in artifacts, when to upload/update, and the SearchExtraTools + ExecuteExtraTool invocation flow for the deferred artifact…

  • SKILL.md covers When to use artifacts, Cadence — when to upload, How to invoke (deferred tool) and Choosing HTML vs Markdown, plus 2 more sections
  • Reaches cloud-artifacts.claude-code-best.win

What it does

Use Artifacts is an agent skill from KonghaYao/peri. Teach the agent when and how to use the artifact tool: what content belongs in artifacts, when to upload/update, and the SearchExtraTools + ExecuteExtraTool invocation flow for the deferred artifact tool.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: Lightweight Rust Agent only use 50MB RAM, but Claude Code Plugin compatible, Dynamic Workflow, Goal, Artifacts, Free Web Search, full feature and better support! The licence is Apache-2.0.

Example prompts

  • “/use-artifacts”

What it can do on your machine

Read from SKILL.md and the folder at commit d7ee444. 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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html and markdown).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cloud-artifacts.claude-code-best.win

    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

Use Artifacts loads about 1.1k tokens when it runs. Until then it costs about 55 tokens; SKILL.md has 308 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~55
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

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 KonghaYao/peri at commit d7ee444, republished under its Apache-2.0 licence (© KonghaYao). 308 words, ~1,050 tokens.

Download SKILL.mdSave it as .claude/skills/use-artifacts/SKILL.md (or your agent's skills folder).
name
use-artifacts
description
Teach the agent when and how to use the artifact tool: what content belongs in artifacts, when to upload/update, and the SearchExtraTools + ExecuteExtraTool invocation flow for the deferred artifact tool.
userInvocable
true
argumentHint
[optional focus note]

Using Artifacts

Artifacts are public HTML pages you upload to a hosting service. They have stable URLs that you can share with the user or open in a browser. Use them to surface work-in-progress, summaries, and reports.

When to use artifacts

Good artifact content:

  • Progress panels / kanbans (task list with status)
  • Research reports and analysis (data + findings + recommendations)
  • Design docs / decision records (with context and rationale)
  • Data visualizations (tables, SVG charts, flow diagrams)
  • Final deliverables (the "thing the user asked for" rendered as HTML)

Do NOT use artifacts for:

  • Code snippets — use files directly
  • One-line answers — keep them in chat
  • Internal debug logs — keep them in chat
  • Large data dumps — link to source files instead

Cadence — when to upload

  • Task start: if the task is complex (multi-step, research, deliverable), upload a skeleton artifact first as scaffolding (placeholder sections).
  • Milestones: when you complete a phase (research done / implementation done / tests pass), update the artifact.
  • User asks: upload immediately.
  • Task end: ship the final artifact as the deliverable.

Do NOT upload:

  • After every tool call (noise)
  • Mid-step with no meaningful change (e.g. fixed a typo)

How to invoke (deferred tool)

artifact is a deferred tool. The first call requires two steps; subsequent calls one step.

First upload (creates a new artifact):

1. Use the Write tool to write HTML (.html) or Markdown (.md) to a local file (location is your choice).
2. SearchExtraTools({ query: "select:artifact" })   // loads the tool schema
3. ExecuteExtraTool({ tool_name: "artifact", params: { file_path: "<absolute-path>.html|.md" } })
4. Save the returned `id` from the tool result — this is the hash.

Subsequent updates (overwrites in place, URL stays stable):

1. Update the local file.
2. ExecuteExtraTool({ tool_name: "artifact", params: { file_path: "<absolute-path>.html|.md", hash: "<id-from-first-call>" } })

The URL returned on every call is the same when you pass the same hash. The user can open it at any time to see the latest version.

Choosing HTML vs Markdown

  • Markdown (.md) — preferred for text-heavy reports, design docs, research notes. The tool converts it to a styled HTML page (GFM tables, fenced code blocks, blockquotes, headings). You write content, not chrome.
  • HTML (.html) — preferred when you need bespoke layout, custom CSS, embedded SVG, or interactive <script>. The hosting service serves the HTML verbatim.

Minimal HTML skeleton

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Artifact Title</title>
  <style>
    body { font: 14px/1.5 -apple-system, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
    h1, h2 { color: #1a1a1a; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; }
  </style>
</head>
<body>
  <h1>Artifact Title</h1>
  <!-- content here -->
</body>
</html>

Minimal Markdown skeleton

md
# Artifact Title

## Section

Body paragraph with **bold**, *italic*, and `inline code`.

- Bullet item
- Bullet item

| Column A | Column B |
| -------- | -------- |
| cell     | cell     |

```ts
// fenced code block — language hint is preserved
const x = 1

The hosting service serves the HTML verbatim (including any `<script>` you include), so you can use vanilla JS/SVG/CSS as needed. Do not embed secrets.

## Notes

- Artifacts expire (default 7 days; pass `ttl: 30` for 30-day retention).
- Anyone with the URL can view the artifact — treat the URL as the secret.
- The `/artifacts` slash command shows all artifacts uploaded in the current session.
- Uploaded URL format: `https://cloud-artifacts.claude-code-best.win/<7d|30d>/<id>.html`

© KonghaYao, 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 peri-middlewares/src/skills/builtin/skills/use-artifacts of KonghaYao/peri.

Open the folder on GitHubat commit d7ee444

Compare with similar skills

Use Artifacts 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.

Use Artifacts compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Use Artifacts this skillKonghaYao/peri223—~1.1kAutomated safety check: PassApache-2.0
Artifacts Buildernexu-io/open-design100k—~347Automated safety check: PassApache-2.0
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
Web Artifacts Buildernexu-io/open-design100k—~337Automated safety check: PassApache-2.0
Web Artifacts Buildersickn33/agentic-awesome-skills47k3 repos~824Automated safety check: PassApache-2.0
Teachcursor/plugins10k9 repos~1.4kAutomated safety check: PassNone

Similar skills

  • Artifacts Builder

    nexu-io/open-design

    Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).

    100k GitHub stars~347 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • Web Artifacts Builder

    nexu-io/open-design

    Build complex claude.ai HTML artifacts with React and Tailwind.

    100k GitHub stars~337 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Web Artifacts Builder

    sickn33/agentic-awesome-skills

    To build powerful frontend claude.ai artifacts, follow these steps:

    47k GitHub starsUsed in 3 repos~824 tokens
    Frontend & DesignAuto-check passed

  • Teach

    cursor/plugins

    Official

    Explain a body of work plainly so a person actually understands it.

    10k GitHub starsUsed in 9 repos~1.4k tokens
    EducationAuto-check passed

  • Artifact Diagramming

    asgeirtj/system_prompts_leaks

    Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes.

    69k GitHub stars~963 tokensUpdated yesterday
    Auto-check passed

More from KonghaYao/peri

All 19 skills in this repo

  • Langfuse and LLM Gateway Logs

    KonghaYao/peri

    Queries Langfuse traces, prompts, datasets and sessions, and analyzes local LLM gateway logs for requests, context growth, token use and cache hits.

    223 GitHub stars~4.3k tokensUpdated today
    Auto-check: notes

  • Learn From History Audit

    KonghaYao/peri

    Audits recent agent conversation history and turns repeated failures and successes into testable harness improvement proposals that later audits can check.

    223 GitHub stars~3.5k tokensUpdated today
    Auto-check passed

  • SSH Remote Command CLI

    KonghaYao/peri

    Runs commands, reads and edits files, and copies data on remote machines through a single-file Node script that wraps the system ssh and scp, in Chinese.

    223 GitHub stars~924 tokensUpdated today
    Auto-check: warnings

  • Advisor Consultation

    KonghaYao/peri

    Sends a compact, redacted decision packet to a tool-free Opus advisor subagent when a task has high-risk trade-offs or stalled investigations, then weighs the answer.

    223 GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • Scheduled Tasks Cron

    KonghaYao/peri

    Registers, lists and removes recurring agent tasks with five-field cron expressions, and sets safety rules so a schedule is created only when the user clearly asks.

    223 GitHub stars~683 tokensUpdated today
    Auto-check passed

  • Heavy Verify Loop for Peri TUI

    KonghaYao/peri

    Verifies and repairs a feature by using the real Peri terminal UI as a user would, looping verify, decide, fix and review until a fresh round shows no blockers.

    223 GitHub stars~2.1k tokensUpdated today
    Auto-check: notes

Questions about Use Artifacts

What does Use Artifacts do?

Teach the agent when and how to use the artifact tool: what content belongs in artifacts, when to upload/update, and the SearchExtraTools + ExecuteExtraTool invocation flow for the deferred artifact…. Use Artifacts is an agent skill from KonghaYao/peri. Teach the agent when and how to use the artifact tool: what content belongs in artifacts, when to upload/update, and the SearchExtraTools + ExecuteExtraTool invocation flow for the deferred artifact tool.

How do I install Use Artifacts in Claude Code?

Run `npx skills add KonghaYao/peri --skill use-artifacts -a claude-code`. Or copy the skill folder (peri-middlewares/src/skills/builtin/skills/use-artifacts in KonghaYao/peri) into .claude/skills/use-artifacts in your project. Claude Code loads it when a task matches its description.

How do I install Use Artifacts in Codex?

Run `npx skills add KonghaYao/peri --skill use-artifacts -a codex`. Or copy the skill folder (peri-middlewares/src/skills/builtin/skills/use-artifacts in KonghaYao/peri) into .agents/skills/use-artifacts in your project. Codex loads it when a task matches its description.

Can I use Use Artifacts 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 KonghaYao/peri --skill use-artifacts -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/use-artifacts, .gemini/skills/use-artifacts, .github/skills/use-artifacts and .opencode/skills/use-artifacts in your project.

What does Use Artifacts need to run?

SKILL.md names no scripts, command-line tools or credentials: Use Artifacts is instructions for the agent only.

Does Use Artifacts access the network?

SKILL.md names 1 domain. In commands or code: cloud-artifacts.claude-code-best.win; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Use Artifacts 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 Use Artifacts use?

Use Artifacts 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 Use Artifacts use?

About 1.1k tokens (SKILL.md is roughly 4.2k 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 Use Artifacts?

Skills that share tags, products or a category with Use Artifacts: Artifacts Builder (nexu-io/open-design, 100k stars), Web Artifacts Builder (anthropics/skills, 180k stars), Web Artifacts Builder (nexu-io/open-design, 100k stars) and Web Artifacts Builder (sickn33/agentic-awesome-skills, 47k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Use Artifacts?

KonghaYao (a GitHub user) maintains it in KonghaYao/peri, which has 223 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 8, 2026.

Source: KonghaYao/peri on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.