Skip to content

feat: add second skill package to expand skills library #320

@WilliamBerryiii

Description

@WilliamBerryiii

Summary

The .github/skills/ directory currently contains only one skill package (video-to-gif). Adding a second skill would:

  1. Demonstrate the skills pattern is reusable
  2. Provide additional developer utilities
  3. Expand the value proposition of HVE Core

Current State

.github/skills/
└── video-to-gif/
    └── SKILL.md

Proposed Solution

Add a second skill package. Suggested candidates (choose one):

Option A: image-optimize

  • Compress images for web/docs
  • Convert between formats (PNG, JPEG, WebP)
  • Useful for documentation workflows

Option B: code-screenshot

  • Generate code snippet screenshots
  • Syntax highlighting support
  • Useful for presentations and docs

Option C: mermaid-render

  • Render Mermaid diagrams to PNG/SVG
  • Batch processing support
  • Useful for architecture docs

Recommended: image-optimize

Most broadly useful and aligns with documentation workflows already in the codebase.

Example structure

.github/skills/
├── video-to-gif/
│   └── SKILL.md
└── image-optimize/
    └── SKILL.md

SKILL.md content

---
description: Image optimization skill for web and documentation assets
---

# Image Optimize Skill

## Capabilities
- Compress PNG/JPEG images
- Convert to WebP format
- Batch process directories

## Usage
[Instructions for invoking the skill]

## Tools Required
- ImageMagick or sharp (Node.js)

Acceptance Criteria

  • New skill directory created at .github/skills/<skill-name>/
  • SKILL.md follows conventions from video-to-gif
  • Skill provides practical value for documentation or development workflows
  • Any required scripts are included and documented

References

How to Build This

This is a structured documentation task using the task-implementor workflow. Although SKILL.md
files share some structural similarities with prompt artifacts, they are developer-facing
documentation, so the standard task-implementor workflow applies.

Workflow: /task-research/task-plan/task-implement/task-review

Tip

Between each phase, type /clear or start a new chat to reset context.

Phase 1: Research

Source Material

  • This issue body
  • #file:.github/skills/video-to-gif/SKILL.md (exemplar skill package)
  • #file:docs/contributing/skills.md (skills authoring guide)
  • #file:.github/instructions/prompt-builder.instructions.md (artifact quality criteria)
  • #file:.github/instructions/writing-style.instructions.md (voice and tone)

Steps

  1. Type /clear to start a fresh context.
  2. Attach or open the files listed above.
  3. Copy and run this prompt:
/task-research topic="designing a second skill package for the HVE Core skills library"

Research what a second skill package should contain and how it should be structured.
Investigate:

1. The video-to-gif SKILL.md structure in detail (frontmatter, sections, script references,
   platform-specific content, parameter tables, troubleshooting)
2. The skills authoring guide (docs/contributing/skills.md) for required sections and conventions
3. The three proposed options (image-optimize, code-screenshot, mermaid-render) and which
   provides the most practical value for documentation workflows
4. What prerequisite tools each option requires and their cross-platform availability
5. How skills are discovered and invoked by users (the description frontmatter field)
6. Whether the skill needs accompanying scripts, examples, and assets directories
7. The prompt-builder quality criteria and how they apply to SKILL.md files

Output: Research document at .copilot-tracking/research/{{YYYY-MM-DD}}-second-skill-research.md

Phase 2: Plan

Source Material

  • Research document from Phase 1

Steps

  1. Type /clear to start a fresh context.
  2. Open the research document from Phase 1.
  3. Copy and run this prompt:
/task-plan

Create an implementation plan for the second skill package. The plan should specify
the selected skill topic, the SKILL.md structure (matching video-to-gif conventions),
any required scripts or examples, and the directory layout under .github/skills/.

Output: Plan at .copilot-tracking/plans/ and details at .copilot-tracking/details/

Phase 3: Implement

Source Material

  • Plan from Phase 2

Steps

  1. Type /clear to start a fresh context.
  2. Open the plan document from Phase 2.
  3. Copy and run this prompt:
/task-implement

Implement the second skill package following the plan. Create the SKILL.md file
with proper frontmatter, all required sections, and any supporting scripts or
examples. Follow the conventions established by the video-to-gif skill.

Output: New skill directory and files, changes log at .copilot-tracking/changes/

Phase 4: Review

Source Material

  • Plan from Phase 2
  • Changes log from Phase 3

Steps

  1. Type /clear to start a fresh context.
  2. Open the plan and changes log.
  3. Copy and run this prompt:
/task-review

Review the second skill package implementation. Run these validation commands:
- npm run lint:md (markdown linting)
- npm run lint:frontmatter (frontmatter validation)
Verify the SKILL.md follows the video-to-gif pattern, has proper frontmatter,
covers all required sections from docs/contributing/skills.md, and provides
practical value for documentation or development workflows.

Output: Review log at .copilot-tracking/reviews/

After Review

  • Pass: All criteria met. Create a PR referencing this issue.
  • Iterate: Review found issues. Run /clear, return to Phase 3 with the review feedback.
  • Escalate: Fundamental design issue discovered. Run /clear, return to Phase 1 to research the gap.

Authoring Standards

  • SKILL.md frontmatter includes name: and description: fields
  • Description field ends with "- Brought to you by microsoft/hve-core"
  • Use "you" for instructional content
  • Guidance style: "Consider", "Prefer", "Use" over command style
  • No em dashes, no bolded-prefix list items
  • Platform-specific prerequisites documented per OS

Success Criteria

  • New skill directory exists at .github/skills/<skill-name>/
  • SKILL.md follows the video-to-gif structure and conventions
  • Frontmatter includes required name: and description: fields
  • Skill provides practical value for documentation or development workflows
  • npm run lint:md passes
  • npm run lint:frontmatter passes

Metadata

Metadata

Assignees

Labels

featureNew feature triggering minor version bumpmaintainers-onlyRestricted to maintainers — AI artifact expertise required

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions