Skills

A skill is a playbook for a bigger job: how to caption a video, reformat it to 9:16, build a launch video or a reusable template. The Claude Code plugin uses skills to drive the MCP server. The same skills, in versions written for an editor, also work in the assistant inside your app.

The model sees only each skill's name and description. When a request matches one, it calls load_skill to read the playbook and read_skill_file for the reference files the playbook points to. This keeps the prompt small however many skills you add.

Use the Miraiclip skillsCopy Anchor Link

MIRAICLIP_SKILLS holds the plugin's skills in their editor versions:

import { createAssistant, editorTools, MIRAICLIP_SKILLS } from "@miraiclip/assistant";

const assistant = createAssistant({
  model,
  tools: editorTools(),
  skills: MIRAICLIP_SKILLS,
});

If your app doesn't use them, bundlers drop them from the build.

Start a request with a skillCopy Anchor Link

When the user picks a job in your UI, such as a "Captions" button, load its skill up front. The playbook goes straight into the system prompt for that request:

await assistant.run(project, "Add captions to the video.", { skills: ["captions"] });

Write your ownCopy Anchor Link

A skill is Markdown with front matter, in the same format as Claude Code skills:

---
name: brand-intro
description: Add our 3-second brand intro and outro. Use when the user asks for the intro, outro or "our branding".
---

# Brand intro

1. …

Load one with parseSkill, or a whole folder with skillsFromFiles. Each folder holding a SKILL.md is one skill, and the other .md files in that folder become its reference files:

import { parseSkill, skillsFromFiles, MIRAICLIP_SKILLS } from "@miraiclip/assistant";

// Vite: every .md under ./skills, as text
const files = import.meta.glob("./skills/**/*.md", { query: "?raw", import: "default", eager: true }) as Record<string, string>;

const assistant = createAssistant({
  model,
  skills: [...MIRAICLIP_SKILLS, ...skillsFromFiles(files)],
});

Write playbooks for what the assistant can do in your editor: name the tools it has, put the numbers it needs in the text (sizes, positions, timings), and tell it what to ask the user for. The model can't watch the video, so it should check its work by reading the project back. A good description says when to use the skill, because the model picks skills by their description.

Brand and directionCopy Anchor Link

The editor playbooks decide a video's look and voice in this order:

1. What the user asks for (colours, theme, style, mood, voice) is applied as asked.
2. Otherwise, the brand's own identity: its saved brand kit, or its website.
3. Neutral defaults only when there is nothing to go on, and the reply says so.

To give your assistant the brand's website, wrap brandFromWebsite from @miraiclip/brand in a tool. It reads the site's name, colours, fonts (with loadable Google Fonts files), logo and its own headlines and buttons for the voice. Run it on your server, because browsers can't read other sites:

// server
import { brandFromWebsite } from "@miraiclip/brand";

app.get("/api/brand", async (req, res) => res.json(await brandFromWebsite(String(req.query.url))));

// browser
import { defineTool } from "@miraiclip/assistant";

const getBrand = defineTool({
  name: "get_brand",
  description: "The brand's colours, fonts, logo and copy, read from its website. Call it before designing for a named brand unless the user gave the look.",
  inputSchema: { type: "object", properties: { url: { type: "string" } }, required: ["url"] },
  async run({ url }) {
    const res = await fetch(`/api/brand?url=${encodeURIComponent(String(url))}`);
    return res.ok ? { ok: true, result: await res.json() } : { ok: false, error: (await res.json()).error };
  },
});

brandFromWebsite only reads public http(s) addresses. It refuses localhost, .local names and private IP addresses, including after redirects. Sites that render everything with JavaScript give less, and its warnings say what was missing.

Films from a briefCopy Anchor Link

The film skills are split by job, the way a studio splits the work. Recipes (make-film, launch-video) hold the story order and defaults for a kind of film, and load the job skills as they need them:

1. Direct (direction): the world, the protagonist element and how it transforms, the acts and a timed beat sheet. Each beat has its words (at most about 7), what moves, the technique and what carries into the next beat.
2. Look (look): a palette, type and finish from the subject's own world, not the last film's.
3. Approve: the treatment is shown to the user as a storyboard, and the build waits for their approval unless they asked to skip it.
4. Music first (media-sound): the track is chosen and its beats measured before the acts are built.
5. Build (sequence-core, motion): each act is one sequence, a single timeline with a moving camera, whose beats land on the music.
6. Check: motion metrics, the layout at each beat, words on screen and beat alignment come back to the model with fixes.

The motion skill's techniques each come with a snippet that the package's tests lint and run through the real stage kit. Its breakdowns describe whole films beat by beat, as grammar to borrow, never as templates to fill.

In the React templateCopy Anchor Link

The Editor UI kit passes MIRAICLIP_SKILLS to its assistant:

• The chips under the Assistant's input (Captions, Talking head, Launch video, Trailer / film, Screen tutorial, Reformat) start a request with that skill loaded. Send without typing to use the chip's default request, or describe what you want.
• Templates → Create with AI runs with make-template loaded.
• Any other request can load a skill when it needs one. The Assistant's steps show "Reading a playbook" when it does.
• get_brand gives the assistant the brand kit saved in Project → Brand kit, or reads the brand's website through /api/brand. With addAssets it adds the brand's fonts and logo to the project. The Brand kit dialog's Fill from website uses the same route.
• plan_film decides a film's format (launch, course, trailer, documentary, explainer), its style and an art-direction concept before any scene is placed. The concept covers the idea, a recurring motif, layout, motion and a shot list. The style is a custom look made from the subject's own world, the brand's look, or one of the registry's reference looks when the user names it. Each film gets its own look instead of reusing the last one's. add_scene keeps library scenes to about a third of a film, half for a launch.
• design_scene lets the assistant design each scene itself in HTML and CSS, in the film's colours and fonts, with a small motion kit. The editor checks the markup, renders three frames of the scene and measures its layout: text outside the frame, clipped or overlapping text, type too small to read. The frames and the problems go back to the model, which redesigns the scene in place until it's right. preview_film shows one frame per scene at the end.
• add_scene places a library scene where one fits a beat as it is, and read_scene gives the model a library scene's code to adapt. With the stage kit available, library scenes are blueprints: read_scene remains, and add_scene is left out of the assistant's tools.
• direct_film records the treatment, checks it (lengths, words on screen, reading time, techniques, carry-overs) and shows the user a storyboard in the film's look. Approve & build and Change direction appear under it. "Just make it" in the request skips the approval.
• compose_sequence builds one act as a sequence. It lints the act, runs it once to catch script errors, places it, and returns a filmstrip. It also returns the layout and the words on screen after each beat, the act's motion metrics, and how many of its beats land on the music. Sequence clips show their act name and beat ticks on the timeline, and their words can be edited in the Text panel.
• get_beat_grid measures the music's tempo and beats (beat analysis). Every act composed after it gets them as S.beats. add_sound_effects puts a whoosh, pop, tick, impact, riser or chime on an act's labelled beats, mixed under the music.
• A film made from a brief shows only media of its own subject. Allowed media is media added in the chat, media named in the request, or the brand's own. Other media already in the project, such as the sample's video and screenshots, is refused. Placeholder copy (placeholder reviews, lorem ipsum, example.com) is refused too.
• find_images searches the web for pictures of the subject (Tavily) and generate_image makes new ones with a Gemini image model. Both add the pictures as image assets the film may use. Add your keys in AI settings → Images, or set TAVILY_API_KEY and GEMINI_API_KEY on the server. Web images keep their source site and are marked as having unverified rights.