Lumora.live

Appearance

Build graphics with AI ​

The lumora-ograf skill teaches AI coding assistants how to build graphics for Lumora. Give your assistant reference material (screenshots, a brand guide, a video of the motion you want, a template from another platform) and it will:

  1. Ask you the questions your material doesn't answer (resolutions, which parts change, animation style, operator controls).
  2. Build the graphic as an OGraf template, the open standard Lumora uses.
  3. Open a local preview that runs Lumora's own graphic host and control form, where you can take the graphic, step through it, change the data, switch resolutions and pin notes on anything you want changed.
  4. Check it against Lumora's upload rules and package it as a .zip ready to upload.

Graphics you make with the skill are yours, including for commercial work.

What you need ​

  • An AI assistant that supports Agent Skills: Claude Code, OpenAI Codex, Cursor, GitHub Copilot, Gemini CLI and many others.
  • Node.js 18 or newer on your computer. The preview, checker and packager are small Node scripts with nothing else to install.
  • A Lumora plan that includes template uploads.

Install ​

Ask your assistant ​

In your assistant, say:

Install the Lumora OGraf skill from https://docs.lumora.live/skills/install

It follows the steps in For AI assistants below. Start a new session afterwards so the skill loads.

By hand ​

  1. Download lumora-ograf.zip.
  2. Unzip it into your project. It contains one folder, lumora-ograf:
    • For Claude Code: .claude/skills/lumora-ograf/
    • For Codex, Cursor, Copilot and Gemini CLI: .agents/skills/lumora-ograf/
    • Using more than one assistant? Put a copy in both.
    • To use it in every project, unzip into ~/.claude/skills/ or ~/.agents/skills/ in your home folder instead.
  3. Start a new session in your assistant.

Claude.ai: you can upload the zip under Customize → Skills. Claude can then plan and write graphics with you, but the local preview and scripts need your own computer, so we recommend Claude Code for building.

Using it ​

Describe the graphic you want and share your material. For example:

Make a lower third for our esports show from these screenshots and our brand guide. It needs to work at 1080p and vertical 9:16.

The assistant keeps notes in a brief.md file, builds the graphic in its own folder and gives you a preview link. Use Add note in the preview to point at anything you'd like changed, then tell the assistant you've left notes. When you're happy it produces a .zip.

To add it to Lumora, click Assets at the top of the page, open the User Templates tab and upload the zip. See Uploading a template.

Updates ​

The assistant checks for a newer version of the skill at the start of a session and asks before updating. You can also download the zip above again at any time. The current version and release notes are in version.json.

Licence ​

The example graphics and code snippets in the skill are MIT No Attribution: copy them freely. The rest of the skill is under the PolyForm Shield 1.0.0 licence: use it for any work, including paid work, except building a product that competes with Lumora. Full terms are in LICENSE.md inside the zip.

For AI assistants ​

Install steps for an AI agent asked to install this skill. Ask the user whether to install for this project only (default) or for all projects, and which assistants they use.

  1. Fetch https://docs.lumora.live/skills/version.json. It holds version, url (the versioned zip, relative to the site) and sha256.
  2. Download the zip from url and check its SHA-256 matches sha256. Don't install on a mismatch.
  3. The zip contains a single top-level folder lumora-ograf/. Extract it into each target skills folder:
    • Claude Code: <project>/.claude/skills/ (or ~/.claude/skills/)
    • Codex, Cursor, GitHub Copilot, Gemini CLI and other Agent Skills clients: <project>/.agents/skills/ (or ~/.agents/skills/)
  4. Replace an existing lumora-ograf/ folder completely rather than merging into it, so removed files don't linger.
  5. Confirm <skills folder>/lumora-ograf/SKILL.md exists, then tell the user to start a new session so the skill is loaded.

macOS / Linux / Git Bash:

bash
curl -fsSL https://docs.lumora.live/skills/lumora-ograf.zip -o lumora-ograf.zip
mkdir -p .agents/skills .claude/skills
rm -rf .agents/skills/lumora-ograf .claude/skills/lumora-ograf
unzip -q lumora-ograf.zip -d .agents/skills
unzip -q lumora-ograf.zip -d .claude/skills

Windows PowerShell:

powershell
Invoke-WebRequest https://docs.lumora.live/skills/lumora-ograf.zip -OutFile lumora-ograf.zip
Remove-Item -Recurse -Force .agents/skills/lumora-ograf, .claude/skills/lumora-ograf -ErrorAction SilentlyContinue
Expand-Archive lumora-ograf.zip -DestinationPath .agents/skills -Force
Expand-Archive lumora-ograf.zip -DestinationPath .claude/skills -Force

(lumora-ograf.zip always points at the latest version; verify it against sha256 in version.json when you can.) Once installed, later updates go through node <skill>/scripts/check-version.mjs --update, with the user's agreement.