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

Artifact Designer

by latitude-dev in latitude-dev/latitude-llm

Create, validate, preview, and publish self-contained HTML artifacts.

MITAuto-check passedFrontend & Design

Install Artifact Designer

skills CLI
$ npx skills add latitude-dev/latitude-llm --skill artifact-designer -a claude-code

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

GitHub CLI
$ gh skill install latitude-dev/latitude-llm artifact-designer --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/latitude-dev/latitude-llm.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/artifact-designer .claude/skills/artifact-designer && 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
artifact-designer
GitHub stars
4.7k
Token cost
~1.1k tokens
SKILL.md length
316 words
Files
5 (incl. scripts, references)
Skills in repo
28
Repo updated
First seen
Licence
MIT

At a glance

Create, validate, preview, and publish self-contained HTML artifacts.

  • Works in 3 steps: .artifacts/DESIGN.md → ~/.artifact-designer/DESIGN.md → references/design-system.md and…
  • Diff walkthroughs
  • SKILL.md covers Core rule, Existing HTML file, New artifact and Design rules for new artifacts, plus 2 more sections
  • Runs JavaScript scripts from its folder; calls node and wrangler

What it does

Artifact Designer is an agent skill from latitude-dev/latitude-llm. Create, validate, preview, and publish self-contained HTML artifacts. Use for dashboards, reports, timelines, prototypes, diff walkthroughs, benchmark viewers, decision docs, and existing HTML files that need previewing or publishing. Use direct file commands for user-provided HTML; scaffold only when creating a new artifact.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including scripts and reference files (for example `references/design-system.md`).

It sits in Frontend & Design, covering HTML artifacts. The repository describes itself as: Open-source observability for AI agents. Find where your agents fail, dispatch your coding agent to fix it, and verify the fix against real traces. The licence is MIT.

When your agent uses it

  • Diff walkthroughs
  • Benchmark viewers
  • Existing HTML files that need previewing

Example prompts

  • “/artifact-designer”

Requirements

  • Node.js

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. .artifacts/DESIGN.md
  2. ~/.artifact-designer/DESIGN.md
  3. references/design-system.md and references/artifact-theme.css

What it can do on your machine

Read from SKILL.md and the folder at commit 12e8591. 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 1 file in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • wrangler

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

  • Network

    No URLs in SKILL.md. Its commands use wrangler, 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

Artifact Designer loads about 1.1k tokens when it runs, and up to ~3.6k if it reads all its reference files. Until then it costs about 86 tokens; SKILL.md has 316 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~86
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.6k

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); the scripts in this folder are not scanned.

SKILL.md

The full file from latitude-dev/latitude-llm at commit 12e8591, republished under its MIT licence (© latitude-dev). 316 words, ~1,081 tokens.

Download SKILL.mdSave it as .claude/skills/artifact-designer/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
artifact-designer
description
Create, validate, preview, and publish self-contained HTML artifacts. Use for dashboards, reports, timelines, prototypes, diff walkthroughs, benchmark viewers, decision docs, and existing HTML files that need previewing or publishing. Use direct file commands for user-provided HTML; scaffold only when creating a new artifact.

Artifact Designer

Use this skill for HTML artifacts and HTML publishing.

Core rule

If the user points to an existing .html or .htm file, operate on that file directly.

Do not:

  • create a new artifact
  • copy it into .artifacts/
  • wrap it in the template
  • enforce Artifact UI design classes

Use the helper's --file commands.

Existing HTML file

Validate:

bash
node <skill-dir>/scripts/artifact.mjs validate --file path/to/file.html --strict

Preview:

bash
node <skill-dir>/scripts/artifact.mjs preview --file path/to/file.html --open

Publish:

bash
node <skill-dir>/scripts/artifact.mjs publish --file path/to/file.html --target temporary

Add --name <worker-name> only when the user asks for a stable Worker name.

File validation checks publish safety and platform limits. It does not check for .artifact-* classes or bundled design tokens.

New artifact

Use this path only when the user asks you to create or redesign an artifact.

If artifact tools are available, use them:

text
artifact_create({ title, instructions, kind, id? })
artifact_validate({ id, strict: true })
artifact_preview({ id, open: true })
artifact_publish({ id, target: "cloudflare-temporary", confirmPublic: true })

Otherwise use the helper:

bash
node <skill-dir>/scripts/artifact.mjs create --title "Title" --instructions "..." --kind report
node <skill-dir>/scripts/artifact.mjs validate --id <id> --strict
node <skill-dir>/scripts/artifact.mjs preview --id <id> --open
node <skill-dir>/scripts/artifact.mjs publish --id <id> --target temporary

Generated artifacts live in:

text
.artifacts/<id>/source/index.html

Edit source/index.html; rebuild/validate before previewing or publishing.

Design rules for new artifacts

Design priority:

  1. .artifacts/DESIGN.md
  2. ~/.artifact-designer/DESIGN.md
  3. references/design-system.md and references/artifact-theme.css

Requirements for new artifacts:

  • single index.html unless Markdown is requested
  • semantic HTML inside <main class="artifact-shell">
  • use bundled .artifact-* classes before custom CSS
  • no external scripts, stylesheets, fonts, images, or APIs
  • no fetch, XMLHttpRequest, or WebSocket
  • inline only small local-interaction JavaScript
  • prefer HTML/CSS/SVG visuals
  • keep each file under 5 MiB
  • use restrained UI: whitespace, clear hierarchy, crisp borders
  • use mono text for code, IDs, metrics, timestamps, and table numbers
  • add copy/export controls for interactive decision surfaces

Publishing

Do not publish unless the user asks.

Publishing creates a public URL. Do not publish secrets, credentials, customer data, or proprietary data unless the user confirms it is safe.

Before publishing, the helper checks wrangler whoami. If Wrangler is installed and authenticated, publish to that existing Cloudflare account, including when the requested target is temporary. This creates a normal account-owned Worker and does not emit a claim URL.

If no authenticated Wrangler session is available, temporary publishing uses isolated Cloudflare auth and may expire unless claimed. Permanent publishing still requires Cloudflare authentication.

Helper commands

bash
node scripts/artifact.mjs create --title "Title" [--instructions "..."] [--kind report] [--id slug] [--format html|md]
node scripts/artifact.mjs validate --id slug [--strict]
node scripts/artifact.mjs validate --file path/to/file.html [--strict]
node scripts/artifact.mjs preview --id slug [--open]
node scripts/artifact.mjs preview --file path/to/file.html [--open]
node scripts/artifact.mjs publish --id slug [--target temporary|permanent] [--domain example.com]
node scripts/artifact.mjs publish --file path/to/file.html [--target temporary|permanent] [--domain example.com] [--name worker-name]
node scripts/artifact.mjs list
node scripts/artifact.mjs import-url --url https://... [--title "Title"] [--id slug]

© latitude-dev, 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 (scripts, references) in .agents/skills/artifact-designer of latitude-dev/latitude-llm.

  • SKILL.md
  • references/artifact-template.html
  • references/artifact-theme.css
  • references/design-system.md
  • scripts/artifact.mjs

Open the folder on GitHubat commit 12e8591

Compare with similar skills

Artifact 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.

Artifact Designer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Artifact Designer this skilllatitude-dev/latitude-llm4.7k—~1.1kAutomated safety check: PassMIT
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Paperclip Pagepaperclipai/paperclip99k—~1kAutomated safety check: PassMIT
Openkb Deck NeonVectifyAI/OpenKB4.7k1 repos~4.3kAutomated safety check: PassApache-2.0
Webhome Homepage Builderwebhtv/webhtv1.7k—~3.8kAutomated safety check: PassGPL-3.0
Solo Artifactssolo-agent/solo697—~961Automated safety check: PassMIT

Similar skills

  • LobeHub Interactive Prototype

    lobehub/lobehub

    Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Paperclip Page

    paperclipai/paperclip

    Publish static HTML pages and asset folders to the Paperclip S3/CloudFront page host.

    99k GitHub stars~1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Openkb Deck Neon

    VectifyAI/OpenKB

    A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a dark, high-tech, neon / glow /…

    4.7k GitHub starsUsed in 1 repo~4.3k tokens
    Frontend & DesignAuto-check passed

  • Webhome Homepage Builder

    webhtv/webhtv

    Build, review, debug, reverse-engineer data sources for, and package FongMi/WebHome custom homepage single-file HTML.

    1.7k GitHub stars~3.8k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Solo Artifacts

    solo-agent/solo

    A skill your agent uses when a Solo task or thread should become an interactive, reviewable, self-contained HTML artifact for progress/status, review/decision, or comparison/leaderboard work inside…

    697 GitHub stars~961 tokensUpdated 25 days ago
    Frontend & DesignAuto-check passed

  • Paper2html

    QuZhan51496/paper2anything

    Convert an academic paper PDF into a publish-ready, self-contained single-page project homepage (a self-contained index.html) — the kind of paper landing page researchers host on GitHub Pages.

    468 GitHub stars~3.3k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check: notes

More from latitude-dev/latitude-llm

All 28 skills in this repo

  • Better Auth Best Practices

    latitude-dev/latitude-llm

    Configure Better Auth server and client, set up database adapters, manage sessions, add plugins, and handle environment variables.

    4.7k GitHub starsUsed in 7 repos~1.6k tokens
    Auto-check passed

  • CI Watchdog

    latitude-dev/latitude-llm

    Continuously monitor GitHub PR CI checks and automatically fix failures until all checks pass.

    4.7k GitHub stars~1.6k tokensUpdated yesterday
    Auto-check passed

  • Temporal Developer

    latitude-dev/latitude-llm

    This skill should be used when the user asks to "create a Temporal workflow", "write a Temporal activity", "debug stuck workflow", "fix non-determinism error", "Temporal Python", "Temporal…

    4.7k GitHub stars~1.5k tokensUpdated yesterday
    Auto-check passed

  • Docs

    latitude-dev/latitude-llm

    Review the current conversation context and git changes, then persist durable repository knowledge into dev-docs/.md by domain and into AGENTS.md for cross-cutting repo rules.

    4.7k GitHub stars~2.5k tokensUpdated yesterday
    Auto-check passed

  • Managing Maintenance Windows

    latitude-dev/latitude-llm

    Enables or disables Latitude production maintenance mode by redirecting all publicly exposed production services to the Better Stack status page.

    4.7k GitHub stars~802 tokensUpdated yesterday
    Auto-check passed

  • Mintlify Preview

    latitude-dev/latitude-llm

    Run the public Mintlify product docs site locally for live preview.

    4.7k GitHub stars~813 tokensUpdated yesterday
    Auto-check passed

Categories

Questions about Artifact Designer

What does Artifact Designer do?

Create, validate, preview, and publish self-contained HTML artifacts. Artifact Designer is an agent skill from latitude-dev/latitude-llm. Create, validate, preview, and publish self-contained HTML artifacts.

When should I use Artifact Designer?

Artifact Designer fits situations like: diff walkthroughs; benchmark viewers; existing HTML files that need previewing.

How do I install Artifact Designer in Claude Code?

Run `npx skills add latitude-dev/latitude-llm --skill artifact-designer -a claude-code`. Or copy the skill folder (.agents/skills/artifact-designer in latitude-dev/latitude-llm) into .claude/skills/artifact-designer in your project. Claude Code loads it when a task matches its description.

How do I install Artifact Designer in Codex?

Run `npx skills add latitude-dev/latitude-llm --skill artifact-designer -a codex`. Or copy the skill folder (.agents/skills/artifact-designer in latitude-dev/latitude-llm) into .agents/skills/artifact-designer in your project. Codex loads it when a task matches its description.

Can I use Artifact 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 latitude-dev/latitude-llm --skill artifact-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/artifact-designer, .gemini/skills/artifact-designer, .github/skills/artifact-designer and .opencode/skills/artifact-designer in your project.

What does Artifact Designer need to run?

Going by SKILL.md and its folder, Artifact Designer needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and wrangler). Our summary lists: Node.js.

Does Artifact 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 Artifact 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Artifact Designer use?

Artifact Designer 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 Artifact Designer use?

About 1.1k tokens (SKILL.md is roughly 4.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 2.5k tokens, read only when the agent opens those files.

What are the alternatives to Artifact Designer?

Skills that share tags, products or a category with Artifact Designer: LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Paperclip Page (paperclipai/paperclip, 99k stars), Openkb Deck Neon (VectifyAI/OpenKB, 4.7k stars) and Webhome Homepage Builder (webhtv/webhtv, 1.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Artifact Designer?

latitude-dev (a GitHub organization) maintains it in latitude-dev/latitude-llm, which has 4,714 GitHub stars. The repository holds 28 skills in this directory. The repository was last updated on October 7, 2026.

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