Animated GitHub Profile Skill

Animated GitHub Profile Skill guides the design, generation, and deployment of a profile README built around standalone SVG assets. It works within GitHub's Markdown sanitization: JavaScript libraries, inline scripts, event listeners, and iframes cannot provide normal web interactions there. CSS keyframes and SMIL supply motion, with browser and image-context support requiring testing. Committing self-contained SVGs avoids a live dependency on an external status generator, while leaving rendering and caching to verify.

The proposed layout combines a theme-adaptive hero banner, swinging lanyard badge, technology orbit, featured projects, contribution visualization, and contact links. The hero specification includes a terminal greeting, gradient name, cycling roles, simulated code editor, blinking cursor, scanline, and ambient orbs. Separate dark and light banners provide contrasting palettes. The lanyard combines an avatar, barcode, metadata, pendulum motion, and holographic glare; the orbit uses three elliptical paths, independently moving technology satellites, and a capability matrix.

Use it when creating or revamping the username-matching profile repository, designing dark/light variants, or automating contribution graphics. It provides design specifications and prompts rather than bundled working SVG assets. It does not enable interactive games or arbitrary DOM manipulation inside a README. Complex filters and deeply nested animation loops can increase mobile CPU and battery use, so the design needs rendering checks beyond a locally opened file.

Start with character artwork on a white or transparent background, selecting clean edges and a suitable facial crop. The guide proposes three or four image variations. Its core deliverables are banner.svg, banner-light.svg, lanyard.svg, stack.svg, and the assembled README.md. Suggested dimensions are a 1200 by 480 hero and a 680 by 380 technology orbit. The lanyard uses this CSS keyframe sequence:

    @keyframes lanyardSwing {
      0%   { transform: rotate(11deg); }
      15%  { transform: rotate(-8deg); }
      30%  { transform: rotate(5.5deg); }
      45%  { transform: rotate(-3.5deg); }
      60%  { transform: rotate(2deg); }
      75%  { transform: rotate(-1deg); }
      100% { transform: rotate(0deg); }
    }

Embed portraits as PNG rather than Base64 WebP for the documented Safari compatibility concern. Escape XML entities or use CDATA for style content; XML comments cannot contain double hyphens. Give text-reveal clipping paths generous vertical padding to avoid clipping descenders across operating systems. Namespace gradients and other IDs per file, especially when SVGs share an inline document.

Build a complete readable static state and descriptive alt text. Reduced-motion CSS must disable CSS animation explicitly, while SMIL needs its own static fallback or version. Validate XML, both themes, links, and the hosted README image path. Publish changed SVGs before bumping README image query versions such as ?v=1 to ?v=2 to address cached images.

GitHub Actions examples regenerate either a Platane/snk contribution snake or a yoshi389111/github-profile-3d-contrib cityscape on daily schedules. The snake workflow publishes generated files to an output branch; the city example pushes to its current branch and may encounter branch protection. Review pinned third-party actions and output paths, limit contents: write permissions to authorized generation, and use an approved branch or pull-request workflow without weakening protections. Keep private tokens and email addresses out of public SVG configurations, and use only truthful employment, clearance, and contribution claims.