← Back to Skills Marketplace

Animation

Name: Animation
Author: ckchzh

by BytesAgain2 · GitHub ↗ · v1.0.0 · MIT-0

cross-platform ✓ Security Clean

335

Downloads

Stars

Active Installs

Versions

Install in OpenClaw

/install animation

Description

Generate CSS and SVG animation code snippets using bash and Python. Use when building UI animations, keyframes, or transition effects.

README (SKILL.md)

Animation — CSS/SVG Animation Code Generator

Generate production-ready CSS keyframe animations, SVG motion paths, transitions, and easing functions from the command line. Animations are stored locally in JSONL format for reuse, chaining, and export.

Prerequisites

Python 3.6+
Bash 4+

Data Storage

All animation records are persisted to ~/.animation/data.jsonl. Each record is a JSON object with fields like id, name, type, code, created_at, etc.

Commands

Run via: bash scripts/script.sh \x3Ccommand> [options]

Command	Description
`create`	Create a new CSS or SVG animation definition
`keyframe`	Generate a `@keyframes` block with named steps
`transition`	Generate a CSS transition shorthand snippet
`timing`	Show or set timing-function values for an animation
`easing`	List built-in easing curves or define a custom cubic-bezier
`sequence`	Build a multi-step animation sequence from existing entries
`loop`	Set loop/iteration count for an animation
`chain`	Chain two or more animations with configurable delays
`export`	Export one or all animations as a `.css` / `.svg` file
`preview`	Generate an HTML preview page for a given animation
`list`	List all stored animations
`help`	Show usage information
`version`	Print the tool version

Usage Examples

# Create a fade-in animation
bash scripts/script.sh create --name fadeIn --type css --property opacity --from 0 --to 1 --duration 0.5s

# Generate keyframes
bash scripts/script.sh keyframe --name bounce --steps '0%:translateY(0);50%:translateY(-20px);100%:translateY(0)'

# Create a transition
bash scripts/script.sh transition --property transform --duration 0.3s --easing ease-in-out

# List all saved animations
bash scripts/script.sh list

# Preview an animation in HTML
bash scripts/script.sh preview --name fadeIn

# Export animations to a CSS file
bash scripts/script.sh export --name fadeIn --format css --output animations.css

# Chain two animations
bash scripts/script.sh chain --names fadeIn,bounce --delay 0.2s

# Show available easing functions
bash scripts/script.sh easing --list

# Set loop count
bash scripts/script.sh loop --name bounce --count infinite

# Build a multi-step sequence
bash scripts/script.sh sequence --names fadeIn,bounce --mode sequential

Output Format

All commands output to stdout. Structured data is returned as JSON. Generated code is printed as raw CSS or SVG text suitable for copy-paste or piping.

Notes

Animation IDs are auto-generated UUIDs.
The preview command creates a self-contained HTML file that can be opened in any browser.
chain and sequence reference animations by name; they must exist in the data store.
export --format svg wraps animations in an \x3Csvg> + \x3Canimate> / \x3CanimateTransform> structure.

Usage Guidance

This skill appears to do what it says: generate and store animation snippets locally. Before installing or running it: (1) be aware it writes to ~/.animation/data.jsonl — back up any file with the same name if you care about collisions; (2) preview/export create HTML/CSS/SVG files that may contain user-provided content — do not open preview files from untrusted sources without inspection; (3) there are minor implementation inconsistencies (some commands rely on ARGS but aren’t always set) that may cause commands to behave unexpectedly — test in a safe environment first; (4) the tool does not request credentials or talk to the network in the provided code, so its privileges are limited to your home directory.

Capability Analysis

Type: OpenClaw Skill Name: animation Version: 1.0.0 The animation skill bundle is a tool for generating and managing CSS/SVG animation snippets. It stores animation data locally in `~/.animation/data.jsonl` and provides commands to create, chain, and export animations to CSS or SVG files. While the `scripts/script.sh` file contains several functional bugs (such as incorrect argument shifting and missing environment variable exports in the `create` command) and allows arbitrary file writes via the `--output` parameter in the `export` and `preview` commands, these appear to be unintentional implementation flaws or standard features rather than evidence of malicious intent. There are no indicators of data exfiltration, unauthorized remote execution, or persistence mechanisms.

Capability Assessment

✓ Purpose & Capability

The name/description (CSS/SVG animation generator) matches the included files: an instruction SKILL.md and a bash script that invokes embedded Python to create keyframes, transitions, sequences, previews, and stores records in ~/.animation/data.jsonl. No unrelated credentials, binaries, or install steps are requested.

ℹ Instruction Scope

The runtime instructions and the script operate only on a local data file (~/.animation/data.jsonl) and produce output to stdout or files (preview/export). Two notes: (1) the preview/export features produce HTML/CSS/SVG files that may include user-supplied content (expected for a preview tool) — opening those files in a browser could expose XSS if you feed untrusted inputs; (2) the script uses an ARGS environment variable to pass options into embedded Python in many command handlers, but some branches (e.g., create and timing) do not set ARGS before invoking Python, which is an implementation bug/inconsistency rather than a security issue.

✓ Install Mechanism

There is no install spec; the skill is instruction-only with a single script. Nothing is downloaded or written outside the user's home directory except the skill files themselves, so install risk is low.

✓ Credentials

The skill declares no required environment variables or credentials. The script allows overriding the data file via DATA_FILE env var (reasonable for a CLI utility). There are no requests for secrets or unrelated service tokens.

✓ Persistence & Privilege

The skill persists its own data under ~/.animation and does not attempt to modify other skills, system-wide agent settings, or require always-on privilege. It does rewrite the data file when updating records (normal for a local datastore).

How to Use

Make sure OpenClaw is installed (local or Docker)
Run the install command in chat: /install animation
After installation, invoke the skill by name or use /animation
Provide required inputs per the skill's parameter spec and get structured output

Version History

v1.0.0

Initial release of the animation skill — generate CSS/SVG animation code from the command line. - Supports creating production-ready CSS keyframes, transitions, motion paths, and easing functions. - Stores all animation definitions locally for reuse, chaining, sequencing, and export. - Includes commands for building, exporting, previewing, and listing animations. - Outputs code as JSON, raw CSS/SVG, or HTML previews. - Runs on Python 3.6+ and Bash 4+.

Metadata

Slug animation

Version 1.0.0

License MIT-0

All-time Installs 2

Active Installs 2

Total Versions 1

Frequently Asked Questions

What is Animation?

Generate CSS and SVG animation code snippets using bash and Python. Use when building UI animations, keyframes, or transition effects. It is an AI Agent Skill for Claude Code / OpenClaw, with 335 downloads so far.

How do I install Animation?

Run "/install animation" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Animation free?

Yes, Animation is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Animation support?

Animation is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Animation?

It is built and maintained by BytesAgain2 (@ckchzh); the current version is v1.0.0.

More Skills