← 返回 Skills 市场

Animation

Name: Animation
Author: ckchzh

作者 BytesAgain2 · GitHub ↗ · v1.0.0 · MIT-0

cross-platform ✓ 安全检测通过

335

总下载

当前安装

版本数

在 OpenClaw 中安装

/install animation

功能描述

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

使用说明 (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.

安全使用建议

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.

功能分析

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.

能力评估

✓ 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).

如何使用

确保已安装 OpenClaw（本地或 Docker 部署）
在对话框中输入安装命令：/install animation
安装完成后，直接呼叫该 Skill 的名称或使用 /animation 触发
根据 Skill 的参数说明提供必要输入，即可获得结构化输出

版本历史

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+.

元数据

Slug animation

版本 1.0.0

许可证 MIT-0

累计安装 2

当前安装数 2

历史版本数 1

常见问题

Animation 是什么？

Generate CSS and SVG animation code snippets using bash and Python. Use when building UI animations, keyframes, or transition effects. 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 335 次。

如何安装 Animation？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install animation」即可一键安装，无需额外配置。

Animation 是免费的吗？

是的，Animation 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。

Animation 支持哪些平台？

Animation 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 Animation？

由 BytesAgain2（@ckchzh）开发并维护，当前版本 v1.0.0。