
Create Canvas Extension
OfficialFreeEasily scaffold and register canvas extensions for awesome-copilot.
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 source1. Install with the skills CLI
npx skills add github/awesome-copilot/create-canvas-extension --agent claude-code2. 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 githubCreate 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:
- Extension ID: lowercase kebab-case, matching the source folder and plugin name.
- 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
MITwhen appropriate)
- 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. - Preview image: obtain an existing
assets/preview.pngpath or ask the user to add it. Do not invent a binary image or silently use a misleading placeholder. - 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'sextensions.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.
- For a standalone installable canvas plugin, create
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
-
Inspect the repository before editing:
- confirm
extensions/<extension-id>andplugins/<extension-id>do not already conflict - inspect the target parent plugin, if any
- check whether a preview image and entrypoint already exist
- confirm
-
Ask only the missing required questions from the decisions above.
-
Create the source and plugin directories with the required files.
-
If creating a new entrypoint, keep it minimal and clearly mark implementation TODOs rather than fabricating behavior.
-
Add or update
extensions.com.github.awesome-copilot.extensionsfor every parent plugin that should ship the extension. Keep paths alphabetically sorted and unique. -
Ensure there is no
extensions/<extension-id>/.github/plugin/plugin.json. -
Run:
npm run plugin:validate npm run build npm run website:data -
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:
- Move its existing manifest to
plugins/<extension-id>/plugin.json. - Update the manifest to the namespace-based
extensions.com.github.copilot.logoshape. - Remove the old manifest from
extensions/<extension-id>. - Register the extension in any parent plugin's
extensions.com.github.awesome-copilot.extensions. - Run the validation and build commands above.
Frequently asked questions about Create Canvas Extension
Similar skills
Rhino 3D Scripting
Streamline your Rhinoceros 3D scripting tasks.
MVVM Toolkit
Streamline ViewModel development with source generators.
FreeCAD Scripts
Generate Python scripts for FreeCAD automation and modeling.
Azure Architecture Builder
Design and deploy Azure infrastructure using natural language.
Command Development
Streamline your command creation for Claude Code.
Create Cowork Plugin
Easily build and package plugins through guided sessions.
