SkillGild
Sign inCreate account
Content Creation

LiveCanvas

Turn a topic into an Apple Live Photo info card: checked facts, a designed cover and Remotion animation for comparisons, processes and data stories, exported as a paired Live Photo.

  • 25 free runs a month
  • Runs in your agent, private tools on SkillGild
  • v1.2.0
skillgild install livecanvas
Works with
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
and any MCP client

License: MIT · Created by pengchujin

Demo by pengchujin, CC BY 4.0. Emoji by Twemoji contributors, CC BY 4.0

Gallery

Demo by pengchujin, CC BY 4.0. Emoji by Twemoji contributors, CC BY 4.0 · Demo by pengchujin, CC BY 4.0

Install and connect

Pick your agent. The wrapper only tells your agent how to start a session. The skill's instructions arrive with each session, after your access is checked.

  1. Sign in once from your terminal.

    Terminal
    skillgild login

  2. Install this skill for Claude Code.

    Terminal
    skillgild install livecanvas --agent claude-code

  3. Register the SkillGild MCP server with Claude Code.

    Terminal
    claude mcp add --scope user skillgild -- $(command -v skillgild) mcp

How it runs

  1. Your agent starts a session. SkillGild checks your access and allowance, counts one run, and sends the skill's instructions for this task.
  2. Your agent does the work with its own model and tools, in your project. SkillGild makes no AI model call.
  3. Private steps run on SkillGild. Your agent calls the server tools below and gets their results. The tool code never leaves SkillGild, and tool input is not stored.

Use it from code

Start a session, call its tools, then end it. Create an API key under Account and pass it as a bearer token.

Terminal
# Prints the session ID, its tools and the instructions for your agent
skillgild session livecanvas
skillgild call <session-id> validate_series --input '{"data": {}}'
skillgild end <session-id>

Server tools

Each call uses one of the session's tool calls.

validate_seriesValidate time-series data.json

Checks a LiveCanvas time-series data.json before rendering: schema version, demo flag and provenance, ISO dates, period and timezone, metric and currency, every source's fields and access date, point order, source references, value range against display.yDomain, and complete monthly or yearly buckets. Returns {ok, errors, warnings, summaries, factCheck}. Passing does not mean the sources were fact-checked.

FieldTypeNotes
dataRequiredobjectThe full data.json object, as described in references/data.md.
allow_demobooleanAccept synthetic demo data. Only for testing the render pipeline.

validate_factsValidate facts, comparisons and events

Checks a LiveCanvas data.json that has no time series: claims, comparisons and events. Each item needs a unique id, a sourceId that resolves, and a nature of measured, official_claim, estimate, forecast or illustrative. Comparisons need at least two items in one unit and a basis; events need ISO dates on or before asOf unless forecast. Returns {ok, errors, warnings, counts, factCheck}. Passing does not mean the sources were fact-checked.

FieldTypeNotes
dataRequiredobject{schemaVersion: 1, demo, asOf, sources: [{id,title,url,accessedAt,method}], claims: [{id,text,sourceId,nature,value?,unit?}], comparisons: [{id,label,basis,sourceId,nature,items: [{name,value,unit}]}], events: [{id,date,text,sourceId,nature}]}
allow_demobooleanAccept synthetic demo data. Only for testing the render pipeline.

More in Content Creation

View all
  • Launch video made with Brag for Horse Tinder, an example dating app for horses
    FreeVideo & Media

    Turn the project you just built into a short, shareable launch video with one command. Your agent reads the project code, so no live URL or screenshots are needed.

    Brag

    25 runs/mo
    • Claude Code
    • Codex
    • Cursor
    • Gemini CLI
  • Animated fable rendered with fframes: a rabbit waits on renders while a crab finishes first
    FreeVideo & Media

    Create, animate, review and render videos in code with fframes: Rust, SVG scenes and GPU rendering. Covers setup, motion design, sound, a live preview window and automatic checks without watching the render.

    fframes Video

    25 runs/mo
    • Claude Code
    • Codex
    • Cursor
    • Gemini CLI
  • Concept boards for six example brands made with the skill
    FreeDesign

    Professional logo and brand-mark design from brief to production files: concepts, clean geometric SVG, optical refinement, tests at 16 px and in one colour, presentation boards and brand guidelines.

    Logo Design

    25 runs/mo
    • Claude Code
    • Codex
    • Cursor
    • Gemini CLI
  • FreeVideo & Media

    Make a code-rendered lyric music video for a finished song: every sung word lands on its own syllable inside dense animated graphics, with a recurring character, rendered offline at 1080p60. No video model.

    Lyric Music Video

    25 runs/mo
    • Claude Code
    • Codex
    • Cursor
    • Gemini CLI
  • Scroll through Floria, an example landing page built with the skill
    FreeDesign

    Anti-slop frontend skill for landing pages, portfolios and redesigns. Reads the brief, picks the right design direction and ships interfaces that do not look templated.

    Taste Skill

    25 runs/mo
    • Claude Code
    • Codex
    • Cursor
    • Gemini CLI
  • FreeVideo & Media

    Turn your own narration and real assets (book covers, screenshots, logos) plus a chosen visual style into a 20 to 60 second cinematic promo, or turn a script into an animated illustration clip.

    Video Illustrator

    25 runs/mo
    • Claude Code
    • Codex
    • Cursor
    • Gemini CLI