106.9K+Download
Skip to the usage guide
CSS Animationby neonwatty

CSS Animation Skill.

Create HTML/CSS feature walkthroughs based on a real application's interface.

  • CSS
  • Keyframes
Download OpenDesignView Usage Guide
Source Review · css-animationSKILL.md
Task Create HTML/CSS feature walkthroughs based on a real application's interface. Produces A structured brief recording design tokens, geometry and scene timing. Before You Start The upstream workflow expects Claude-in-Chrome and an accessible app. Another host needs an equivalent inspection route or must state the missing evidence.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Create HTML/CSS feature walkthroughs based on a real application's interface

Research an app, write a feature-demo brief and build HTML/CSS walkthroughs with separate desktop/mobile layouts and frozen-state review.

Source-based workflowNot an execution benchmark

The Working Approach

css-animation creates browser-based demonstrations of real application features. It first researches the app's visual language and layout, then plans either a before-action-after demonstration or a carousel of screens. The output is a self-contained HTML/CSS animation accompanied by a brief.

Its review process separates still-state correctness from timing. The before and after layouts are frozen and inspected, then the complete loop is played to tune pacing. Desktop and mobile are separate compositions; the mobile route simplifies the scene and replaces a cursor with a tap indicator.

Expected Deliverables

  • A structured brief recording design tokens, geometry and scene timing.
  • A self-contained HTML feature demo or screen carousel.
  • Separate desktop and mobile files when both are requested.
See the Example Brief

From Brief to Review

  1. 01
    Research the real interface

    Inspect the accessible app and its relevant states. Record colors, type, spacing and actual geometry at the intended viewport.

  2. 02
    Plan and build the demonstration

    Choose a single feature transformation or multi-screen carousel. Write the brief, calculate element positions and use CSS with small class-based loop control.

  3. 03
    Inspect stills, then timing

    Freeze important states to check layout and labels. After those are correct, play the complete loop and adjust the specific phase that is too fast or slow.

02 When to Use It

When to Use It

The upstream workflow expects Claude-in-Chrome and an accessible app. Another host needs an equivalent inspection route or must state the missing evidence.

A Good Fit

  • A real feature needs a marketing demoThe workflow derives the visual language from the application rather than inventing a generic interface.
  • Mobile needs a focused explanationThe source explicitly simplifies the layout rather than scaling down the desktop scene.

Limits to Check

  • Research assumes browser toolsThe upstream workflow expects Claude-in-Chrome and an accessible app. Another host needs an equivalent inspection route or must state the missing evidence.
  • HTML is the primary artifactThe documented output is a web animation, not an encoded GIF or MP4.
  • The brief is a review pointThe source asks for brief approval before generation; existing user authorization and local workflow still determine how that review is handled.

Bring These Inputs

  • App accessProvide the feature URL or local preview and access to the necessary states.
  • Feature storyIdentify the initial condition, action and useful visible result.
  • Viewport and destinationSpecify desktop, mobile or both, plus where the files will be used.

03 Decisions That Matter

Decisions That Matter

  1. App-specific appearance

    Measured colors, type and geometry make the demo recognizable.

  2. Reproducible revision

    The brief records the layout and timing decisions alongside the HTML.

  3. Separated review problems

    Frozen states reveal layout defects while playback exposes pacing issues.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Provide the feature URL or local preview and access to the necessary states.

Upstream Source File
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use css-animation to demonstrate the grouping feature in my locally running planning app. Inspect the actual feature before drafting a before-action-after animation: ungrouped items, the user action, then the organized result. Match the app's colors and typography and preserve the real labels. Create a desktop brief and a separate mobile composition focused on the core action. Use a tap indicator on mobile. Review the frozen initial, processing and final states before tuning the full loop. Deliver the brief and HTML files, and state any app behavior you could not inspect.

Inspect the Result

Check the actual output against these observable criteria.

  • Compare frozen layouts and labels with the actual application.
  • Test content bounds in desktop and mobile compositions independently.
  • Watch the entire loop after state-level fixes to evaluate pacing.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
neonwatty
Repository
neonwatty/css-animation-skill
Skill File
SKILL.md
License
MIT
Reviewed Snapshot
2026-11-02 · 68580a34101c
Editorial Source Summary
Create HTML/CSS feature walkthroughs based on a real application's interface.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Is the deliverable a video?

The source's primary artifact is standalone HTML/CSS with minimal JavaScript. Encoding a video is outside that documented default.

Can desktop and mobile share one scaled layout?

The source recommends separate files and purposeful mobile simplification, including fewer elements and touch-oriented action indicators.

What if the app cannot be inspected?

The upstream instructions disclose the browser-tool gap and can proceed from a user's description. Such a result should not claim observed fidelity to an inaccessible app.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md