Skip to content
Get packs

Animated GitHub Profile

Guides an agent to build animated, theme-aware SVG/CSS profile READMEs for GitHub

Source Download skill
Repository
sickn33/agentic-awesome-skills
Stars
49,023
Licence
MIT
Files
1 file

What it does

This skill gives an AI agent a detailed playbook for designing an animated GitHub profile README. Because GitHub strips JavaScript from profile READMEs, the agent is taught to build the visuals from self-contained SVG files that use CSS keyframes and SMIL animation, with separate dark and light versions. The skill covers layout modules such as a hero banner, a swinging ID badge, orbiting tech icons, and contribution graphs generated by GitHub Actions.

Great for

  • Developers who want a visually distinctive GitHub profile README
  • Designers prototyping animated SVG profile graphics
  • Students learning how SVG and CSS animation work inside Markdown

Skip it if

  • Users who need a plain, fast-loading profile with no animation, since the guide assumes heavy visual effects
  • People expecting finished images: the skill describes how to generate assets but does not ship any SVG files
  • Anyone who wants to publish AI-generated character art of a real person without checking the image rights and identity implications

Try asking

  • “Create an animated dark and light hero banner for my GitHub profile README”
  • “Build a swinging lanyard ID badge SVG with my name and role”
  • “Set up a GitHub Action that generates a contribution snake animation for my profile”
  • “Write a README layout that stacks a hero banner, tech orbit and project list”
Step-by-step guide: how to use Animated GitHub ProfileInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    animated-github-profile.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip animated-github-profile.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip animated-github-profile.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Test each generated SVG in a real GitHub README preview, because rendering and caching vary by browser and context
  • Keep the animations modest so the profile stays readable and loads quickly
  • Review any generated GitHub Actions workflow before enabling it, since it will run with repository permissions

What's inside

  • SKILL.md

Redistributed unmodified from sickn33/agentic-awesome-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.