skills.rest
riba2534
riba2534COMMUNITY
Explore all skills by this author →
Website𝕏@riba2534GitHub

feishu-cli-visual

Create Feishu whiteboards, slides, HTML widgets, and data visualizations via feishu-cli.

1.4k|142|Updated Jan 21, 2026
Search Tags:#svg#feishu#echarts#whiteboard#Data Visualization#Slides#HTML widget
One-click install
npx skills add https://github.com/riba2534/feishu-cli --skill feishu-cli-visual
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: feishu-cli-visual
Source: https://github.com/riba2534/feishu-cli/tree/main/skills/feishu-cli-visual
Command: npx skills add https://github.com/riba2534/feishu-cli --skill feishu-cli-visual

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @larksuite/whiteboard-cli, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Choosing the right Feishu carrier for a visual deliverable is confusing: whiteboards rasterize SVG, message cards have their own chart component, and only HTMLBox can run live JavaScript. This Skill routes each visualization request to the correct carrier and enforces a validated color palette and anti-pattern checklist so charts render correctly and remain readable.

Core Features & Use Cases

  • Carrier routing: Directs requests to one of five workflows — dataviz (form and palette selection), board (whiteboard via Mermaid/PlantUML/SVG pipelines), slides (presentation creation and media upload), htmlbox (live ECharts/Three.js/window.magic widgets in documents), and apps (publishing HTML as Miaoda applications).
  • Validated design system: Ships a unified light/dark palette with a Node.js validator script that checks colorblind safety and contrast, plus an anti-pattern acceptance checklist applied before delivery.
  • Deterministic pipelines: Includes scripts such as svg_to_board.py (SVG to editable whiteboard nodes with z-index and viewBox fixes) and animate_diagram.py (structured JSON to self-contained animated HTML).
  • Use Case: Ask for an auto-refreshing ECharts dashboard inside a Feishu document; the Skill selects the htmlbox carrier, applies the dark palette, verifies the page in a local browser, and inserts it with doc htmlbox create.

Quick Start

Ask the AI to create a Feishu whiteboard architecture diagram or an interactive ECharts chart in a Feishu document, and it will route to the right workflow and execute the feishu-cli commands.

Frequently Asked Questions about feishu-cli-visual

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

FAQPage Schema
How do I create an interactive chart in a Feishu document?▼

Use the htmlbox workflow: write a self-contained HTML page with ECharts or Three.js, verify it locally with the verify.sh script, then insert it with feishu-cli doc htmlbox create. HTMLBox is the only Feishu block that executes CSS and JavaScript.

How do I convert an SVG into editable Feishu whiteboard nodes?▼

Run the svg_to_board.py script with your SVG file and whiteboard ID. It translates SVG elements into native nodes, fixes z-index ordering, trims viewBox overflow, uploads in batches, and verifies node counts.

Should I use a whiteboard or HTMLBox for an animated diagram?▼

Use HTMLBox for anything that must move, since whiteboard SVG nodes are rasterized into static images by the Feishu server. Choose the whiteboard only when you need each element individually selectable and editable.

Why does my Mermaid diagram fail to import into a Feishu whiteboard?▼

The server-side renderer rejects par syntax, diagrams with 10 or more participants, or very long labels. Switch to the local engine with --engine local, which uses whiteboard-cli to translate Mermaid into nodes before upload.

What are the limits when publishing an HTML app to Miaoda?▼

The directory must contain an index.html entry file, uncompressed content is capped at 200MB, the packaged tar.gz at 20MB, and single HTML files at 10MB. Credential files like .env are blocked unless you pass --allow-sensitive.

How is the chart color palette validated for colorblind safety?▼

Run the validate_palette.js Node script against your hex list with a light or dark mode flag. It checks adjacent color Delta E and contrast ratios; palettes taken unchanged from palette.md are pre-validated and need no re-check.

Related Skills

Explore More Design & Creative Skills→
zhangdszqzhangdszq
1

feishu-doc-reader

Read Feishu documents and extract structured content via the Feishu Open API.

Community
Advanced
CalWadeCalWade

feishu-send-message

Send text, images, files, rich text, and interactive cards via the Feishu API.

Community
Advanced
noname300989noname300989

feishu

Send messages, rich cards, and reactions on the Feishu/Lark platform.

Community
Intermediate
hashSTACS-GlobalhashSTACS-Global
33

feishu-image-ocr

Convert image files to text using Feishu's OCR API.

Official
Basic