animate

animate is a skill for Claude Code, Codex from lanesket/llm.log. It costs 25 tokens per session (1,749 once invoked), scanned A, a copy of animate, MIT.

A review process for adding motion to an interface, such as feedback after an action, smoother transitions, or movement that explains relationships between elements.

In plain words
What is it for?
Use it to identify useful places for animations and micro-interactions, including buttons, forms, loading states, page changes, and guidance.
Why use it?
It helps users understand state changes and know that their actions were received, while considering performance and motion sensitivity.

Skill for Claude CodeCodex

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.

agentmods
npx agentmods add skills/lanesket/llm.log/animate
Any agent
npx skills add lanesket/llm.log --skill animate
Clone the repo
git clone --depth 1 https://github.com/lanesket/llm.log

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 animate

README.md
[![agentmods](https://agentmods.dev/badge/skills/lanesket/llm.log/animate.svg)](https://agentmods.dev/skills/lanesket/llm.log/animate)
Your own site
<a href="https://agentmods.dev/skills/lanesket/llm.log/animate"><img src="https://agentmods.dev/badge/skills/lanesket/llm.log/animate.svg" alt="Measured on agentmods" height="20"></a>
Per session 25 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,749 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin 91% 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 $0.00025 $0.01749
Opus 5 $0.00013 $0.00874
Sonnet 5 $0.00005 $0.00350
Haiku 4.5 $0.00003 $0.00175

Measured 5d ago against content hash 2b4d91b01111, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

animate 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 5d 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

91% identical to animate — 14 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.

.agents/skills/animate/SKILL.md · 177 lines

How it starts

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

Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.

MANDATORY PREPARATION

Use the frontend-design skill — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. Additionally gather: performance constraints.


Assess Animation Opportunities

Analyze where motion would improve the experience:

  1. Identify static areas:

    • Missing feedback: Actions without visual acknowledgment (button clicks, form submission, etc.)
    • Jarring transitions: Instant state changes that feel abrupt (show/hide, page loads, route changes)
    • Unclear relationships: Spatial or hierarchical relationships that aren't obvious
    • Lack of delight: Functional but joyless interactions
    • Missed guidance: Opportunities to direct attention or explain behavior
  2. Understand the context:

    • What's the personality? (Playful vs serious, energetic vs calm)
    • What's the performance budget? (Mobile-first? Complex page?)
    • Who's the audience? (Motion-sensitive users? Power users who want speed?)
    • What matters most? (One hero animation vs many micro-interactions?)

If any of these are unclear from the codebase, STOP and call the AskUserQuestion tool to clarify.

CRITICAL: Respect prefers-reduced-motion. Always provide non-animated alternatives for users who need them.

Plan Animation Strategy

Create a purposeful animation plan:

  • Hero moment: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
  • Feedback layer: Which interactions need acknowledgment?
  • Transition layer: Which state changes need smoothing?
  • Delight layer: Where can we surprise and delight?

IMPORTANT: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.

Read the full file on GitHub · 177 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. 5d ago First seen · 177 lines · 25 tokens per session scan A 2b4d91b01111

Subscribe to this mod's changes

animate is a skill published in the GitHub repository lanesket/llm.log (22 stars, last pushed 5mo ago), licensed MIT. It adds 25 tokens to every session and 1,749 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. It is 91% identical to animate, differing in 14 lines, and is treated as a copy.

Related

Other skills, from other repositories

feature-spec

Creates a complete product feature specification with acceptance criteria, scope, dependencies, and risks. Delegates to the Prometeo (PM) agent.

davepoon/buildwithclaude · 32 tokens

gmgn-dev-score

Decide whether a token creator's NEXT launch is safe to buy. Scores a dev address 0-100 on two separate axes — CONDUCT (will he dump on you at open) and POWER (has he ever actually built anything big) — from his full launch history and every trade he made in his own coins, then returns a buy / don't-buy call with a…

GMGNAI/gmgn-skills · 529 tokens

decided-import

Reformat ONE existing document (a decision, requirement, design, roadmap, or prompt) into ONE valid RAC (requirements-as-code) artifact, with a mandatory human-review step before any file is written and decided validate as the deterministic close. Use when a user wants to add or import a single existing decision or…

asdecided/core · 98 tokens

remotion-create

Creating a new Remotion video.

guanyang/open-agent-hub · 10 tokens

remotion-interactivity

Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.

guanyang/open-agent-hub · 26 tokens

go-rig

Use this skill when building, reviewing, or refactoring Go code that must follow strict design discipline — ATDD/TDD workflow, explicit dependency injection, package-boundary discipline, and structured code review. Complements CLAUDE.md by focusing on process and design judgment rather than version-specific Go…

mudrii/openclaw-dashboard · 64 tokens