animation-vocabulary

animation-vocabulary is a skill for Claude Code from stvlynn/dsh.fish. It costs 98 tokens per session (2,905 once invoked), scanned A, a copy of animation-vocabulary, MIT.

A glossary that identifies the name of a web animation from a plain description of how it looks or feels.

In plain words
What is it for?
Naming effects such as a bouncy popover opening, rubber-band scrolling, staggered entrances, masks, and shared-element transitions.
Why use it?
It gives developers the precise term for an effect when they know what they want to see but not what to call it.

Skill for Claude Code

Written for Claude Code: installed under .claude/.

Good fit Naming effects such as a bouncy popover opening, rubber-band scrolling, staggered entrances, masks, and shared-element transitions.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/stvlynn/dsh.fish/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 stvlynn/dsh.fish --skill animation-vocabulary
Clone the repo
git clone --depth 1 https://github.com/stvlynn/dsh.fish

Made for: Claude Code.

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/stvlynn/dsh.fish/animation-vocabulary/github.svg)](https://agentmods.dev/skills/stvlynn/dsh.fish/animation-vocabulary)
Your own site
<a href="https://agentmods.dev/skills/stvlynn/dsh.fish/animation-vocabulary"><img src="https://agentmods.dev/badge/skills/stvlynn/dsh.fish/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/stvlynn/dsh.fish/animation-vocabulary"><img src="https://agentmods.dev/badge/skills/stvlynn/dsh.fish/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,905 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 100% 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.02905
Opus 5 $0.00049 $0.01452
Sonnet 5 $0.00020 $0.00581
Haiku 4.5 $0.00010 $0.00291

Measured 12d ago against content hash d718b48fe3c7, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, 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 12d 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

100% identical to animation-vocabulary — 0 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.

.claude/skills/animation-vocabulary/SKILL.md · 174 lines

How it starts

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

Animation Vocabulary

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.

Example 2 — disambiguation User: "The thing where one image turns into another image." Output:

**Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.

Close alternates:
- **Crossfade** — if they simply fade over each other in the same spot.
- **Shared element transition** — if an element travels and transforms from one position into another.

Read the full file on GitHub · 174 lines

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. 12d ago First seen · 174 lines · 98 tokens per session scan A d718b48fe3c7

Subscribe to this mod's changes

animation-vocabulary is a skill published in the GitHub repository stvlynn/dsh.fish (2 stars, last pushed today), licensed MIT. It adds 98 tokens to every session and 2,905 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to animation-vocabulary, differing in 0 lines, and is treated as a copy.

Related

Other skills, from other repositories

dsh-web-skin-developer

Build a new skin for the dsh-web skin collection (DSH Web GUI) and publish it into the Skin Center — the first-level settings section — scaffold with scripts/dsh-skin-new, author the v2 skin.json manifest plus skin.css token remap (pure asset directory, no package.json, no build step), validate with scripts/dsh-skin…

zhu1090093659/dsh-web · 120 tokens

figma-implement-motion

Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when getdesigncontext returns motion…

Devin-AXIS/iPolloWork · 81 tokens

shadcn

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for…

Devin-AXIS/iPolloWork · 90 tokens

skin-studio

A production guide for creating skins, or visual themes, for the DSH launcher and its main interface. It covers design variables, tokens, templates, background placeholders, and the skinstudio tool.

WZZNNE/DSH-CyberWorkStation · 56 tokens

design-taste-frontend

A frontend-design skill for creating distinctive landing pages, portfolios, and redesigns. It first infers the desired visual character and then proposes a design direction and rules.

xiehuan123/coding-coach · 79 tokens

frontend-design-system

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling. Use when generating or auditing a design system, checking visual consistency, or reviewing a PR that touches styling.

gongyijie85/dsh-ecc · 47 tokens