beautify-github-readme

Redesign GitHub READMEs and generate SVG, PNG, and GIF visual assets.

8|4|Updated Jul 1, 2026
One-click install
npx skills add https://github.com/YuShenLiu06/PCHSystem --skill beautify-github-readme-yushenliu06
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: beautify-github-readme
Source: https://github.com/YuShenLiu06/PCHSystem/tree/main/.claude/skills/beautify-github-readme
Command: npx skills add https://github.com/YuShenLiu06/PCHSystem --skill beautify-github-readme-yushenliu06

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow, ffmpeg, rsvg-convert, and includes scripts (resource) and references (resource) components.

What problem does it solve? GitHub READMEs often fail to communicate a project's value on the first screen, mixing weak visual hierarchy, generic decoration, and unsupported claims. This Skill restructures README content and produces project-native visual assets that work within GitHub's rendering constraints. ## Core Features & Use Cases - Whole-README redesign: Restructure information order (value, proof, mechanism, first use) and build a cohesive visual system derived from the repository's own identity. - Asset-only creation: Produce heroes, section headers, diagrams, badges, and showcase boards as deterministic SVG, hybrid SVG-composed PNG/WebP, or opt-in GitHub-safe animated GIFs. - Validation tooling: Audit README image references and SVG compatibility with a bundled script, and render motion GIFs from SVG layers via a JSON motion spec. - Use Case: A maintainer asks to beautify a repository homepage; the Skill inspects the repo, confirms scope and implementation (pure SVG vs hybrid), then delivers a hero and section headers with rendered previews before any commit. ## Quick Start Use $beautify-github-readme to redesign my repository's README, asking me first whether I want a whole-README redesign or asset-only visuals.

Frequently Asked Questions about beautify-github-readme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I redesign a GitHub README with SVG assets?

Invoke the Skill and specify whether you want a whole-README redesign or asset-only work. It inspects your repository, extracts the project story, defines a theme-specific visual system, then produces SVG heroes and section headers with rendered previews before any changes are committed.

What image formats work best for GitHub README visuals?

SVG works best for typography, diagrams, and deterministic layouts because it scales cleanly. Use PNG or WebP for screenshots and generated art, and GIF only for approved motion since GitHub does not play animation embedded inside SVG.

Can I create an animated GIF hero for my GitHub README?

Yes, but GIF output is opt-in and never the default. The Skill keeps a static SVG as the editable source, then uses the bundled render_motion_gif.py script with a JSON motion spec to produce a compact, GitHub-safe animated GIF.

Why does my SVG not animate when embedded in a GitHub README?

GitHub strips animation, scripts, and foreignObject from embedded SVG files. To show motion, render a GIF from the SVG source and embed that instead, keeping the static SVG as a fallback.

What are the limitations of SVG in GitHub README files?

GitHub sanitizes SVG by removing scripts, foreignObject, remote fonts, and external image references. Text also scales down at GitHub's content width, so essential labels should stay at least 20 SVG units in a 1200-unit viewBox.