skills.rest
GCWing
GCWingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

bitfun-canvas

Creates live React TSX canvas artifacts for analytical output in BitFun.

1.9k|214|Updated Feb 2, 2026
Search Tags:#charts#artifact#TSX#reAct#CANVAS#Data Visualization#bitfun
One-click install
npx skills add https://github.com/GCWing/BitFun --skill bitfun-canvas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bitfun-canvas
Source: https://github.com/GCWing/BitFun/tree/main/src/crates/assembly/core/builtin_skills/bitfun-canvas
Command: npx skills add https://github.com/GCWing/BitFun --skill bitfun-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Chat responses bury structured analytical results in markdown tables and code blocks. This Skill turns standalone analytical output — metrics, audits, billing investigations, charts — into a live React canvas the user can open beside the conversation.

Core Features & Use Cases

  • Canvas authoring workflow: Decide when a canvas is warranted, then create, patch, or rewrite a single TSX artifact via CreateCanvas, PatchCanvas, and UpdateCanvas.
  • Component SDK: Build with the bitfun/canvas SDK — charts (Bar, Line, Pie), tables, cards, stats, forms, diff views, DAG layouts, and usage bars — styled with host appearance tokens.
  • Design policy enforcement: Flat minimal styling with forbidden slop patterns (gradients, emojis, box-shadows), mandatory plot labeling, and a pre-delivery self-check.
  • Use Case: After querying a database for a billing investigation, render the categorized findings as a labeled chart and table canvas instead of dumping a markdown table into chat.

Quick Start

Ask the agent to analyze your data and present the results as a BitFun Canvas you can open beside the chat.

Frequently Asked Questions about bitfun-canvas

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

FAQPage Schema
How do I create a BitFun Canvas artifact?▼

Call CreateCanvas with a concise title and a complete TSX source that default-exports one component. For small revisions use PatchCanvas with exact text replacements; use UpdateCanvas only for full rewrites.

When should I use a canvas instead of a markdown table?▼

Use a canvas whenever the output is a standalone analytical artifact — quantitative analyses, audits, billing investigations, or structured tool results where the data is the deliverable. Skip it for targeted debugging, drafts, or work in a specific external tool.

What components does the bitfun/canvas SDK provide?▼

The SDK exports layout primitives (Stack, Row, Grid), typography, Card, Table, Stat, charts (BarChart, LineChart, PieChart), form controls, DiffView, TodoList, UsageBar, and hooks like useHostAppearance and useCanvasState.

Can a BitFun Canvas fetch data from an API or npm packages?▼

No. A canvas must embed all data inline and import only from bitfun/canvas. Network calls, npm packages, Node built-ins, and relative imports are not allowed.

Why does my canvas appear blank or fail to compile?▼

Compilation or policy validation failures return diagnostics from the Canvas tool while preserving the last-known-good payload. Inspect the diagnostics, fix the source, then apply PatchCanvas for small edits or UpdateCanvas for a rewrite.

What styling rules apply to canvas design?▼

All colors must come from useHostAppearance() tokens with no hardcoded hex. Gradients, emojis, box-shadows, rainbow coloring, and walls of identical cards are forbidden; canvases stay flat, minimal, and purposeful.

Related Skills

Explore More Software Engineering Skills→
dnzengoudnzengou

render-monitor

Monitor Render service health, performance metrics, logs, and resource usage.

Community
Intermediate
webrix-aiwebrix-ai
1

compliance-evidence-collector

Collect compliance evidence from AWS, Google Drive, and Jira for audits.

Official
Advanced
arvidfcjarfalla-progarvidfcjarfalla-prog

connect-datasource

Classify PxWeb, SDMX, and REST sources and create Atlas registry entries.

Community
Advanced
vibercoder79vibercoder79
8

grafana

Generate and update Grafana Cloud dashboards, panels, and PromQL alert rules.

Community
Intermediate