MCPInstall

sealos-canvas

Run a local read-only HTML topology UI for a project already deployed by Sealos Skills and return a localhost URL. Use when the user asks to view, inspect, visualize, render, open, or run a local canvas for deployed Sealos resources, mentions ".sealos", Sealos deployment state, Kubernetes resources, topology, resource graph, localhost UI, or invokes "/sealos-canvas".

Installs
149
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/labring/sealos-skills --skill sealos-canvas
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads sealos-canvas automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Sealos Canvas

Identity and Discovery

  • Owner: sealos-canvas (/sealos-canvas and deployed-resource view, inspect, visualize, topology, or localhost canvas requests).
  • Class: read-only-observation with no downstream mutation handoff.
  • Canaries: CANVAS-DEPLOYED, CANVAS-READONLY, CANVAS-REDACT, and CANVAS-SERVER-LIFETIME.

Scope and Boundaries

Require .sealos/state.json with last_deploy, ~/.sealos/kubeconfig, and live read access. Use only read commands such as kubectl get and kubectl config view; never deploy, update, restart, patch, delete, or apply. Render sanitized resource metadata into .sealos/canvas/index.html and return the exact local URL/cache and server-lifetime contract.

Risk and Confirmation

Keep the read-only boundary, Sealos kubeconfig scope, and Secret/ConfigMap sanitization visible before generator detail. Omit Secret.data and ConfigMap.data from every result. A missing state or kubeconfig stops the request without fallback generation. Never expose Secret data, complete ConfigMap contents, kubeconfig contents, or credentials.

Lifecycle Workflow

For each request, resolve the project, check deployed state and kubeconfig, run the single generator, open the loopback UI, and report sanitized counts. The temporary 127.0.0.1 server runs only for the current process and stops when the process ends or on SIGINT/SIGTERM; stop the server before closing the request.

Progressive Disclosure

Load scripts/generate-canvas.mjs and its owned template/reference paths only after the deployed-state and read-only canaries pass. Do not load or invoke deployment mutation helpers from this entry.

Output, Stop, and Error States

  • success: local_url, html_path, app URL, node count, edge count, sanitized HTML/model, and server-lifetime evidence.
  • stopped: not_deployed, kubeconfig_missing, kubectl_missing, or unavailable read access with the exact safe next action, server_lifetime.status: not_started, and no HTML/server fallback.
  • error: generation or server-start path, sanitized diagnostic category, server_lifetime, and recovery action with secrets and kubeconfig redacted.

Success with --no-serve returns local_url: null and server_lifetime.status: not_started; normal success returns local_url and server_lifetime.status: running with shutdown process exit or SIGINT/SIGTERM.

Handoffs

Canvas consumes the typed direct-result tuple with target: none, inputArtifact: .sealos/state.json last_deploy plus sanitized live summaries, allowedAction: serve a temporary read-only loopback view, failureReturn: sanitized read-only generation/server diagnostic, and responseOwner: sealos-canvas. A deploy response may include the returned link without granting Canvas mutation authority.

Verification

Use generate-canvas.mjs --no-serve, the Canvas contract tests, the canvas evals, and baseline cases canvas-positive-read-only-local-url and canvas-violating-missing-state-or-mutation. Verify 127.0.0.1, local_url, html_path, server_lifetime, read-only commands, sanitized output, and explicit "Stop the server" behavior.

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.

FAQ

What does the sealos-canvas skill do?

Run a local read-only HTML topology UI for a project already deployed by Sealos Skills and return a localhost URL. Use when the user asks to view, inspect, visualize, render, open, or run a local canvas for deployed Sealos resources, mentions ".sealos", Sealos deployment state, Kubernetes resources, topology, resource graph, localhost UI, or invokes "/sealos-canvas".

How do I install sealos-canvas?

Run npx skills add https://github.com/labring/sealos-skills --skill sealos-canvas in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/sealos-canvas/ (personal) or .claude/skills/sealos-canvas/ (project).

Which AI agents can use sealos-canvas?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is sealos-canvas safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains sealos-canvas?

It is published by labring in labring/sealos-skills. It has 149 recorded installs.

More from labring/sealos-skills

View all →

sealos-deploy

labring/sealos-skills

Brain managed-mode deploy executor for Sealos Cloud. Use when SEALAIDEPLOYMODE=managed (a Brain Devbox sandbox) or when the task says to run /sealos-deploy: deploy the workspace repository to Sealos through the MCP-gated managed pipeline — classify, build via Kaniko if needed, generate the canonical template, hand off through templateready / deploymentcompleted, and verify. Outside managed mode, use the use-sealos skill instead.

DevOps & Cloud479 installs

docker-to-sealos

labring/sealos-skills

Convert Docker Compose files or installation docs into production-grade Sealos templates with role-specific personal low-load resource sizing, official route and runtime semantics, KubeBlocks database and Job gates, and managed or optional S3 storage contracts. Use when user has a docker-compose.yml and wants a Sealos or Kubernetes template, wants to migrate from Docker Compose to Sealos, needs to convert container orchestration configs to Sealos format, or mentions compose-to-template conversion. Also triggers on "/docker-to-sealos".

DevOps & Cloud472 installs

dockerfile-skill

labring/sealos-skills

Generate production-ready Dockerfile for any GitHub project. Supports monorepo, multi-stage builds, workspace detection, and iterative build-fix cycles. Use when user asks to create, generate, write, fix, or improve a Dockerfile, wants to containerize an application, mentions Docker build issues, needs a .dockerignore, or wants to package their app as a Docker image. Also triggers on "/dockerfile".

DevOps & Cloud468 installs

cloud-native-readiness

labring/sealos-skills

Determine whether a repository contains a supported cloud workload, then assess eligible targets for cloud-native readiness with a 0-12 score. Use for containerization readiness, Docker/Kubernetes compatibility, deployment feasibility, workload eligibility, or pre-deployment assessment. Also triggers on "/cloud-native-readiness".

DevOps & Cloud467 installs

sealos-app-builder

labring/sealos-skills

Build, adapt, and document apps that run inside Sealos Desktop using the Sealos app SDK. Use when creating a new Sealos app, integrating an existing web app into Sealos Desktop, wiring Sealos session data into business features, preparing local iframe-based debugging, or producing beginner-friendly Sealos app tutorials and starter implementations. Also triggers on "/sealos-app-builder".

sealos-database

labring/sealos-skills

Provision, connect, and operate Sealos Cloud databases through sealos-cli for local development, Devbox development, and app setup. Use when the user needs a cloud database for a project, asks to create or connect PostgreSQL/MySQL/MongoDB/Redis or another Sealos database, wants DATABASEURL or similar env vars wired into a dev environment, needs database connection details, backups, logs, public access, or wants to replace local Docker Compose databases with a managed Sealos database.

Data & Databases420 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs