TastefulKit 0 views · 24h
← AI skills

CSS Animation Walkthrough — neonwatty

Creates app-feature walkthroughs as self-contained HTML/CSS animations: researches an accessible app in Chrome, captures a brief, generates a feature demo or carousel, and iterates through key-state visual review.

motion-designonboardinghtml-cssdesign-tools
View skill source ↗ Repository ↗

17 GitHub stars (repository-wide; checked Oct 23, 2026)

skills.sh installs: not checked View on skills.sh

When to use it

Use for onboarding demos or feature explainers matched to an existing app. Requires Claude Code, Claude-in-Chrome MCP tools and browser access to the target app; authenticated apps require user login. Produces HTML/CSS with minimal JavaScript, not a GIF/video export or a production interaction library. Output may load Google Fonts; review responsive behavior, reduced-motion handling and accessibility before publishing. Not runtime-tested.

Compatible agents

Claude Code

Installation

Clone https://github.com/neonwatty/css-animation-skill. From its checkout, follow README.md: `mkdir -p ~/.claude/skills/css-animation` and `cp SKILL.md ~/.claude/skills/css-animation/SKILL.md`. Configure Claude-in-Chrome MCP tools, make the target app browser-accessible, then ask Claude Code to create a CSS walkthrough.

Review the source and instructions before installing in your agent.

License

MIT

Last checked Oct 23, 2026.

Pair this skill with a visual reference

A skill guides how your agent works; a design reference shows the direction you want. Choose an example for a specific job, such as the headline hierarchy or form layout, and keep your project's existing design rules explicit.

Start with design references you can inspect, then use our guide to briefing an AI coding agent to turn observations into requirements. If you need implementation components, compare UI libraries for your stack.

These pages are public. Browsing a skill does not install it, and TastefulKit's design-reference MCP tools do not search the AI-skill directory.