Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

kendreaditya/claude/skills/canvas

Name: claude/skills/canvas
Author: kendreaditya

claude/skills/canvas/SKILL.md

npx skillsauth add kendreaditya/.config claude/skills/canvas

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Error

VirusTotalMulti-engine malware detection

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Canvas Skill

Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android).

Overview

The canvas tool lets you present web content on any connected node's canvas view. Great for:

Displaying games, visualizations, dashboards
Showing generated HTML content
Interactive demos

How It Works

Architecture

┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐
│  Canvas Host    │────▶│   Node Bridge    │────▶│  Node App   │
│  (HTTP Server)  │     │  (TCP Server)    │     │ (Mac/iOS/   │
│  Port 18793     │     │  Port 18790      │     │  Android)   │
└─────────────────┘     └──────────────────┘     └─────────────┘

Canvas Host Server: Serves static HTML/CSS/JS files from canvasHost.root directory
Node Bridge: Communicates canvas URLs to connected nodes
Node Apps: Render the content in a WebView

Tailscale Integration

The canvas host server binds based on gateway.bind setting:

| Bind Mode | Server Binds To | Canvas URL Uses | | ---------- | ------------------- | -------------------------- | | loopback | 127.0.0.1 | localhost (local only) | | lan | LAN interface | LAN IP address | | tailnet | Tailscale interface | Tailscale hostname | | auto | Best available | Tailscale > LAN > loopback |

Key insight: The canvasHostHostForBridge is derived from bridgeHost. When bound to Tailscale, nodes receive URLs like:

http://<tailscale-hostname>:18793/__openclaw__/canvas/<file>.html

This is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!

Actions

| Action | Description | | ---------- | ------------------------------------ | | present | Show canvas with optional target URL | | hide | Hide the canvas | | navigate | Navigate to a new URL | | eval | Execute JavaScript in the canvas | | snapshot | Capture screenshot of canvas |

Configuration

In ~/.openclaw/openclaw.json:

{
  "canvasHost": {
    "enabled": true,
    "port": 18793,
    "root": "/Users/you/clawd/canvas",
    "liveReload": true
  },
  "gateway": {
    "bind": "auto"
  }
}

Live Reload

When liveReload: true (default), the canvas host:

Watches the root directory for changes (via chokidar)
Injects a WebSocket client into HTML files
Automatically reloads connected canvases when files change

Great for development!

Workflow

1. Create HTML content

Place files in the canvas root directory (default ~/clawd/canvas/):

cat > ~/clawd/canvas/my-game.html << 'HTML'
<!DOCTYPE html>
<html>
<head><title>My Game</title></head>
<body>
  <h1>Hello Canvas!</h1>
</body>
</html>
HTML

2. Find your canvas host URL

Check how your gateway is bound:

cat ~/.openclaw/openclaw.json | jq '.gateway.bind'

Then construct the URL:

loopback: http://127.0.0.1:18793/__openclaw__/canvas/<file>.html
lan/tailnet/auto: http://<hostname>:18793/__openclaw__/canvas/<file>.html

Find your Tailscale hostname:

tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'

3. Find connected nodes

openclaw nodes list

Look for Mac/iOS/Android nodes with canvas capability.

4. Present content

canvas action:present node:<node-id> target:<full-url>

Example:

canvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__openclaw__/canvas/snake.html

5. Navigate, snapshot, or hide

canvas action:navigate node:<node-id> url:<new-url>
canvas action:snapshot node:<node-id>
canvas action:hide node:<node-id>

Debugging

White screen / content not loading

Cause: URL mismatch between server bind and node expectation.

Debug steps:

Check server bind: cat ~/.openclaw/openclaw.json | jq '.gateway.bind'
Check what port canvas is on: lsof -i :18793
Test URL directly: curl http://<hostname>:18793/__openclaw__/canvas/<file>.html

Solution: Use the full hostname matching your bind mode, not localhost.

"node required" error

Always specify node:<node-id> parameter.

"node not connected" error

Node is offline. Use openclaw nodes list to find online nodes.

Content not updating

If live reload isn't working:

Check liveReload: true in config
Ensure file is in the canvas root directory
Check for watcher errors in logs

URL Path Structure

The canvas host serves from /__openclaw__/canvas/ prefix:

http://<host>:18793/__openclaw__/canvas/index.html  → ~/clawd/canvas/index.html
http://<host>:18793/__openclaw__/canvas/games/snake.html → ~/clawd/canvas/games/snake.html

The /__openclaw__/canvas/ prefix is defined by CANVAS_HOST_PATH constant.

Tips

Keep HTML self-contained (inline CSS/JS) for best results
Use the default index.html as a test page (has bridge diagnostics)
The canvas persists until you hide it or navigate away
Live reload makes development fast - just save and it updates!
A2UI JSON push is WIP - use HTML files for now

kendreaditya/claude/skills/canvas

claude/skills/canvas/SKILL.md

# Canvas Skill Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android). ## Overview The canvas tool lets you present web content on any connected node's canvas view. Great for: - Displaying games, visualizations, dashboards - Showing generated HTML content - Interactive demos ## How It Works ### Architecture ``` ┌─────────────────┐ ┌──────────────────┐ ┌─────────────┐ │ Canvas Host │────▶│ Node Bridge │────▶│ Node App │ │ (HTTP Server) │ │ (TCP

tools

Updated Apr 17, 2026

$ install --global

skillsauth

npx skillsauth add kendreaditya/.config claude/skills/canvas

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Error

VirusTotalMulti-engine malware detection

70%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Mar 24, 2026, 11:04 AM44.4s1 file scanned

SKILL.md

Canvas Skill

Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android).

Overview

The canvas tool lets you present web content on any connected node's canvas view. Great for:

Displaying games, visualizations, dashboards
Showing generated HTML content
Interactive demos

How It Works

Architecture

┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐
│  Canvas Host    │────▶│   Node Bridge    │────▶│  Node App   │
│  (HTTP Server)  │     │  (TCP Server)    │     │ (Mac/iOS/   │
│  Port 18793     │     │  Port 18790      │     │  Android)   │
└─────────────────┘     └──────────────────┘     └─────────────┘

Canvas Host Server: Serves static HTML/CSS/JS files from canvasHost.root directory
Node Bridge: Communicates canvas URLs to connected nodes
Node Apps: Render the content in a WebView

Tailscale Integration

The canvas host server binds based on gateway.bind setting:

Key insight: The canvasHostHostForBridge is derived from bridgeHost. When bound to Tailscale, nodes receive URLs like:

http://<tailscale-hostname>:18793/__openclaw__/canvas/<file>.html

This is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!

Actions

Configuration

In ~/.openclaw/openclaw.json:

{
  "canvasHost": {
    "enabled": true,
    "port": 18793,
    "root": "/Users/you/clawd/canvas",
    "liveReload": true
  },
  "gateway": {
    "bind": "auto"
  }
}

Live Reload

When liveReload: true (default), the canvas host:

Watches the root directory for changes (via chokidar)
Injects a WebSocket client into HTML files
Automatically reloads connected canvases when files change

Great for development!

Workflow

1. Create HTML content

Place files in the canvas root directory (default ~/clawd/canvas/):

cat > ~/clawd/canvas/my-game.html << 'HTML'
<!DOCTYPE html>
<html>
<head><title>My Game</title></head>
<body>
  <h1>Hello Canvas!</h1>
</body>
</html>
HTML

2. Find your canvas host URL

Check how your gateway is bound:

cat ~/.openclaw/openclaw.json | jq '.gateway.bind'

Then construct the URL:

loopback: http://127.0.0.1:18793/__openclaw__/canvas/<file>.html
lan/tailnet/auto: http://<hostname>:18793/__openclaw__/canvas/<file>.html

Find your Tailscale hostname:

tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'

3. Find connected nodes

openclaw nodes list

Look for Mac/iOS/Android nodes with canvas capability.

4. Present content

canvas action:present node:<node-id> target:<full-url>

Example:

canvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__openclaw__/canvas/snake.html

5. Navigate, snapshot, or hide

canvas action:navigate node:<node-id> url:<new-url>
canvas action:snapshot node:<node-id>
canvas action:hide node:<node-id>

Debugging

White screen / content not loading

Cause: URL mismatch between server bind and node expectation.

Debug steps:

Check server bind: cat ~/.openclaw/openclaw.json | jq '.gateway.bind'
Check what port canvas is on: lsof -i :18793
Test URL directly: curl http://<hostname>:18793/__openclaw__/canvas/<file>.html

Solution: Use the full hostname matching your bind mode, not localhost.

"node required" error

Always specify node:<node-id> parameter.

"node not connected" error

Node is offline. Use openclaw nodes list to find online nodes.

Content not updating

If live reload isn't working:

Check liveReload: true in config
Ensure file is in the canvas root directory
Check for watcher errors in logs

URL Path Structure

The canvas host serves from /__openclaw__/canvas/ prefix:

http://<host>:18793/__openclaw__/canvas/index.html  → ~/clawd/canvas/index.html
http://<host>:18793/__openclaw__/canvas/games/snake.html → ~/clawd/canvas/games/snake.html

The /__openclaw__/canvas/ prefix is defined by CANVAS_HOST_PATH constant.

Tips

Keep HTML self-contained (inline CSS/JS) for best results
Use the default index.html as a test page (has bridge diagnostics)
The canvas persists until you hide it or navigate away
Live reload makes development fast - just save and it updates!
A2UI JSON push is WIP - use HTML files for now

Related Skills

kendreaditya/lcsearch

development

VerifiedTrustedCommunity

Search and read content from leetcode.com — problem catalog, daily challenge, full problem statements with hints and starter code, the Discuss forum (interview experiences, comp posts, layoff threads), and company question-list metadata. Read-only, no auth, no API key. Use when the user wants to look up a LeetCode problem by name/number/slug, see today's daily challenge, search Discuss for interview write-ups at a specific company (Google, Waymo, Meta, Amazon, etc.), browse a tag-filtered discuss feed, read a Discuss post + comments, or check what a LeetCode company list covers. Triggers — "lcsearch", "leetcode search", "search leetcode", "leetcode discuss", "leetcode problem", "daily leetcode", "interview discuss", "what's the leetcode for X", URLs containing leetcode.com/problems/, leetcode.com/discuss/, or leetcode.com/company/. Pair with the `interviewcoder` skill (structured leetcode-style writeups from 1point3acres) and `blind` (anonymous workplace chatter) for the same companies.

SKILL.mdUpdated May 15, 2026

kendreaditya/lcsearch

kendreaditya/spotify-player

development

VerifiedTrustedCommunity

Terminal Spotify playback/search via spogo (preferred) or spotify_player.

SKILL.mdUpdated May 12, 2026

kendreaditya/spotify-player

kendreaditya/interviewcoder

development

VerifiedTrustedCommunity

Search and read posts from interviewcoder.co — a Next.js-fronted aggregator of technical-interview writeups (largely sourced from 1point3acres) tagged by company, position, stage (Phone Screen / OA / Onsite / etc.), period, job type, and structured leetcode-style questions. Use when the user wants real interview questions for a specific company, recent writeups from a hiring loop, leetcode-style problems with tags and difficulty, or to look up a specific interviewcoder.co URL. Read-only, no auth, no API key. Triggers — "interviewcoder", "interviewcoder.co", "interview questions at [company]", "what's been asked at [company] recently", "interview writeup", and URLs containing interviewcoder.co.

SKILL.mdUpdated May 12, 2026

kendreaditya/interviewcoder

kendreaditya/yfin

tools

VerifiedTrustedCommunity

Small Yahoo Finance CLI for ticker info + N-year stock returns. Use when the user asks about: stock price, market cap, sector/industry classification, dividend yield, P/E ratio, beta, 52-week range, N-year stock return, company description for a public company. Triggers: 'yfinance', 'yfin', 'stock price', 'market cap of', 'how much has X stock returned', 'sector for ticker', 'industry classification'. Pairs with the levels-fyi skill for cross-checking public/private status (levels gives ticker, yfin returns live data).

SKILL.mdUpdated Apr 29, 2026

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/kendreaditya/.config.git

# Copy into Claude Code skills folder (global)
cp -r .config/claude/skills/canvas ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

kendreaditya/.config

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT