メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Add foundational CS knowledge (7 classic books) and session-memory search to Claude Code or Claude Desktop via MCP. Lets Claude answer "how does X work?" by querying indexed books inline, and "what did we discuss about Y?" by searching past sessions. Use this skill when setting up or troubleshooting the rag-mcp-server.
Query a Home Assistant instance for presence, sensor data, calendar events, and cameras
Analyze your gptme conversation history for insights like token usage, costs, model preferences, and usage patterns — inspired by Spotify Wrapped.
Guide to creating gptme plugins with tools, hooks, and commands — covers ToolSpec, lifecycle hooks, custom /commands, testing, and pyproject.toml setup.
Conduct a structured interview about a new project and generate a ready-to-use CLAUDE.md/AGENTS.md starter so the agent knows your conventions from session one.
Use when creating or revising an agent's SOUL.md, splitting runtime voice out of broader identity docs, or tightening a vague persona file into a short, opinionated, voice-only artifact without changing the agent's core identity.
| 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 |