| name | packager |
| description | Use when packaging, sharing, or publishing Copilot CLI agents, skills, templates, or SDD artifacts as shareable git repos. Triggers on tasks involving sharing, publishing, packaging, exporting, or distributing custom agents and skills. Also triggers when user says "package this", "share this", "make a repo for this", or "publish my agents". |
Packager Skill
This skill packages local Copilot CLI artifacts into shareable git repositories with professional README documentation and self-contained HTML documentation websites.
When to Use This Skill
- User wants to share custom agents, skills, or templates
- User says "package", "share", "publish", "export", or "distribute"
- User wants to create a GitHub repo from their local Copilot CLI setup
- User wants documentation generated for their agents/skills
Packaging Process
Step 1: Determine Scope
Ask the user what to package. Common patterns:
| User Says | What to Package |
|---|
| "Package the SDD system" | All 3 agents + 3 skills + templates + prompts + guide |
| "Package the spec-writer" | 1 agent + 1 skill + its templates and examples |
| "Package all my agents" | All .agent.md files + their matching skills |
| "Package this skill" | 1 SKILL.md + templates/ + examples/ |
| "Package everything" | Full ~/.copilot/ export (excluding session-state) |
Step 2: Inventory Files
Scan these directories for the requested artifacts:
~/.copilot/
├── agents/*.agent.md → Agent profiles
├── skills/*/SKILL.md → Skills
├── skills/*/templates/* → Skill templates
├── skills/*/examples/* → Skill examples
├── sdd/prompts/* → Reusable prompts
├── sdd/templates/* → Shared templates
├── sdd/SDD-GUIDE.md → System documentation
├── sdd/README.md → Artifact index
└── copilot-instructions.md → Global rules (extract relevant sections)
Step 3: Create Repo Structure
{repo-name}/
├── README.md ← Comprehensive documentation
├── LICENSE ← MIT license
├── .gitignore ← OS/editor ignores
├── docs/
│ └── index.html ← Self-contained documentation website
├── agents/ ← Packaged agent profiles
├── skills/ ← Packaged skills with templates
├── prompts/ ← Packaged prompts
├── templates/ ← Standalone templates
├── install.ps1 ← Windows installer
└── install.sh ← macOS/Linux installer
Step 4: Generate README.md
Required sections (in order):
- Title —
# {Package Name} with one-line description
- Overview — What this is, who it's for, what problem it solves (3-5 sentences)
- What's Included — Table: File | Description | Required?
- Prerequisites — GitHub Copilot subscription, VS Code/CLI, etc.
- Installation — Numbered steps with
code blocks
- Quick Start — 3 commands or less to see it work
- Usage — Per-component guide with prompt examples
- Architecture — ASCII diagram of how pieces connect
- Customization — How to modify for their needs
- Troubleshooting — Common issues
- License — MIT
Quality rules:
- Every command must be in a fenced code block with language tag
- Every step must show expected output
- Define all jargon (what IS a Copilot CLI agent? what IS a skill?)
- Write for someone who found this repo via Google
Step 5: Generate HTML Documentation Website
Create docs/index.html — a self-contained, beautiful documentation site.
Required HTML Structure:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Package Name} — Documentation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<style></style>
</head>
<body>
<nav></nav>
<main>
<section id="hero"></section>
<section id="what-is-this"></section>
<section id="whats-included"></section>
<section id="installation"></section>
<section id="usage"></section>
<section id="architecture"></section>
<section id="prompts"></section>
<section id="customization"></section>
<section id="troubleshooting"></section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-powershell.min.js"></script>
<script></script>
</body>
</html>
HTML Design Requirements:
Layout:
- Max-width 900px content area, centered
- Sticky sidebar nav on desktop (collapses to hamburger on mobile)
- Generous padding and margins
Typography:
- System font stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
- Code: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace
- Base size: 16px, line-height: 1.7
Colors (Light Theme):
- Background: #ffffff
- Surface: #f8fafc
- Text: #1e293b
- Text secondary: #64748b
- Accent: #3b82f6 (blue)
- Success: #16a34a (green)
- Border: #e2e8f0
Colors (Dark Theme):
- Background: #0f172a
- Surface: #1e293b
- Text: #f1f5f9
- Text secondary: #94a3b8
- Accent: #60a5fa
- Border: #334155
Code Blocks:
- Dark background (#1e293b or Prism Tomorrow theme)
- Copy button (top-right corner, appears on hover)
- Language label (top-left)
- Horizontal scroll for long lines
- Line numbers for blocks > 5 lines
Prompt Examples:
- Styled as callout cards with left border accent
- "Copy prompt" button
- Monospace text but with a distinct background (e.g., blue-tinted)
Step-by-Step Sections:
- Numbered circles (CSS counters)
- Each step has: title, description, code block, expected output
- Visual connector line between steps
File Tree:
- Styled with indentation, folder/file icons (📁/📄)
- Optional: collapsible directories
Step 6: Generate Install Scripts
install.ps1 (Windows PowerShell):
# Install {Package Name}
# Copies agents, skills, and templates to ~/.copilot/
$CopilotDir = "$env:USERPROFILE\.copilot"
# Create directories
@("agents", "skills", "sdd\prompts", "sdd\templates") | ForEach-Object {
New-Item -ItemType Directory -Path "$CopilotDir\$_" -Force | Out-Null
}
# Copy agents
Copy-Item -Path ".\agents\*" -Destination "$CopilotDir\agents\" -Recurse -Force
# Copy skills
Get-ChildItem -Path ".\skills" -Directory | ForEach-Object {
Copy-Item -Path $_.FullName -Destination "$CopilotDir\skills\$($_.Name)" -Recurse -Force
}
Write-Host "Installed successfully to $CopilotDir" -ForegroundColor Green
install.sh (macOS/Linux bash):
#!/bin/bash
COPILOT_DIR="$HOME/.copilot"
mkdir -p "$COPILOT_DIR"/{agents,skills,sdd/{prompts,templates}}
cp -r ./agents/* "$COPILOT_DIR/agents/" 2>/dev/null
cp -r ./skills/* "$COPILOT_DIR/skills/" 2>/dev/null
echo "Installed successfully to $COPILOT_DIR"
Step 7: Generate Prompts Guide
For every agent/skill in the package, generate prompts organized by difficulty:
| Level | Color | Count | Purpose |
|---|
| 🟢 Getting Started | Green | 3+ | First thing a new user should try |
| 🔵 Common Workflows | Blue | 5+ | Day-to-day patterns |
| 🟣 Advanced | Purple | 3+ | Power-user patterns, chaining |
Each prompt MUST include:
- A title explaining what it does
- The full copy-paste prompt text (with
@agent-name prefix)
- A 1-2 sentence description of context
- An "Expected Result" block showing what the user will see
These go in BOTH the README (as code blocks) and the HTML website (as interactive tutorial cards with filter tabs and copy buttons).
Step 8: Sanitize, Init Git & Push to GitHub
- Sanitize paths: Replace
~/ → ~/ or relative paths
- Remove secrets: Strip any API keys, tokens, or personal info
- Remove ephemeral files: No session-state, no .specify/specs/ content
- Git init +
.gitignore + LICENSE (MIT)
git add -A && git commit -m "Initial release: {description}"- Auto-push to GitHub using
gh CLI:
gh repo create {repo-name} --public --description "{desc}" --source=. --push
- Enable GitHub Pages:
gh api repos/{owner}/{repo}/pages -X POST -f source.branch=main -f source.path=/docs
If gh is not available, generate a push.ps1 script with manual instructions.
Output Quality Checklist
Before declaring the package complete, verify:
Handoff
After packaging, tell the user:
- Local path: Full path to the package directory
- GitHub URL:
https://github.com/{owner}/{repo-name}
- Docs site:
https://{owner}.github.io/{repo-name}/
- Preview command:
start docs/index.html (Windows) or open docs/index.html (macOS)
