Animation

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

Security Scan

This is an offline CLI skill that generates CSS/SVG animation snippets and stores them locally; its files, commands, and data access are consistent with that purpose and it does not request credentials or perform network operations.

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

Assessment

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.

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 <command> [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 <svg> + <animate> / <animateTransform> structure.

---

Powered by BytesAgain | bytesagain.com | [e-mail]