New to Claude Skills? Learn how to install them →

Cgithub on GitHub

Create Canvas Extension

OfficialFree

Easily scaffold and register canvas extensions for awesome-copilot.

by github37.7k stars on github/awesome-copilot
1 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Create Canvas Extension does

The Create Canvas Extension skill is designed specifically for developers working with the awesome-copilot repository. It facilitates the creation and registration of canvas extensions, which are reusable components that enhance the functionality of plugins. This skill streamlines the process of scaffolding new extensions, generating necessary files such as plugin.json, and managing extension metadata, making it easier for developers to contribute to the repository.

When using this skill, developers will be prompted to provide essential information for the extension, including its ID, metadata such as description and version, and details about the canvas entry point. The skill ensures that all required files are created in the correct structure, including directories for the extension source and the associated plugin manifest. This structured approach helps maintain organization within the repository and ensures that extensions are properly registered and documented.

The skill is particularly useful for those who are developing new canvas extensions or migrating existing ones within the awesome-copilot ecosystem. By automating the creation of necessary files and validating the structure, it reduces the risk of errors and streamlines the development workflow. Developers can focus on implementing functionality rather than worrying about the underlying setup, making it an essential tool for anyone looking to enhance their plugins with reusable canvas components.

Overall, the Create Canvas Extension skill is a valuable resource for developers aiming to contribute to the awesome-copilot repository, providing a clear and efficient way to scaffold and manage canvas extensions.

When to use it

Use this skill when you need to create or register a new canvas extension for the awesome-copilot repository.

When not to use it

Avoid this skill if you are not working within the awesome-copilot repository or if you need to manage extensions outside of this specific context.

What you can build with it

Creating a New Canvas Extension

Use this skill to easily scaffold a new canvas extension, ensuring all necessary files are generated correctly.

Registering an Extension with a Parent Plugin

When you need to associate a new extension with an existing plugin, this skill simplifies the registration process.

Migrating Existing Extensions

This skill helps streamline the migration of existing extensions to the new structure required by awesome-copilot.

How to install Create Canvas Extension

View source

1. Install with the skills CLI

npx skills add github/awesome-copilot/create-canvas-extension --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by github

Create a canvas extension

Use this skill only for the github/awesome-copilot repository. Canvas extensions are reusable source components. They do not have a plugin.json under extensions/.

Required decisions

Before creating files, ask for each missing value:

  1. Extension ID: lowercase kebab-case, matching the source folder and plugin name.
  2. Display metadata:
    • description
    • version (default 1.0.0)
    • author name and optional URL
    • keywords (lowercase, hyphenated, maximum 10)
    • repository and license (default to the repository URL and MIT when appropriate)
  3. Canvas entrypoint: confirm whether the extension already has extension.mjs. If not, create a minimal entrypoint only when the user provides enough implementation details; otherwise create the directory and leave an explicit TODO.
  4. Preview image: obtain an existing assets/preview.png path or ask the user to add it. Do not invent a binary image or silently use a misleading placeholder.
  5. Plugin registration:
    • For a standalone installable canvas plugin, create plugins/<extension-id>.
    • For an extension that belongs to an existing plugin, ask for the parent plugin ID and add ./extensions/<extension-id> to that plugin's extensions.com.github.awesome-copilot.extensions.
    • If the extension should be shipped by multiple plugins, collect all plugin IDs and add the same extension ID to each mapping file.

Files to create

For a new extension plugin, create this structure:

extensions/<extension-id>/
├── extension.mjs
└── assets/
    └── preview.png

plugins/<extension-id>/
├── plugin.json
└── README.md

The extension source may contain additional files such as package.json, canvas assets, or supporting modules. Keep all reusable implementation files under extensions/<extension-id>/.

Create plugins/<extension-id>/plugin.json with this shape:

{
  "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
  "name": "<extension-id>",
  "description": "<description>",
  "version": "1.0.0",
  "author": {
    "name": "<author>"
  },
  "repository": "https://github.com/github/awesome-copilot",
  "license": "MIT",
  "keywords": [
    "<keyword>"
  ],
  "extensions": {
    "com.github.copilot": {
      "logo": "assets/preview.png"
    },
    "com.github.awesome-copilot": {
      "extensions": [
        "./extensions/<extension-id>"
      ]
    }
  }
}

Keep Agent Plugins fields at the manifest top level. Repository composition belongs only under extensions.com.github.awesome-copilot; do not put agents, commands, hooks, mcpServers, or skills at the top level or directly under extensions. Do not add x-awesome-copilot, standalone, or other repository-specific top-level fields.

For an existing parent plugin, create or update:

plugins/<parent-plugin>/plugin.json (`extensions.com.github.awesome-copilot.extensions`)

Its extensions property must contain sorted repository-relative paths:

{
  "extensions": [
    "./extensions/<extension-id>"
  ]
}

Do not copy the extension source into the parent plugin. Materialization resolves the IDs from the root extensions/ directory, so the same source can be bundled by multiple plugins.

Workflow

  1. Inspect the repository before editing:

    • confirm extensions/<extension-id> and plugins/<extension-id> do not already conflict
    • inspect the target parent plugin, if any
    • check whether a preview image and entrypoint already exist
  2. Ask only the missing required questions from the decisions above.

  3. Create the source and plugin directories with the required files.

  4. If creating a new entrypoint, keep it minimal and clearly mark implementation TODOs rather than fabricating behavior.

  5. Add or update extensions.com.github.awesome-copilot.extensions for every parent plugin that should ship the extension. Keep paths alphabetically sorted and unique.

  6. Ensure there is no extensions/<extension-id>/.github/plugin/plugin.json.

  7. Run:

    npm run plugin:validate
    npm run build
    npm run website:data
    
  8. Report the created paths, the plugins that ship the extension, and any missing user-provided assets or TODOs.

Existing extension migration

When migrating an existing extension:

  1. Move its existing manifest to plugins/<extension-id>/plugin.json.
  2. Update the manifest to the namespace-based extensions.com.github.copilot.logo shape.
  3. Remove the old manifest from extensions/<extension-id>.
  4. Register the extension in any parent plugin's extensions.com.github.awesome-copilot.extensions.
  5. Run the validation and build commands above.

Frequently asked questions about Create Canvas Extension

Similar skills