メニュー
Workflow for publishing HTML artifacts (demos, visualizations, interactive content) to the web. Enables agents to share work products publicly via GitHub Pages or similar hosting.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/gptme/gptme-contrib --skill artifact-publishingコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | artifact-publishing |
| description | Workflow for publishing HTML artifacts (demos, visualizations, interactive content) to the web. Enables agents to share work products publicly via GitHub Pages or similar hosting. |
| license | MIT |
| compatibility | Requires git and GitHub Pages or similar hosting |
| metadata | {"author":"bob","version":"1.0.0","tags":["publishing","artifacts","html","demos","visualization","github-pages"],"requires_tools":["git","gh"],"requires_skills":[]} |
Publish rich work products (HTML demos, visualizations, interactive tools) to make agent work visible and shareable.
Option A: Personal GitHub Pages site (recommended for agents with their own identity)
# Clone or navigate to your .github.io repository
cd ~/agent-name.github.io
# Create demo in demos/ directory
mkdir -p demos/my-demo
Option B: Gist with HTML preview
# For single-file artifacts
gh gist create --public demo.html
# Use rawcdn.githack.com or similar for preview
Place artifacts in a predictable location: demos/ ├── my-demo/ │ └── index.html # Main entry point ├── visualization/ │ ├── index.html │ └── data.json # Supporting data └── index.html # Optional: demo listing page
Use a data-driven approach for automatic demo listing:
_data/demos.yml (if using Jekyll):
- url: /demos/game-of-life/
title: "Conway's Game of Life"
description: "Interactive cellular automaton"
date: 2026-01-29
tags: [simulation, canvas]
generator:
# Technical specs for reproducibility and attribution
model: "anthropic/claude-sonnet-4-5" # Model identifier
harness: "gptme" # Agent harness/framework
orchestration: null # e.g., "gptodo spawn", "consortium"
- url: /demos/particle-system/
title: "Particle Physics"
description: "Interactive particle visualizer"
date: 2026-01-29
tags: [physics, interactive]
generator:
model: "moonshotai/kimi-k2.5"
harness: "gptme" # Options: gptme, claude-code, cursor, codex
orchestration: "gptodo spawn" # If sub-agent was spawned
The generator field captures technical provenance:
demos.html or demos.pug template reads from data and renders the list automatically.
# Stage artifact files
git add demos/my-demo/
# Commit with descriptive message
git commit -m "feat(demos): add interactive game of life"
# Push to trigger GitHub Pages deployment
git push origin main
# Wait for GitHub Pages to deploy (usually < 2 minutes)
# Then verify the live URL
curl -I https://username.github.io/demos/my-demo/
# 1. Create the artifact directory
mkdir -p ~/myagent.github.io/demos/visualization/
# 2. Save the HTML artifact
cat > ~/myagent.github.io/demos/visualization/index.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Data Visualization</title>
<!-- Generated by: gptme + claude-sonnet-4-5 -->
</head>
<body>
<!-- Interactive content -->
</body>
</html>
EOF
# 3. Update demo index with technical generator info
cat >> ~/myagent.github.io/_data/demos.yml << EOF
- url: /demos/visualization/
title: "Data Visualization"
description: "Interactive data explorer"
date: $(date +%Y-%m-%d)
generator:
model: "anthropic/claude-sonnet-4-5"
harness: "gptme"
orchestration: null
EOF
# 4. Commit and push
cd ~/myagent.github.io
git add demos/visualization/ _data/demos.yml
git commit -m "feat(demos): add data visualization"
git push
# 5. Report completion
echo "✅ Published at: https://myagent.github.io/demos/visualization/"
After publishing, close the loop with stakeholders:
## ✅ Artifact Published
**URL**: https://agent.github.io/demos/my-demo/
**Type**: Interactive visualization
**Generator**: gptme + claude-sonnet-4-5
**Features**: [Brief feature list]
The demo is now live and publicly accessible.
| Method | Pros | Cons |
|---|---|---|
| GitHub Pages | Free, reliable, custom domain | Requires repo |
| CodePen/JSFiddle | Instant sharing | External dependency |
| Vercel/Netlify | Full features | More setup |