Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
zjy365 avatar

Sealos Canvas

zjy365/sealos-skills

  • 11 installs
  • 1 repo stars
  • Updated June 18, 2026
  • zjy365/sealos-skills

Runs a local read-only HTML topology UI on localhost that visualizes a project's Sealos-deployed Kubernetes resources.

About

Reads .sealos/state.json and live Kubernetes resources, starts a temporary localhost server, and returns a view-only topology canvas URL. A developer uses it to inspect or visualize resources already deployed by Sealos Skills.

  • View-only: uses read commands like kubectl get, never deploys or mutates
  • Hides Secret data and full ConfigMap contents in the rendered canvas

Sealos Canvas by the numbers

  • 11 all-time installs (skills.sh)
  • Ranked #841 of 1,039 Cloud & Infrastructure skills by installs in the Skillselion catalog
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/zjy365/sealos-skills --skill sealos-canvas

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs11
repo stars★ 1
Last updatedJune 18, 2026
Repositoryzjy365/sealos-skills ↗

What it does

Runs a local read-only HTML topology UI on localhost that visualizes a project's Sealos-deployed Kubernetes resources.

Files

SKILL.mdMarkdownGitHub ↗

Sealos Canvas

Overview

Render the current repository's deployed Sealos resources as a locally hosted HTML canvas. This skill is view-only: it reads .sealos/state.json and Kubernetes resources, starts a temporary 127.0.0.1 UI server, and returns the local URL to the user.

Hard Rules

1. Do not deploy, update, restart, patch, delete, or apply resources. 2. Only use read commands such as kubectl get and kubectl config view. 3. Use the Sealos kubeconfig at ~/.sealos/kubeconfig. 4. Do not display Secret data or full ConfigMap contents. 5. If the project has no .sealos/state.json with last_deploy, stop and tell the user to deploy first with /sealos-deploy. 6. If kubeconfig or live resource access is unavailable, report the script message and stop.

Workflow

1. Resolve the project

Use the current working directory unless the user provides a local path:

WORK_DIR="$(pwd)"

Confirm this is the intended repository before generating output.

2. Start the local canvas UI

Run:

node "<SKILL_DIR>/scripts/generate-canvas.mjs" --work-dir "$WORK_DIR"

Keep this process running while the user is viewing the canvas. The script writes JSON to stdout after the local server starts.

If ok is false, show the message to the user and end the flow. Do not run fallback discovery, do not deploy, and do not create any other artifact.

If ok is true, use local_url as the primary output.

3. Open the local URL

Open the returned URL with the browser:

http://127.0.0.1:<port>/index.html

Then summarize:

  • local UI URL
  • app URL
  • node count
  • edge count

Stop the server process when the user is done viewing the page or when the current task ends.

Output Contract

Success:

{
  "ok": true,
  "local_url": "http://127.0.0.1:63220/index.html",
  "html_path": "/abs/path/.sealos/canvas/index.html",
  "node_count": 5,
  "edge_count": 4,
  "app_url": "https://example.sealos.run"
}

Stop condition:

{
  "ok": false,
  "reason": "not_deployed",
  "message": "This project has not been deployed by Sealos Skills yet. Run /sealos-deploy first, then run /sealos-canvas again."
}

Visual Target

The locally hosted UI should feel like a topology canvas, not a table:

1. Top bar with app name, namespace, deployed app URL, generated time, and local UI status. 2. Dark dotted-grid canvas with deterministic resource-card layout. 3. Resource cards for app, ingress, services, pods, config, secrets, and volumes. 4. Dashed or solid SVG connector lines between related resources. 5. PVC/volume references attached as strips on the related card when possible. 6. Detail panel for the selected resource. 7. Events panel with recent related Kubernetes events. 8. Status colors for ready, sleeping, warning, and failed states. 9. Lightweight pan, zoom, fit, and reset controls.

Theme extraction is best effort. Reuse the user's repo accent color, font, and radius when easy to detect, but preserve operational readability.

Script

scripts/generate-canvas.mjs is the deterministic entrypoint. It:

1. Reads .sealos/state.json. 2. Verifies ~/.sealos/kubeconfig and kubectl. 3. Reads live namespace resources with kubectl get. 4. Builds a sanitized canvasModel with app, nodes, edges, events, and theme. 5. Renders assets/canvas-template.html into an internal .sealos/canvas/index.html cache. 6. Starts a temporary local HTTP server and prints local_url.

Use --no-serve only for tests or CI checks that should generate HTML without keeping a server process alive.

Related skills

microsoftAzure AiIntegrates Azure AI Content Safety, Document Intelligence, Speech, and Search services into Java-based agents and applications.495k1.4kmicrosoftAzure PrepareGenerate the exact Azure infrastructure files, Dockerfiles, and azure.yaml configuration needed before deploying any new or modernized application.494k1.4kmicrosoftAzure StorageConnect agents and applications to Azure Blob Storage, File Shares, Queues, Tables, and Data Lake without leaving the coding environment.494k1.4kmicrosoftAppinsights InstrumentationAutomatically instrument web applications running on Azure App Service with Application Insights for observability without manual configuration.493k1.4kmicrosoftAzure Resource LookupInstantly list, query, and discover any Azure resources across subscriptions without leaving the agent chat.493k1.4kmicrosoftAzure AigatewayConfigure Azure API Management as a secure, governed gateway for routing traffic to LLMs, MCP servers, and agent tools.493k1.4k
Cloud & Infrastructuremonitoringinfra
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.