Copilot Agent Prompt Button¶

Files Changed: - _includes/content/intro.html — action button group - _data/prompts.yml — prompt registry

Table of Contents¶

Overview
Architecture
Files Reference
Configuration
Prompt Registry — _data/prompts.yml
Adding a New Prompt
Issue Body Structure
Customization
Troubleshooting
FAQ

Overview¶

The Copilot Agent button appears in the intro section of every page and lets users instantly open a pre-filled GitHub issue assigned to @copilot. A dropdown lists available prompt templates (e.g., Debugging, Documentation, Article Review). When a template is selected, the issue body is automatically populated with:

The full prompt instruction text
A Page Context table (title, URL, file path, branch, layout, tags, etc.)
An Environment table (repository, site URL, Jekyll environment, theme, baseurl)

This gives a Copilot agent immediately actionable context without the user having to fill anything in manually.

Flow:

User clicks "Copilot Agent" dropdown
  → selects a prompt template
    → browser opens GitHub new-issue URL
      → issue pre-filled with prompt + page/environment metadata
        → @copilot is assigned automatically

Architecture¶

_data/
└── prompts.yml              ← source of truth for all prompt templates

_includes/
└── content/
    └── intro.html           ← renders the action button group
        ├── Share dropdown
        ├── Copilot Agent dropdown  ← iterates site.data.prompts
        └── Edit on GitHub button

The button group is injected into every page that includes content/intro.html, which is called from _layouts/default.html:

{% include content/intro.html %}

Files Reference¶

`_includes/content/intro.html`¶

Liquid variables set before the button group:

Variable	Source	Description
`repo_branch`	`site.branch \\| default: "main"`	Current repo branch
`file_path`	`page_dir + "/" + page.path`	Relative file path from repo root
`repo_owner`	`site.repository` split on `/`	GitHub username/org

The dropdown iterates site.data.prompts and for each entry builds two Liquid {% capture %} blocks:

Capture	Content
`issue_title`	`[prompt.label] page.title`
`issue_body`	`prompt.body` + Page Context table + Environment table

Both are url_encoded and passed as query parameters to https://github.com/{repository}/issues/new.

`_data/prompts.yml`¶

A YAML array. Each entry:

- id: string            # unique slug, matches .github/prompts/{id}.prompt.md
  label: string         # display label in dropdown
  icon: string          # Bootstrap Icons class (e.g. "bi-bug")
  description: string   # short subtitle shown under the label
  body: |               # multi-line prompt instruction text (YAML block scalar)
    ...

Configuration¶

No changes to _config.yml are required. The feature depends on:

Config Key	Required	Used For
`site.repository`	Yes	Constructs the GitHub issue URL (`owner/repo`)
`site.url`	Yes	Included in issue body page context
`site.branch`	Optional	Defaults to `"main"` if absent
`site.baseurl`	Optional	Included in environment table
`site.theme` / `site.remote_theme`	Optional	Included in environment table
`site.author.name`	Optional	Fallback for `page.author`

Ensure repository is set in _config.yml:

repository: "bamr87/zer0-mistakes"

Prompt Registry¶

_data/prompts.yml ships with 9 built-in templates:

ID	Label	Icon	Description
`article-review`	Article Review	`bi-file-text`	Review article structure, metadata, and SEO
`code-implementation`	Code Implementation	`bi-code-slash`	Implement a feature with production-ready code
`code-refactoring`	Code Refactoring	`bi-arrow-repeat`	Refactor code for quality and readability
`debugging`	Debugging	`bi-bug`	Diagnose and fix issues
`documentation`	Documentation	`bi-journal-text`	Generate or improve technical documentation
`requirements-analysis`	Requirements Analysis	`bi-list-check`	Convert ideas into structured requirements
`system-design`	System Design	`bi-diagram-3`	Design a scalable system architecture
`test-generation`	Test Generation	`bi-check2-square`	Generate comprehensive tests
`prompt-engineering`	Prompt Engineering	`bi-lightning`	Craft an effective AI prompt

Adding a New Prompt¶

Add an entry to _data/prompts.yml:

- id: security-review
  label: "Security Review"
  icon: "bi-shield-lock"
  description: "Audit code for security vulnerabilities"
  body: |
    Act as a Security Engineer and OWASP specialist.

    Audit the code or configuration in this file for security vulnerabilities.

    **Focus Areas:**
    - Input validation and sanitization
    - Authentication and authorization flaws
    - Secrets or credentials in code
    - Dependency vulnerabilities
    - OWASP Top 10 compliance

    **Deliverables:**
    - List of findings with severity (Critical / High / Medium / Low)
    - Remediation steps for each finding
    - Recommended security improvements

Optionally create a matching prompt file at .github/prompts/security-review.prompt.md for use directly in VS Code Copilot.
The new item appears automatically in the dropdown on next Jekyll build — no changes to any template files required.

Issue Body Structure¶

When a user selects a prompt, the generated GitHub issue body follows this structure:

{prompt.body}
---

## 📄 Page Context

| Field | Value |
|---|---|
| Title    | {page.title} |
| URL      | {site.url}{page.url} |
| File     | `{file_path}` |
| Branch   | `{repo_branch}` |
| Layout   | `{page.layout}` |
| Collection | `{page.collection}` |
| Author   | {page.author} |
| Date     | {page.date} |
| Last Modified | {page.lastmod} |
| Tags     | {page.tags} |
| Categories | {page.categories} |

## 🔧 Environment

| Field | Value |
|---|---|
| Repository | `{site.repository}` |
| Site URL   | {site.url} |
| Jekyll Env | `{jekyll.environment}` |
| Theme      | `{site.theme or site.remote_theme}` |
| Base URL   | `{site.baseurl}` |

The issue is also pre-configured with: - Assignee: copilot - Label: ai-agent - Title: [{Prompt Label}] {Page Title}

Customization¶

Change the issue label¶

Edit the labels= parameter in intro.html:

href="https://github.com/{{ site.repository }}/issues/new?assignees=copilot&labels=ai-agent&title=..."

Replace ai-agent with any label name that exists in your repository. Multiple labels are comma-separated and URL-encoded.

Add more context fields to the issue body¶

In intro.html, extend the Page Context table inside the {% capture issue_body %} block:

| **Permalink** | `{{ page.permalink }}` |
| **Excerpt** | {{ page.excerpt | strip_html | truncate: 100 }} |

Show/hide the description subtitle¶

The description field under each dropdown label is optional. Remove the {% if prompt.description %} block in intro.html to hide it, or simply omit description from entries in prompts.yml.

Restrict the button to specific layouts or collections¶

Wrap the dropdown <div> in a Liquid condition:

{% if page.collection == "posts" or page.layout == "journals" %}
  <!-- Copilot Agent Prompt Dropdown -->
  ...
{% endif %}

Troubleshooting¶

Symptom	Likely Cause	Fix
Dropdown is empty	`_data/prompts.yml` missing or invalid YAML	Validate YAML with `ruby -ryaml -e "YAML.load_file('_data/prompts.yml')"`
Issue URL is too long / truncated	GitHub's URL limit (~8000 chars) exceeded	Shorten `body` fields in `prompts.yml`
`[object Object]` in issue title	`page.title` is not a string	Ensure page has a `title:` string in front matter
Labels not applied	Label `ai-agent` doesn't exist in the repo	Create the label in GitHub → Issues → Labels
`repo_owner` is blank	`site.repository` not set in `_config.yml`	Add `repository: "owner/repo"` to `_config.yml`
Branch shows `master`	`site.branch` not set	Add `branch: "main"` to `_config.yml` or rely on the `default: "main"` fallback

FAQ¶

Q: Does this send any data to GitHub automatically? No. The button opens a browser URL. The user sees the pre-filled issue form and must click "Submit new issue" themselves.

Q: Can I assign the issue to someone other than @copilot? Yes. Change assignees=copilot in the href to any GitHub username, or leave it blank to let the user assign manually.

Q: Will this work on GitHub Pages? Yes. All rendering happens in Jekyll at build time via Liquid. There is no JavaScript involved in building the URL.

Q: What if a prompt body is very long? GitHub's body query parameter has a practical limit (~8000 characters). Keep individual body values in prompts.yml under ~5000 characters to leave room for the context tables.

Q: Can I use this in the it-journey site? Yes. Copy _data/prompts.yml to the target repo and merge the Copilot Agent dropdown block from _includes/content/intro.html. Since it-journey uses zer0-mistakes as a remote theme, creating a local override at _includes/content/intro.html (as demonstrated in PR #198) is the recommended approach.