Run any Skill in Manus with one click

$pwd:

artifact-publishing

Name: Artifact Publishing
Author: gptme

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

Run Skill in Manus

$ git log --oneline --stat

stars:14

forks:11

updated:February 28, 2026 at 13:48

SKILL.md

readonly

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":[]}

Artifact Publishing

Publish rich work products (HTML demos, visualizations, interactive tools) to make agent work visible and shareable.

When to Use

Created an interactive HTML demo or visualization
Built a tool that others should be able to try
Want to share work beyond just code commits
Need a public URL for a deliverable

Core Workflow

1. Choose Publishing Target

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

2. Structure the Artifact

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

3. Create Demo Index (Recommended)

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:

model: The specific model used (provider/model format)
harness: The agent framework (gptme, claude-code, cursor, codex, etc.)
orchestration: Any multi-agent coordination tool used (gptodo spawn, consortium, null if direct)

demos.html or demos.pug template reads from data and renders the list automatically.

4. Commit and Push

# 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

5. Verify Deployment

# Wait for GitHub Pages to deploy (usually < 2 minutes)
# Then verify the live URL
curl -I https://username.github.io/demos/my-demo/

Best Practices

Self-Contained Artifacts

Single HTML file with embedded CSS/JS when possible
No external dependencies that might break
Works offline after loading

Responsive Design

Mobile-friendly layouts
Touch support for interactive elements
Reasonable file sizes

Metadata & Attribution

Include generator info (model, harness) in UI or HTML comments
Date of creation
Link back to source repository if applicable

Accessibility

Semantic HTML
Keyboard navigation for interactive elements
Reasonable color contrast

Example: Complete Publishing Flow

# 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/"

Communication Pattern

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.

Integration with Workflow

During work: Create artifact as you build
On completion: Publish to hosting target
In response: Include live URL in PR/issue comments
For visibility: Link from blog posts, social media, or documentation

Alternatives

Method	Pros	Cons
GitHub Pages	Free, reliable, custom domain	Requires repo
CodePen/JSFiddle	Instant sharing	External dependency
Vercel/Netlify	Full features	More setup

Progressive Disclosure - Documentation patterns
Code Review Helper - For reviewing artifact code

related-skills.json

same repository

project-setup-interview.md

from "gptme/gptme-contrib"

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.

2026-05-2414

home-assistant.md

from "gptme/gptme-contrib"

Query a Home Assistant instance for presence, sensor data, calendar events, and cameras

2026-05-0214

rewrite-soul.md

from "gptme/gptme-contrib"

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.

2026-04-2114

agent-onboarding.md

from "gptme/gptme-contrib"

Comprehensive framework for effective gptme agent onboarding that builds user trust, communicates capabilities clearly, and establishes productive working relationships from the first interaction.

2026-02-2814

code-review-helper.md

from "gptme/gptme-contrib"

Systematic code review workflows with bundled utilities for analyzing code quality, detecting patterns, and providing structured feedback. Use this skill when reviewing pull requests or conducting code audits.

2026-02-2814

progressive-disclosure.md

from "gptme/gptme-contrib"

Template and guide for restructuring large documentation files into token-efficient directory structures. Reduces context bloat by 40-60% while maintaining accessibility.

2026-02-2814

package.json

"author": "gptme"

"repository": "gptme/gptme-contrib"

View GitHub Repository View Creator Repositories

$ install --global

$ download --local

Run Skill in Manus

$ useful --forSOC

Web DevelopersComputer and Mathematical Occupations15-1254L4

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":[]}

Artifact Publishing

Publish rich work products (HTML demos, visualizations, interactive tools) to make agent work visible and shareable.

When to Use

Created an interactive HTML demo or visualization
Built a tool that others should be able to try
Want to share work beyond just code commits
Need a public URL for a deliverable

Core Workflow

1. Choose Publishing Target

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

2. Structure the Artifact

3. Create Demo Index (Recommended)

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:

model: The specific model used (provider/model format)
harness: The agent framework (gptme, claude-code, cursor, codex, etc.)
orchestration: Any multi-agent coordination tool used (gptodo spawn, consortium, null if direct)

demos.html or demos.pug template reads from data and renders the list automatically.

4. Commit and Push

# 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

5. Verify Deployment

# Wait for GitHub Pages to deploy (usually < 2 minutes)
# Then verify the live URL
curl -I https://username.github.io/demos/my-demo/

Best Practices

Self-Contained Artifacts

Single HTML file with embedded CSS/JS when possible
No external dependencies that might break
Works offline after loading

Responsive Design

Mobile-friendly layouts
Touch support for interactive elements
Reasonable file sizes

Metadata & Attribution

Include generator info (model, harness) in UI or HTML comments
Date of creation
Link back to source repository if applicable

Accessibility

Semantic HTML
Keyboard navigation for interactive elements
Reasonable color contrast

Example: Complete Publishing Flow

# 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/"

Communication Pattern

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.

Integration with Workflow

During work: Create artifact as you build
On completion: Publish to hosting target
In response: Include live URL in PR/issue comments
For visibility: Link from blog posts, social media, or documentation

Alternatives

Method	Pros	Cons
GitHub Pages	Free, reliable, custom domain	Requires repo
CodePen/JSFiddle	Instant sharing	External dependency
Vercel/Netlify	Full features	More setup

Progressive Disclosure - Documentation patterns
Code Review Helper - For reviewing artifact code

artifact-publishing

Artifact Publishing

When to Use

Core Workflow

1. Choose Publishing Target

2. Structure the Artifact

3. Create Demo Index (Recommended)

4. Commit and Push

5. Verify Deployment

Best Practices

Self-Contained Artifacts

Responsive Design

Metadata & Attribution

Accessibility

Example: Complete Publishing Flow

Communication Pattern

Integration with Workflow

Alternatives

Related

Artifact Publishing

When to Use

Core Workflow

1. Choose Publishing Target

2. Structure the Artifact

3. Create Demo Index (Recommended)

4. Commit and Push

5. Verify Deployment

Best Practices

Self-Contained Artifacts

Responsive Design

Metadata & Attribution

Accessibility

Example: Complete Publishing Flow

Communication Pattern

Integration with Workflow

Alternatives

Related

artifact-publishing

Artifact Publishing

When to Use

Core Workflow

1. Choose Publishing Target

2. Structure the Artifact

3. Create Demo Index (Recommended)

4. Commit and Push

5. Verify Deployment

Best Practices

Self-Contained Artifacts

Responsive Design

Metadata & Attribution

Accessibility

Example: Complete Publishing Flow

Communication Pattern

Integration with Workflow

Alternatives

Related

More from this repository

More from this repository

Artifact Publishing

When to Use

Core Workflow

1. Choose Publishing Target

2. Structure the Artifact

3. Create Demo Index (Recommended)

4. Commit and Push

5. Verify Deployment

Best Practices

Self-Contained Artifacts

Responsive Design

Metadata & Attribution

Accessibility

Example: Complete Publishing Flow

Communication Pattern

Integration with Workflow

Alternatives

Related