CSS Animation

Generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Researches the target app via Chrome, interviews the user, generates a structured brief and animation HTML file, then enters an iterative freeze-inspect-feedback review loop until the user approves. Use when the user says "css animation", "animate this feature", "create a css walkthrough", "animation walkthrough", or wants to create a CSS-based visual demo of an app feature.

18 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add neonwatty/css-animation-skill --skill css-animation

Manual install

git clone --depth 1 https://github.com/neonwatty/css-animation-skill.git /tmp/css-animation-skill
mkdir -p ~/.claude/skills
cp -r /tmp/css-animation-skill/. ~/.claude/skills/css-animation

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# CSS Animation Walkthrough Skill

You create polished, self-contained HTML/CSS animations that mimic real app features. These are used for walkthroughs, onboarding demos, and marketing. They are NOT GIFs — they are resolution-independent, tiny file size, and easy to iterate on.

## Two Animation Styles

1. **Feature Demo** — Before → Action → After. Shows a single feature transformation (e.g., clicking "Optimize" and watching seats rearrange).
2. **Carousel** — Multi-view. Cycles through several app screens with cross-fade transitions (e.g., Dashboard → Guest List → Canvas → RSVPs).

Determine which style the user needs during the Interview phase.

## Phases

```
Phase 1: Research → Phase 2: Interview → Phase 3: Generate → Phase 4: Review Loop
```

---

## Phase 1: Research

Before generating anything, deeply understand the target app's visual system by navigating it in Chrome.

### Prerequisites
- Claude-in-Chrome MCP tools must be available
- The target app must be accessible in a browser (running locally or deployed)

### Step 1: Set up Chrome
1. Call `tabs_context_mcp` to check existing tabs
2. Create a new dedicated tab: `tabs_create_mcp`
3. Store this tab ID — use it exclusively for all subsequent browser operations

### Step 2: Navigate and explore
1. Navigate to the target app URL
2. If auth is required, ask the user to log in manually, then resume

Read the full skill on GitHub

Details

Skill name: css-animation
Repository: neonwatty/css-animation-skill
License: MIT
Repo updated: 19 October 2026

FAQ

What does the CSS Animation skill do?

How do I install the CSS Animation skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add neonwatty/css-animation-skill --skill css-animation. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is CSS Animation popular?

It lives in neonwatty/css-animation-skill, which has 18 GitHub stars and 0 forks.

Related skills

Itqan

saleh-alhaddad/itqan-engineering

The full software-engineering lifecycle as one suite — DISCOVER, DEFINE, PLAN, BUILD, VERIFY, REVIEW, SHIP — with approval gates before code, test-first builds, evidence before "done", and resumable multi-session work. Routes to 12 sub-skills covering any stack, plus feature discovery, security audit, UI/UX craft, and learning roadmaps.

Frontend & DesignIn 1 list

Build for Good UX

alper-dev/build-for-good-ux-skill

Audit, build, or refactor frontend UI components, pages, forms, and interactive flows to implement complete UX states (loading, success, error, empty), resilient async degradation, accessible button interactions, error recovery, Fitts's Law mobile touch targets, and choice simplification. Use when creating or reviewing user-facing interfaces, form validations, multi-section dashboards, checkout flows, or gesture-sensitive mobile screens.

Frontend & Design

Pixel Perfect Web Replica

Core-Mate/Pixel-Perfect-Web-Replica

Recreate public frontend pages locally with high visual fidelity. Use when the user asks Codex or Claude Code to pixel-perfect clone, mirror, study, sandbox, reproduce, or locally run a public website/page; capture its static assets; preserve layout, scroll animations, media, typography, and interactions; compare screenshots; and list replaceable resources for rebranding or customization.

Frontend & Design

Design Engine

rahamanbinujit/claude-design-engine

End-to-end AI design system with 190+ battle-tested styles, AI image generation, and pixel-perfect export. Designs social media posters, carousels, YouTube thumbnails, PDFs, and full websites — entirely from natural language. Includes brand onboarding, self-review quality system, Puppeteer export scripts, and 6 teachable design skills. Built through 300+ real design experiments. Use this skill when the user asks to: design a poster, create social media content, build a carousel, make a YouTube thumbnail, generate a PDF/report, design a website or landing page, create any visual content, or imp

Frontend & Design

Audhd UI Guide

Greyland-Fireworks/audhd-ui-guide

Design, review or improve UI and UX using AuDHD-friendly interaction rules, accessible selectable appearance and verifiable workflow continuity. Use when the user says "audhd audit", or for dashboard organization, settings forms, status feedback, accessible controls and interruption recovery; not clinical advice or certification.

Frontend & Design

Work Canvas

JingbiaoMei/work-canvas-skill

Turn an agent's own work — progress, debugging, analysis, comparisons, decisions — into one self-contained, reviewable HTML page (a "work canvas" / 网页看板) the user opens in a browser. Use when the user asks to create an interactive, reviewable, "alignment", progress, status, comparison, or summary HTML / dashboard / report / 看板 to see where a long task stands, review and comment, compare options, or decide next steps — especially for long-running, multi-subsystem, or trial-and-error tasks where terminal logs are the wrong medium. Also use to close out a `/goal` command session with a progress/s

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.