Skip to content
Get packs

Guide · Agent skill

How to use the Animated GitHub Profile agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The animated-github-profile skill is a set of written instructions that an AI coding assistant reads so it can design an animated GitHub profile README. GitHub strips JavaScript from profile READMEs, so the skill teaches the agent to build the motion from standalone SVG files using CSS keyframes and SMIL animation, with separate dark and light versions. This guide explains what the skill does, how to install it, how to ask for help with natural requests, and what to check before you publish.

Animated GitHub Profilesickn33/agentic-awesome-skills · MIT

Quick start

  1. 1Download and unzip the skill. Download the ZIP from this page and extract the animated-github-profile folder.
  2. 2Place the folder. Copy it to ~/.claude/skills/ for all projects, or to .claude/skills/ inside one project. Alternatively, upload it under Settings → Capabilities → Skills in the Claude apps.
  3. 3Open your profile repository. Work in the repository named username/username so the README renders on your profile.
  4. 4Ask for a module. Describe the module in plain language, for example a hero banner with dark and light versions.
  5. 5Review the generated SVG. Open the files in a browser and check the animation and colours in both themes.
  6. 6Commit and check the README. Add the files to the repository and view the profile on GitHub to confirm the animations render.

What are agent skills, and what does this one do?

An agent skill is a folder containing a SKILL.md file. When you install it, your AI assistant can load those instructions when a request matches the skill's description. This skill is for designing and generating an animated profile README in your repository named username/username.

  • Hero banner with a dark version and a light version, switched with a picture element
  • A swinging lanyard ID badge with a damped pendulum swing and a holographic glare
  • A tech orbit graphic with satellites circling a central core
  • Local stat cards and an automated contribution graph built with GitHub Actions

How do you install the animated-github-profile skill?

Download the skill ZIP from this page and unzip it. For Claude Code, place the skill folder in ~/.claude/skills/ to make it available everywhere, or in a project's .claude/skills/ folder to limit it to that project.

In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

  • Personal install: ~/.claude/skills/animated-github-profile/
  • Project install: .claude/skills/animated-github-profile/ inside your project

How do you trigger the skill with a natural request?

You do not need a special command. Describe the profile you want in plain language, and mention the README or the animation. The skill is most useful when the request is about designing or generating the profile graphics.

  • Make an animated GitHub profile README with a swinging ID badge and dark and light mode.
  • Design a hero banner SVG for my username/username profile repo.
  • Create a tech orbit SVG showing Python, Docker and TypeScript as satellites.
  • Set up a GitHub Actions workflow that regenerates my contribution snake every day.

What does the agent produce?

The skill describes a layout of six modules stacked in README.md: a hero banner, a lanyard and tech orbit side by side, a projects section written in Markdown, a contribution visualizer, and a badge and links section. The agent is guided to produce files such as banner.svg, banner-light.svg, lanyard.svg and stack.svg, plus a GitHub Actions workflow at .github/workflows/snake.yml.

The skill does not ship any finished SVG files. You get instructions and prompts that the agent uses to generate the assets.

name: Generate Snake Contribution Animation

What do you need before you start?

You need an AI coding assistant such as Claude, Cursor or Gemini, and a GitHub account with a profile repository named username/username. An AI image generator for avatar art is optional, as is GitHub Actions for automated contribution graphs.

The skill runs no scripts and uses no network access of its own. It is a set of instructions, so the generated files still have to be committed to your repository by you.

  • AI coding assistant (Claude, Cursor or Gemini)
  • GitHub profile repository named username/username
  • Optional: AI image generator for avatar art
  • Optional: GitHub Actions for contribution graphs

What safety and privacy points should you check?

GitHub sanitizes Markdown and removes script tags and iframes, so the skill avoids JavaScript and relies on SVG and CSS. Treat generated avatar art carefully: the skill's own guidance warns against publishing AI-generated character art of a real person without checking image rights and identity implications.

The contribution workflow is set to run on a daily schedule, on manual trigger and on pushes to main, and it requests contents: write permission. Read the workflow before you enable it.

  • Check image rights before publishing any character or likeness
  • Review the snake.yml workflow and its write permission before running it
  • Test rendering and caching, since the skill notes behaviour still needs testing

What tips help the result look right?

Generate three or four avatar variations and pick the one with the cleanest edges and clearest face crop for the lanyard badge. Ask for both the dark and light versions of each banner so the picture element can switch them.

The skill favours self-contained SVG committed to your repository over live third-party generators, which can fail when API rate limits are hit. Still, check how the images render on GitHub before you rely on them.

  • Start with the hero banner, then add one module at a time
  • Keep the light and dark palettes in matching files

What people use it for

  • Designing an animated hero banner with a typing terminal prompt and a shimmering name
  • Creating a swinging lanyard ID badge graphic for a developer profile
  • Building a tech orbit graphic that shows your main stack as orbiting satellites
  • Setting up a daily GitHub Actions workflow to regenerate a contribution snake graphic

Frequently asked questions

Is the animated-github-profile skill free?

The skill is published under the MIT licence, as stated on this page. Check the licence file in the source repository for the full terms.

What do I need to use this skill?

You need an AI coding assistant such as Claude, Cursor or Gemini and a GitHub account with a profile repository named username/username. An AI image generator and GitHub Actions are optional.

Why can't the profile use JavaScript animation?

GitHub sanitizes profile Markdown and strips script tags, inline JavaScript and iframes. The skill therefore uses pure SVG with CSS keyframes and SMIL animation.

Does the skill include ready-made SVG files?

No. The skill describes how to generate the SVG assets with an AI assistant. It does not ship finished images.

Where do I put the skill folder?

For Claude Code, use ~/.claude/skills/ for personal use or .claude/skills/ inside a project. In the Claude apps, you can upload it under Settings → Capabilities → Skills.

Does the skill run scripts or use the network?

According to this page, the skill runs no scripts and uses no network access. The optional contribution workflow is a separate GitHub Actions file that you choose to add.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

This skill suits developers, designers and students who want a visually distinctive GitHub profile README built from SVG and CSS animation. Skip it if you need a plain, fast-loading profile or finished image files, since it only provides generation instructions.

Download the skill