---
source: "https://docs.lumora.live/skills/install"
url: /skills/install.md
description: >-
  Install the lumora-ograf skill so AI assistants such as Claude Code, Codex and
  Cursor can build, preview and package OGraf graphics for Lumora.
---

# 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](https://nodejs.org) 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](#for-ai-assistants) below. Start a new session afterwards so the skill loads.

### By hand

1. Download [lumora-ograf.zip](/skills/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](/templates/upload).

## 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](/skills/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.