Copilot Animate

#devchallenge #githubchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I'm a web developer. My problem is I could not remember all CSS animations and I need to search Google whenever I need an animation to inject to my component.
As a result, My idea is using Copilot CLI to help me create an extension that integrates a set of css animation to a react component. This extension is called copilot-animate, and it does:

Show the list of CSS animation
Preview a selected animation in: terminal, web-browser.
Apply an animation in the list to an existed ReactJs Component in 2 ways: select options in CLI or just typing a command.

Demo

Link to project: https://github.com/ThienAnTran-IT/antran-copilot-cli-challenge-2026/tree/main/copilot-animate

Video of using Copilot CLI to planning the project based on my initiate idea:

https://youtu.be/Y6PfYtJGpOM

Using Copilot to support while implementing functions

https://youtu.be/oM1iSNiPgBU

Demo of showing list of CSS Animations and apply them to React component using CLI

https://youtu.be/TRmJNQBgjWo

Demo of applying an animation to a React component using command

https://youtu.be/H_gT8RGSu-0

My Experience with GitHub Copilot CLI

Wrap the idea for Copilot CLI and let it planning all stages of implementation.
Let Copilot CLI init the whole project: create project structure, create files and folders, setup all basic libraries/frameworks and scripts for running it the first time (Copilot CLI also keep validating all the things to make sure it's working)
Get support from copilot from repeatative works that requires me to search Google multiple times like generating CSS files with different animation styles.