skills.rest
podman-desktop
podman-desktopOFFICIAL
Explore all skills by this author →
GitHub

new-extension

Scaffold a standalone Podman Desktop extension with build config, Containerfile, and Svelte webview.

8.0k|560|Updated Mar 3, 2022
Search Tags:#extension#Svelte#webview#containerfile#podman desktop#VITE#Scaffold
One-click install
npx skills add https://github.com/podman-desktop/podman-desktop --skill new-extension
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-extension
Source: https://github.com/podman-desktop/podman-desktop/tree/main/.agents/skills/new-extension
Command: npx skills add https://github.com/podman-desktop/podman-desktop --skill new-extension

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating a Podman Desktop extension from scratch requires assembling many boilerplate files—package manifests, TypeScript configs, Vite builds, a Containerfile, and webview plumbing—and small mistakes (wrong engineId, inline HTML webviews, Vite version mismatches) cause confusing failures. This Skill generates the complete, correct project structure and verifies it builds and loads locally.

Core Features & Use Cases

  • Full project scaffolding: Generates minimal single-package or multi-package (backend + Svelte frontend) layouts with all required config files.
  • Webview wiring done right: Implements the backend-to-frontend asset loading with asWebviewUri rewriting and postMessage messaging patterns.
  • Build, test, and publish guidance: Covers local loading via Development mode, OCI image packaging with a Containerfile, and publishing to a registry or the official catalog.
  • Use Case: Ask for a new extension that shows container status in a Svelte panel, and receive a complete multi-package repository that builds with npm and loads into Podman Desktop as an active extension.

Quick Start

Create a new Podman Desktop extension called 'container-dashboard' with a Svelte webview that lists running containers.

Frequently Asked Questions about new-extension

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new Podman Desktop extension?▼

Provide an extension name, display name, description, and feature scope, and the Skill generates the full repository with package.json manifests, Vite and TypeScript configs, and a Containerfile. Build with npm install and npm run build, then load it via Settings > Extensions in Development mode.

How do I add a Svelte webview to a Podman Desktop extension?▼

Use the multi-package layout where a Vite-built Svelte frontend outputs to the backend's media/ folder. The backend creates a webview panel, reads media/index.html, and rewrites asset paths with panel.webview.asWebviewUri so the sandboxed webview can load them.

Why does createContainer fail with 'no engine matching this container'?▼

The engineId is not the connection name from getContainerConnections(). Call containerEngine.listInfos with the provider connection and use the engineId from the returned info objects before calling createContainer or startContainer.

Why does startContainer return HTTP 304 after createContainer?▼

ContainerCreateOptions.start defaults to true, so createContainer already starts the container and a second startContainer call fails. Either skip startContainer or pass start: false in the create options.

Which Vite version works with the Svelte plugin for extensions?▼

@sveltejs/vite-plugin-svelte 6.x requires Vite 6 or 7, so do not use Vite 8 or later. The generated frontend package.json pins compatible versions of the plugin and Svelte 5.

How do I publish a Podman Desktop extension?▼

Build the project, then run podman build and podman push to publish the OCI image to a registry such as quay.io. To appear in the official catalog, open a PR on podman-desktop-catalog adding the extension to extensions.json.

Related Skills

Explore More Software Engineering Skills→
s-hiraokus-hiraoku
21

vscode-webview-expert

Implement secure VS Code WebView panels with CSP and message protocols.

Community
Intermediate
agentydragonagentydragon
4

test_props

Automate end-to-end props testing workflows with Podman and host networking.

Community
Advanced
podman-desktoppodman-desktop
477

backend-api

Extend the Bootc extension RPC contract for Podman Desktop backend workflows.

Official
Intermediate
lawve-ailawve-ai
630

vscode-extension-builder-lawvable

Create and deploy VS Code extensions from TypeScript templates with esbuild and Vite.

Official
Advanced