⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
beautify-github-readme
Redesign GitHub README homepages or create project-native pure SVG, hybrid SVG-composed PNG/WebP, and opt-in animated GIF assets. Use when a user asks to beautify, redesign, rebrand, visually upgrade, simplify, or audit a GitHub README; create only a hero, section headers, diagrams, badges, motion graphics, showcase modules, or other README assets; or turn a repository homepage into a cohesive visual story. If whole-README work versus asset-only work is unclear, ask which scope the user wants. For hero-like assets where pure SVG and generated raster material are both viable, explain the tradeoffs and confirm the implementation before creating the asset.
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
Not yet listed on ClawHub or SkillsMP
// README
整理并设计仓库 README，让项目价值、真实案例、安装方式与使用边界更容易理解。
- oil-ppt — presents the method, results, and first-use path for programmatic slide creation in one visual system.
- draw-ui — uses real UI outputs to explain the path from a brief and reference images to HTML/CSS reconstruction.
- oil-icon — uses real icon sets to explain style locking, batch generation, slicing, and transparent delivery.
- Selector — puts page selection, structured context, and real output directly into the opening screen and examples.
- codex-dev-team — uses a character-driven team map to explain how one main Codex thread delegates exploration, bounded implementation, and independent review to four custom agents.
- torqueDASH-Next — uses a project-native SVG hero with OBD-II PID data and a real dashboard screenshot to explain a self-hosted vehicle telemetry dashboard.
- summertown — uses a seaside-map hero and landmark showcase to introduce an interactive town map.
- Wolfcha — combines SVG typography and an AI-generated character cutout to turn “play Werewolf solo” into a cinematic, project-native opening screen.
If this Skill helped you create a public README you are proud of, you are welcome to propose it for this list in a PR. This is completely optional: the footer signature is appreciated but never required, and showcase submissions remain subject to maintainer review.
Below are four independent hero directions. They do not share one house style; each derives its typography, color, composition, and proof from the project itself.
Block World shows a playful hybrid direction: SVG builds the pixel typography, grid, labels, and scene structure, while ImageGen and chroma-key removal supply the character that would be cumbersome to draw deterministically.
Wolfcha is a real hybrid case: ImageGen created the project-specific wolf game master, a fixed chroma-key workflow removed the background, and SVG kept the typography, moonlit table, seat map, and composition precise.
Most repositories already contain enough information. The problem is usually the order: visitors see internal terminology, installation commands, and directory trees before they understand what the project is for.
beautify-github-readme reads the real repository first, identifies the clearest value and proof, and only then decides how the page should look.
In whole-README mode, it works across three layers:
| Content | Visual system | Engineering |
|---|---|---|
| Remove repetition, move proof forward, and replace internal jargon with concrete outcomes | Derive color, typography, composition, and project-native motifs before designing the hero and supporting modules | Keep assets GitHub-safe, images accessible, commands copyable, and body text searchable |
Different projects should not receive the same template. A CLI can use command rhythm and cursors; an icon system can use keylines and cutouts; a research repository can use coordinates, charts, and evidence labels.
GitHub READMEs do not have the layout freedom of a website. This Skill separates the visual and content layers:
- SVG handles editable heroes, section transitions, comparisons, diagrams, and identity.
- Hybrid SVG composition combines deterministic SVG layout with optional AI-generated, background-removed subjects for characters, organic texture, complex materials, and cinematic lighting.
- GIF handles approved motion while the static SVG remains the editable fallback.
- Motion is opt-in and is never generated by default.
- PNG/WebP handles screenshots, generated artwork, and complex showcase walls.
- Markdown handles explanations, commands, links, configuration, and contribution details.
The result can feel designed without becoming one long image that nobody can search, copy, or maintain.
The reusable production guidance lives here:
- Designing a project-native hero
- Writing GitHub-safe README SVGs
- Composing SVG with generated raster material
- Producing GitHub-safe README motion
The process keeps three promises: use real project material, never invent capabilities, and never publish without explicit approval.
Option 1 · Install from the command line
npx skills add oil-oil/beautify-github-readme
Option 2 · Ask your Agent to install it
Install this Skill: https://github.com/oil-oil/beautify-github-readme
The Skill has two explicit modes:
| Mode | What it changes | What it leaves alone by default |
|---|---|---|
| Whole README | Reading order, copy hierarchy, proof, Markdown, and the complete visual system | It will not commit, push, or publish without approval |
| Asset-only | A static SVG hero, section headers, workflow, badge, diagram, or an optional GitHub-safe GIF with SVG source | It will not edit README copy, order, image references, or links |
If the request already states the scope, the Skill starts directly. If a user only says “beautify this repository” or provides
// HOW IT'S BUILT
KEY FILES