animation-vocabulary

animation-vocabulary is a skill for Claude Code, Codex from jxoesneon/Ciel. It costs 98 tokens per session (2,991 once invoked), scanned A, a copy of animation-vocabulary, Apache-2.0.

A glossary that gives precise names to motion effects from plain descriptions, such as a bouncy popover or rubber-band scrolling. It can also distinguish between similar effects.

In plain words
What is it for?
Use it to identify animation patterns and find the right words for design or development discussions.
Why use it?
It helps when you know what an animation looks like but not the term used to search for or discuss it. Naming the effect makes implementation questions more specific.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to identify animation patterns and find the right words for design or development discussions.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/jxoesneon/ciel/animation-vocabulary
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add jxoesneon/Ciel --skill animation-vocabulary
Clone the repo
git clone --depth 1 https://github.com/jxoesneon/Ciel

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for animation-vocabulary

README.md
[![agentmods](https://agentmods.dev/badge/skills/jxoesneon/ciel/animation-vocabulary/github.svg)](https://agentmods.dev/skills/jxoesneon/ciel/animation-vocabulary)
Your own site
<a href="https://agentmods.dev/skills/jxoesneon/ciel/animation-vocabulary"><img src="https://agentmods.dev/badge/skills/jxoesneon/ciel/animation-vocabulary/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for animation-vocabulary

Your own site · 80×15
<a href="https://agentmods.dev/skills/jxoesneon/ciel/animation-vocabulary"><img src="https://agentmods.dev/badge/skills/jxoesneon/ciel/animation-vocabulary.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 98 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,991 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 97% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00098 $0.02991
Opus 5.5 $0.00039 $0.01196
Sonnet 5.5 $0.00020 $0.00598
Haiku 4.5 $0.00010 $0.00299

Measured 20d ago against content hash 2043b37bd12e, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

animation-vocabulary scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 20d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

97% identical to animation-vocabulary — 38 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

skills/animation-vocabulary/SKILL.md · 204 lines

How it starts

The opening of the file, as written. The whole thing — 204 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Animation Vocabulary

Initial Response

When this skill is first invoked without a specific question, respond only with:

I'm ready to put a name to any motion effect you describe, my knowledge comes from Emil Kowalski's animation philosophy.

Do not provide any other information until the user asks a question.

Turn a vague description of a motion or effect into the precise term, so the user knows what to ask for.

Quick Start

The user describes an effect loosely. You return the matching term(s) in this format:

**Stagger** — Animate several items one after another with a small delay between each, creating a cascade.

If several terms could fit, list the best match first, then 1–2 alternates with a one-line note on how they differ.

Instructions

  1. Read for intent, not keywords. Users describe what they see or feel ("springy", "slides off", "draws itself in"), not the technical name. Map the sensation to the glossary below.
  2. Quote the glossary verbatim. Its descriptions are authoritative — use them as-is, don't paraphrase.
  3. Disambiguate close terms. When two compete (Clip-path vs Mask, Pop in vs Bounce, Shared element transition vs Layout animation), contrast them so the user can pick.
  4. When nothing matches exactly, name the closest term and say plainly it's an approximation, or describe the effect in the glossary's vocabulary (e.g. "that's a stagger of scale-in entrances").
  5. Stay within this glossary. If a term genuinely isn't here, say so rather than inventing one — though you may explain the concept using these words.
  6. Keep it tight. A naming question wants a name, not an essay. Lead with the term; expand only if asked.

Examples

Example 1 — feel-based

User: "What's it called when a popover seems to grow out of the button you clicked instead of from its middle?" Output:

**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

Read the full file on GitHub · 204 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 20d ago Changed · +18 lines 2043b37bd12e
  2. 21d ago First seen · 186 lines · 98 tokens per session scan A fc44cd0ecf5f

Subscribe to this mod's changes

animation-vocabulary is a skill published in the GitHub repository jxoesneon/Ciel (1 stars, last pushed 4d ago), licensed Apache-2.0. It adds 98 tokens to every session and 2,991 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 97% identical to animation-vocabulary, differing in 38 lines, and is treated as a copy.

Related

Other skills, from other repositories

write-guide

A workflow for turning a webinar transcript into a written guide. It includes drafting the guide and reviewing the complete text for accuracy, clarity, style, and repeated content.

mikeshu2001/content-factory · 19 tokens

franchise-brand-enforcer

Franchise consistency is a two-front war: Visuals and Voice. This agent audits local social posts or webpages, using Vision to flag stretched/outdated logos and Text Analysis to rewrite off-brand copy into your Headquarters voice.

akhilkannur/marketing-agent-blueprints · 50 tokens

brand-kit-gen

Instantly create cohesive visual identity starter kits for multiple projects. This agent generates logos, seamless background patterns, and defines color palettes for an entire portfolio of brands.

akhilkannur/marketing-agent-blueprints · 36 tokens

ad-visual-reverse-engineer

Why is the competition winning? This agent reads a folder of competitor ad screenshots, deconstructs their visual hierarchy (Headline, Image style, Trust signals), and writes a unified design brief for your team.

akhilkannur/marketing-agent-blueprints · 49 tokens

bio-link-optimizer

Choice paralysis kills sales. This agent audits your current 'Link in Bio' page (if provided) or researches high-converting layouts for your niche to suggest a prioritized structure that drives users toward your primary offer.

akhilkannur/marketing-agent-blueprints · 47 tokens

cta-button-optimizer

Generic buttons like 'Submit' kill conversion. This agent rewrites your Call-to-Action (CTA) buttons to be value-driven and suggests color/placement changes for an entire suite of landing pages.

akhilkannur/marketing-agent-blueprints · 45 tokens