OkayTeacher
EN English 한국어 日本語 中文 हिन्दी বাংলা اردو Español Português Français Deutsch Русский العربية Bahasa Indonesia Tiếng Việt ไทย Türkçe

How to enable notifications

Notifications are unavailable in this browser or on this address. Try a supported browser on the secure SONUB site.

If notifications are blocked, allow them in your browser settings.

  1. Open the site controls beside the address bar, or your browser’s site settings. Set Notifications for this site to Allow.
  2. In your device settings, allow notifications for your browser and check Do Not Disturb or Focus.
  3. Return to SONUB, reload the page, and use the bell to enable notifications.

On iPhone or iPad, add SONUB to your Home Screen, open it there, then allow notifications.

Teach your AI agent new skills — in one minute

Free SONUB skills for , and other . Install them with one command and ask in plain words, then make your own in the next tabs.

A shelf of colourful binders. One is open, showing a cover with an icon and a few lines, pages of dotted steps, a checklist and a small toolbox clipped inside. A robot reads the covers and pulls out the binder that matches a dice icon in a speech bubble.

Basics — what skills are and how to install them

New to skills? Start here. Learn what an is and how it works, then install one with a single command and try it. When you are done, move on to the [Intermediate] tab above to make your own.

Learn about agent skills

An is a folder with a file that teaches an agent how to do one kind of task: the steps, the rules and the checks, and optionally scripts and reference files. , and other agents support the open format.

The top of SKILL.md holds a name and a description. The agent reads only these at first, and loads the full instructions when a request matches the description. That keeps many skills available without filling up the conversation.

Understand it the easy way

Think of it like this
A skill is like a binder of instructions on a shelf. The agent first reads only the covers — the name and a one-line description of every binder. When your request matches a cover, it takes that binder down and follows the steps inside. That is why many skills do not crowd the conversation.
Example

A “roll-dice” skill: a folder with SKILL.md whose cover says “Roll dice when the user asks for a random number”, and inside, the steps and a small script. Ask “Roll two dice for me” and the agent opens that binder.

Common mistake
A vague description like “useful helper”. The agent decides from the cover alone, so say exactly when the skill should be used.
A shelf of colourful binders. One is open, showing a cover with an icon and a few lines, pages of dotted steps, a checklist and a small toolbox clipped inside. A robot reads the covers and pulls out the binder that matches a dice icon in a speech bubble.
The agent reads only the covers (name and description), then opens the one binder that matches the request.

What is an agent skill?

Agent Skills are a lightweight, open format for giving an AI agent new abilities and expert knowledge. One skill is one folder with a SKILL.md file in it. SKILL.md holds a name and a description, plus instructions that tell the agent how to do one kind of task. You can also put scripts, reference documents, and other files in the folder.

Agents keep getting smarter, but to do real work reliably they need your company's, your team's and your own way of doing things. A skill packs that know-how into a folder the agent loads only when it needs it. It turns expert knowledge into something reusable, and a task with many steps into the same procedure every time.

first created the format and released it as an . Today anyone can join in and help it grow (agentskills.io).

Where it helps — things a team repeats, such as steps, review rules and document formats. The way of working stays even when people change.

Learn it once, use it in many AI tools

Agent Skills are not a feature of one company; they are an open standard. So once you learn how to make a skill, you can use it everywhere. The same SKILL.md folder works in Claude Code and Codex, and in the many AI tools that support the format.

Installing is the same everywhere too: put the skill folder in the folder where the tool looks for skills. Only that location differs a little from tool to tool, as the box below shows.

  • Claude Code
  • & Codex
  • Factory

Some of the tools listed on agentskills.io (checked 2026-10-16). The list keeps growing.

# where each tool looks for skills      all projects        this project
Claude Code                             ~/.claude/skills    .claude/skills
Codex · Gemini CLI · Copilot CLI        ~/.agents/skills    .agents/skills
VS Code (GitHub Copilot)                                    .agents/skills
# put the whole skill folder there:  .agents/skills/roll-dice/SKILL.md

How it works: three steps, reading only what is needed

An agent reads skills by : a little at first, more only when a task calls for it.

  1. Discovery: at startup the agent reads only the name and description of every skill, about 100 each, so installing many skills keeps it light.
  2. Activation: when a request matches a skill's description, the agent reads that skill's whole SKILL.md body. Keep the body under about 5,000 tokens and 500 lines.
  3. Execution: the agent follows the instructions, running in scripts/ or reading documents in references/ only when needed.

The folder and the rules of SKILL.md

The only file a skill must have is SKILL.md. It starts with a header between two --- lines, followed by the instructions in .

  • name (required): at most 64 characters, only lowercase letters, numbers and hyphens. It must not start or end with a hyphen or have two hyphens in a row, and it must match the folder name.
  • description (required): at most 1,024 characters. Say what the skill does and when to use it, with the words people really say. The agent reads this to decide whether to use the skill.
  • , compatibility, , (optional): the license, the environment it needs (at most 500 characters), extra details such as author and , and tools approved in advance (experimental). Most skills need none of them.
  • scripts/, references/, assets/ (optional): code to run, documents to read when needed, and templates, images or . Point to files with paths relative to the skill folder, and link them only one level deep from SKILL.md.
my-skill/            # folder name = the skill's name
├── SKILL.md         # required: name + description + instructions
├── scripts/         # optional: code the agent can run
├── references/      # optional: documents read only when needed
└── assets/          # optional: templates, images, data

Make one: a single file in five minutes

The simplest skill is just one SKILL.md file. Let's make the dice-rolling skill from the agentskills.io quickstart.

  1. Make the folder: in your project, create .agents/skills/roll-dice/ (for Claude Code, .claude/skills/roll-dice/). The folder name is the skill name.
  2. Write SKILL.md as in the box below: a name, a description, and a few lines saying what to do.
  3. Check it: open the agent again and type /skills to see that roll-dice is in the list.
  4. Test it: ask "Roll a d20" and see the skill turn on; then ask something unrelated and see that it stays off. If it does not turn on, improve the description.
---
name: roll-dice
description: Roll dice using a random number generator. Use when asked to roll a die (d6, d20, etc.), roll dice, or generate a random dice roll.
---

To roll a die, use the following command that generates a random number from 1
to the given number of sides:

```bash
echo $((RANDOM % <sides> + 1))
```

Replace `<sides>` with the number of sides on the die (e.g., 6 for a standard
die, 20 for a d20).

Make a habit of building your own skills

For the things you know well, it is very important to build the habit of making your own skills and using them. Nobody knows your way of working, your standards and your tricks better than you. Put them in a skill, and the AI works your way every time — your knowledge becomes a tool you can use again and again.

You do not have to write it perfectly from the start. Follow the basic skill format (one folder with a SKILL.md), write down your idea, and rules in a few short lines, and ask the AI to update it. Shaping the format and filling in missing steps is something the AI does well.

  1. Make the frame: create the skill folder and SKILL.md in the basic format, and write the name and description at the top.
  2. Write it briefly: in the body, write the idea (what the skill does), the logic (in what order) and the rules (what to always do and never do) in a few lines (box below).
  3. Ask for an update: tell the AI "Polish this skill to the standard skill format. Keep my idea, logic and rules, and fill in the missing steps, examples and how to check the result." Then read what it changed and check that it matches what you meant.
---
name: weekly-report
description: Writes my team's weekly report. Use when asked for a weekly report or "this week's summary".
---

Idea:  turn this week's commits and issues into a one-page report.
Logic: read the last 7 days of git log → group by feature → write the report.
Rules: plain words, 10 bullets at most, never include passwords or customer names.

Tips for good skills

  • The description matters most: say what it does, when to use it and what it is not for. A vague one such as "Helps with PDFs" is rarely used.
  • Keep one kind of task per skill. Fill the body with short steps, examples of , and common exceptions.
  • Move long explanations to references/ and repeated commands or calculations to scripts/. Scripts should state what they need and give clear .
  • Check the header rules with validate ./my-skill, keep the skill in , and share it with your team.
  • Skills made by others can run scripts, so read a skill before you install it.
  • Before you use one — read the instructions and scripts of a skill someone else made, and test it on a small task you can undo. The Agent Skills website only defines the format; it does not promise a skill is safe.
A closer look

The description decides when a skill is used, so write it with the words people really say and state what it is not for. Keep the instructions short and concrete, move long details into separate reference files, and test the skill with requests that should and should not use it. Skills can run scripts, so install skills only from sources you trust, and read them first. SONUB itself is built with several skills — one of them writes the beginner pop-ups for terms you see on this site.

Install with one command

Run this in a inside your project folder. It reads the list from sonub.com, asks which skills and which you want, and copies the skill folders where each agent looks for them.

npx skills add https://sonub.com

Needs 18 or later (it comes with npx). Start a new session of your agent afterwards so it reads the new skills.

No need to know the command — just ask the AI to install it

To install a skill, simply ask the to install the skill you want. AI is smart: tell it where the skill is — for example, “Install the gp skill from https://sonub.com” — and it installs it for you. Even if you don’t know the install command, the AI installs the skill and uses it. Copy the sentence below and send it to your agent.

Install the SONUB skills: run npx skills add https://sonub.com -y, then tell me which skills were installed and what I can say to start using them.

But if you only give orders to the AI while knowing nothing at all, in the end it is the AI that did the work, not you.

That is why you should learn about AI first: then you can give the AI better instructions, and when the AI gets something wrong, you can analyze what it did, find what went wrong and ask again.

Useful options

For every project on this computer (without it, only this project)
npx skills add https://sonub.com -g

Only one skill
npx skills add https://sonub.com -s gp

Only for one agent
npx skills add https://sonub.com -a claude-code

Just list the skills, install nothing
npx skills add https://sonub.com -l

No questions — all skills for the agents found on this computer
npx skills add https://sonub.com -y

Manage installed skills — check, version, update, remove

The (npx skills) also lists the skills you installed, shows their , updates and removes them. In the commands below -g means (every project on this computer); without -g the command works on this project ().

Global and local (project)

Global and local (project)
Global (-g) Local (no -g)
Used in Every project on this computer Only inside that project folder
Real files ~/.agents/skills/<name> .agents/skills/<name>
Where reads it ~/.claude/skills/<name> .claude/skills/<name>
Version and date record ~/.agents/.skill-lock.json skills-lock.json No dates — only the version ()

Run local commands inside the project folder. If the same is installed both globally and locally, Claude Code uses the global (personal) one.

Claude Code does not read ~/.agents/skills

Claude Code reads only .claude/skills folders (~/.claude/skills and the project’s .claude/skills), never ~/.agents/skills or the project’s .agents/skills. , and read .agents/skills. The skills CLI keeps the real files in .agents/skills and makes a link for Claude Code in .claude/skills. If you copy a skill folder by hand into ~/.agents/skills only, Claude Code will not see it — put it (or a link) in ~/.claude/skills, start a new session and check with /skills in Claude Code.

List installed skills

Global skills — name, path, agents, Source
npx skills ls -g

Skills of this project (local)
npx skills ls

Only the ones linked for Claude Code
npx skills ls -g -a claude-code

As JSON — with scope and download address
npx skills ls -g --json

If the Source is sonub.com or a , the skill was installed with the skills CLI and can be updated and removed with it. local means someone put the folder there by hand — the skills CLI does not update it.

Check the version and install date

Skills have no version number. The version is the first 12 characters of the digest (the of the ) that the source publishes. When it installs a skill, the skills CLI writes this value with the install and update dates into the record file (the local record has no dates). We made this into a sh script, skill-versions.sh: download it once and reuse it in any project — it shows global and local skills in one table and compares them with the newest version at the source.

Download the script once
curl -fsSL https://sonub.com/.well-known/skills/claude-skill/scripts/skill-versions.sh -o ~/skill-versions.sh

Global skills and this project’s skills
sh ~/skill-versions.sh

Global only
sh ~/skill-versions.sh -g

This project (local) only — run it in that folder
sh ~/skill-versions.sh -p

With claude-skill installed globally, run it without downloading
sh ~/.claude/skills/claude-skill/scripts/skill-versions.sh 

SKILL   SCOPE    VERSION       INSTALLED (UTC)    UPDATED (UTC)      SOURCE     NEWEST
gp      global   8188561e0e0f  2026-10-18 03:47   2026-10-19 01:32   sonub.com  update → 2c1de455707c
popup   global   de0138a39fa1  2026-10-18 03:47   2026-10-19 01:32   sonub.com  latest
popup   project  de0138a39fa1  2026-10-19 01:36*  2026-10-19 01:36*  sonub.com  latest

In the NEWEST column, latest means up to date and update → … means a newer version is out — update it. ? means the source did not answer. For local skills the date is when was written, marked with *. The script only reads and changes nothing; it runs on (the skills CLI needs it too).

Show skill-versions.sh 
#!/bin/sh
# skill-versions.sh — the version, install date and update date of every agent skill installed with
# the skills CLI (npx skills), and whether a newer version is out. Skills have no version number:
# the version is the first 12 characters of the digest (sha256) the source published.
#
#   sh skill-versions.sh            # global (~/.agents/.skill-lock.json) and this project (./skills-lock.json)
#   sh skill-versions.sh -g         # global only
#   sh skill-versions.sh -p         # this project only — run it in the project folder
#   sh skill-versions.sh --offline  # do not ask the sources for the newest version
#
# Reads only the lock files and the sources' /.well-known/agent-skills/index.json; changes nothing.
# Needs Node.js, which the skills CLI needs anyway. Newer version → npx skills update <name> [-g].

scope=all
online=1
for arg in "$@"; do
  case "$arg" in
    -g|--global) scope=global ;;
    -p|--project) scope=project ;;
    --offline) online=0 ;;
    -h|--help) sed -n '2,12p' "$0" | sed 's/^# \{0,1\}//'; exit 0 ;;
    *) echo "unknown option: $arg (try -h)" >&2; exit 2 ;;
  esac
done

command -v node >/dev/null 2>&1 || { echo "Node.js is needed (the skills CLI needs it too)" >&2; exit 1; }

SCOPE="$scope" ONLINE="$online" node - <<'JS'
const fs = require('fs'), os = require('os'), path = require('path');
const { SCOPE, ONLINE } = process.env;

const lists = [];
if (SCOPE !== 'project') lists.push(['global', path.join(os.homedir(), '.agents', '.skill-lock.json'), os.homedir()]);
if (SCOPE !== 'global') lists.push(['project', path.resolve('skills-lock.json'), process.cwd()]);

const short = (d) => (d || '').replace(/^sha256:/, '').slice(0, 12);
const day = (t) => (t ? t.slice(0, 16).replace('T', ' ') : '');

// The project lock file has no dates — fall back to when SKILL.md was written (marked with *).
function fileDate(base, name) {
  for (const dir of ['.agents/skills', '.claude/skills']) {
    try { return fs.statSync(path.join(base, dir, name, 'SKILL.md')).mtime.toISOString(); } catch {}
  }
  return '';
}

async function newest(base, cache) {
  if (!(base in cache)) {
    cache[base] = fetch(new URL('/.well-known/agent-skills/index.json', base), { signal: AbortSignal.timeout(10000) })
      .then((r) => (r.ok ? r.json() : null))
      .then((j) => Object.fromEntries((j?.skills || []).map((s) => [s.name, short(s.digest)])))
      .catch(() => null);
  }
  return cache[base];
}

(async () => {
  const rows = [], cache = {};
  for (const [scope, file, base] of lists) {
    let skills;
    try { skills = JSON.parse(fs.readFileSync(file, 'utf8')).skills || {}; } catch { continue; }
    for (const [name, s] of Object.entries(skills)) {
      const version = short(s.wellKnownDigest || s.computedHash || s.skillFolderHash) || '-';
      let installed = day(s.installedAt), updated = day(s.updatedAt);
      if (!installed) installed = updated = day(fileDate(base, name)) + '*';
      let status = '';
      if (ONLINE === '1') {
        const site = s.sourceType === 'well-known' && (s.sourceBaseUrl || s.sourceUrl);
        const index = site ? await newest(site, cache) : null;
        const latest = index?.[name];
        status = !site ? '-' : !latest ? '?' : latest === short(s.wellKnownDigest) ? 'latest' : `update → ${latest}`;
      }
      rows.push([name, scope, version, installed, updated, s.source || '-', status]);
    }
  }
  if (!rows.length) { console.log('No skills installed with the skills CLI here (no lock file).'); return; }
  const head = ['SKILL', 'SCOPE', 'VERSION', 'INSTALLED (UTC)', 'UPDATED (UTC)', 'SOURCE', ONLINE === '1' ? 'NEWEST' : ''];
  const all = [head, ...rows];
  const width = head.map((_, i) => Math.max(...all.map((r) => r[i].length)));
  for (const r of all) console.log(r.map((c, i) => c.padEnd(width[i])).join('  ').trimEnd());
  if (rows.some((r) => r[3].endsWith('*'))) console.log('* the project lock file keeps no dates — this is when SKILL.md was written');
  if (rows.some((r) => r[6].startsWith('update'))) console.log('Newer version out → npx skills update <skill> (-g for global)');
})();
JS

Paths — installed, downloaded from, original

  • Installed at — the path shown by npx skills ls (e.g. ~/.agents/skills/gp)
  • Downloaded from — sourceUrl in the record file (e.g. https://sonub.com/.well-known/agent-skills/gp.tar.gz)
  • Original — where the skill is made (for SONUB skills, the original that sonub.com serves). Changes to the installed folder are overwritten by the next update, so change the original instead.

Update and remove

Only gp, to the newest version (global)
npx skills update gp -g

Every global skill to the newest version
npx skills update -g

Every skill of this project to the newest version
npx skills update -p

Remove gp (global; it asks first — add -y to skip the question)
npx skills rm gp -g

Remove gp from this project
npx skills rm gp

Only unlink it from Claude Code (other agents keep it)
npx skills rm gp -g -a claude-code

An update downloads only the skills whose digest changed. Afterwards start a new session and run skill-versions.sh again — VERSION should equal NEWEST. Install a removed skill again with npx skills add https://sonub.com -s gp -g.

The skills

Each is a standard folder with a — the instructions an reads — plus a small tool. Nothing to sign up for, .

gp

All your work on a board

Talk to your in plain words and it manages your GitHub Project board with the — then reads the result back to confirm.

  • Issues: create, edit, move between columns, close, reopen, comment
  • columns: add, rename (cards stay), reorder, colour
  • and videos attached to issues
  • checklists inside an issue, with progress
  • Assign people; invite, list and remove board members
  • A board per project with /gp init <board >

Try saying

  • “What’s on my plate?”
  • “Move #12 to Review”
  • “Add ‘update the docs’ to its TODO”
  • “Add a column Urgent at the front”

Try it: manage your work with the gp skill

gp is a made by SONUB that keeps all your work on a board. Ask for these things in plain words, and the does them with the (gh) and reads the result back to confirm:

  • create, edit or close issues, and attach images
  • keep checklists
  • add or rename columns
  • assign people

Its folder has exactly the parts described above: , a script that does the work (scripts/gp.py) and reference files that are when needed.

  1. Get ready: create a free account at github.com/signup and install gh. The agent can help you log in with gh auth login.
  2. Install: type the line below in a (it needs ). It puts gp into the agents on your computer — , , and more.
  3. First time: say "Set up gp". The agent checks everything with the gp doctor command, then picks one of your boards or creates a new one.
  4. Use it in your own words: "Make an issue: the login button does nothing, attach this ", "Move it to Done", "Add a Review column", "What's on my plate?"
# 1) install the gp skill — Claude Code, Codex, Gemini CLI, Copilot CLI ...
npx skills add https://sonub.com -s gp -g
#   -g: for every project (leave it out for this project only)

# 2) once: log in to GitHub with the board permissions
gh auth login
gh auth refresh -s project,repo

# 3) then just ask the agent:
# "Set up gp and show my GitHub projects."
# "Make an issue: the login button does nothing. Attach shot.png. TODO: reproduce, fix, test."
# "Move it to In Progress."   "Add a Review column."   "Done!"   "What's on my plate?"

Needs a free account, the gh CLI and 3.8+.

Install this skill

npx skills add https://sonub.com -s gp

Read SKILL.md

claude-skill

Learn and get better at it

Claude Code ships a new almost every day. This teaches it in order, answers from the current official docs, checks your setup and summarizes every new feature.

  • 14 lessons with an exercise in your own project and check questions
  • Quizzes, with your progress saved
  • Answers checked against the official docs, with the link
  • Every new feature, summarized by topic
  • A setup doctor for settings, CLAUDE.md, skills, plugins and
  • /claude-skill update pulls newly released features into the skill

Try saying

  • “Next lesson”
  • “How do I run after every edit with a hook?”
  • “Check my setup”
  • “Give me a quiz”

Needs 3.8+ and internet access (it reads the official docs).

Install this skill

npx skills add https://sonub.com -s claude-skill

Read SKILL.md

popup

Explain every hard word where the reader meets it

Hover a technical word on any page or document of your project — or tap it on a phone — and a small card explains it: meaning, plain words, examples, and a “learn more” link.

  • One glossary is the source of every explanation, in every language you ship
  • A drop-in popup.js and popup.css — no , no
  • Finds terms in by itself; phrases, “?” buttons and link previews by hand
  • Keyboard, phones (bottom sheet), right-to-left languages and
  • An audit that finds jargon in your docs with no explanation yet
  • For READMEs on : a GLOSSARY.md and links that show the meaning on hover

Try saying

  • “Add glossary popups to the getting-started page”
  • “Explain , and on hover”
  • “Make the beginner-friendly”
  • “Which words in the docs still need an explanation?”

Needs 3.8+ for the tool. The popups run in any modern .

Install this skill

npx skills add https://sonub.com -s popup

How to use popup — the full guide Read SKILL.md

cowork

Ask every on your computer at once, then check the answers

cowork finds the AI command-line tools you have installed — , , , , , , , — sends the same question to every one that really works, , and your checks the evidence before writing one report.

  • /cowork init scans your AI tools and tests that each one really answers
  • Keeps the list in .cowork/.cowork-agents.json — run init again after you install or sign in to a tool
  • Every AI runs read-only, locked by its own sandbox or the sandbox
  • Remembers failures — sign-in, plan, usage limit, timeout — and works around them next time
  • One final-report.md: agreements, disagreements and claims proven wrong
  • If you asked for a fix, it applies the checked recommendations right after the report

Try saying

  • “/cowork init”
  • “/cowork login-timeout Why does login sometimes drop?”
  • “ this: is the chapter order of my workbook right?”
  • “Which AIs can cowork use right now?”

Works best on macOS, whose sandbox locks every AI read-only (elsewhere only Claude Code, Codex and Copilot run). Needs Perl and at least one AI you are signed in to; each AI uses your own account and plan.

Install this skill

npx skills add https://sonub.com -s cowork

Read SKILL.md

infographics

Infographics that answer, not decorate

infographics turns documents, reports and pages into pictures of the information. It analyses the source and picks the facts, then draws them — a hero picture and one matching picture per item (), and lines (curve, straight, diagonal, elbow) for relations and order — and reviews the result before it is done.

  • Starts from the source: reader, purpose, one core message and a fact list — numbers it cannot find stay gaps, never invented
  • A reading order: claim headline → summary → 3–5 key blocks → conclusion, with one hero instead of equal cards
  • Pictures and lines are required — curves for forks, routes for order, connection maps for shared parts, solid for required and dotted for optional. Tables and lists alone fail
  • Fixed type sizes, grid, spacing and one accent color
  • A poor, a text-only and a good result from the same source, side by side
  • 5-second, blur and 30-second tests, plus a check that counts pictures and lines and finds clipped, overlapping or tiny text

Try saying

  • “Make this report into an infographic”
  • “Turn our guide page into a one-glance comparison”
  • “12 application images from this business plan”
  • “This infographic looks empty — fix it”

Requires the webmovie — install it first ( add https://sonub.com -s webmovie). The browser check needs 22+ and . Images need the Codex CLI () with its image .

Install this skill

npx skills add https://sonub.com -s infographics

Read SKILL.md

linkify

A link to every place on the page

linkify makes every chapter, heading and paragraph of your site linkable. Click a heading and the address changes to page#section and is copied to the — whoever opens that link lands right on that section.

  • Click a heading or its link button — the address becomes …#section and is copied, with a “Link copied” message
  • Opening the link scrolls to the section, below the sticky header, and briefly highlights it
  • Opens closed details boxes and hidden tabs on the way
  • A drop-in linkify.js and linkify.css — no , no
  • An audit that finds headings without a fixed id, duplicate ids and broken #links
  • A check that clicks, copies and opens every link at wide and narrow widths

Try saying

  • “Add copy-link buttons to every heading of the docs”
  • “Make each FAQ answer linkable”
  • “Clicking a chapter title should copy its address”
  • “Which sections still have no fixed id?”

The links work in any modern browser. The audit needs 3.8+; the browser check needs 22+ and .

Install this skill

npx skills add https://sonub.com -s linkify

Read SKILL.md

webmovie

Movies made of

webmovie plays a promo, intro or explainer like a short video — but every scene is real HTML. Headlines, numbers, charts, images and buttons move with and a little , so read every word, the movie is translated with the rest of the page and you fix it like any other text.

  • A player that plays HTML scenes like a clip — transitions, a slow camera push, ambient light, play/pause, scene buttons and a stop at the end
  • More than 30 shots with one attribute — mask, blur, letters, words and lines, typewriter, flip, slam, bounce, highlight, counters, bars, rings, pies and line drawing
  • Without JavaScript or with reduced motion the movie is simply the page, scene after scene — a storyboard anyone can read
  • Safe in every language — Arabic and Indic letters are never torn apart, CJK are kept, RTL is mirrored and long translations take the same time
  • A drop-in webmovie.css and webmovie.js — no , no , no — and the same shots for any page section, button or hover
  • A check that finds hidden or changed text and endless motion, and saves still frames of every scene

Try saying

  • “Make a 30-second intro movie for our home page — in HTML, not a video”
  • “Turn this report into a story that plays scene by scene”
  • “Count up these numbers and grow the bars when they come into view”
  • “Add a hover effect to the start button”

The movies play in any modern browser. The check needs 22+ and .

Install this skill

npx skills add https://sonub.com -s webmovie

Read SKILL.md

Questions

What is an Agent Skill?

A folder with a file that tells an when and how to do a task, plus the scripts and notes it needs. It is an (agentskills.io), so the same folder works in many agents.

Every project or this project only?

Without -g the goes into the project you are in (for example and .agents/skills/), and you can it so your team gets it too. With -g it is installed once in your home folder for every project.

Which agents does it work with?

, , , , and the other agents the skills tool knows. It asks which agents to install for, or use -a to name one.

Is it free? Where does my data go?

Free and . The skills run on your computer with your own tools: gp talks only to through your login, claude-skill reads the public Claude Code docs, popup works on your files, cowork runs only the AI tools already installed and signed in on your computer. sonub.com only hands out the skill files.

It doesn’t show up after installing. What now?

Start a new session of your agent — it reads the skill folders when it starts. In Claude Code you can also type the skill name with a slash, for example /gp.

Teach it in class — AI course, Agent Skills chapter
Keep going