Skip to content

Beautify Github Readme

README design skill for Claude Code & Codex. 帮你把 GitHub README 做得好看又好懂。

Install

$npx skills add oil-oil/beautify-github-readme
Claude Code
claude mcp add beautify-github-readme -- npx skills add oil-oil/beautify-github-readme
Cursor / Claude Desktop (mcp.json)
{
  "mcpServers": {
    "beautify-github-readme": {
      "command": "npx",
      "args": [
        "skills",
        "add",
        "oil-oil/beautify-github-readme"
      ]
    }
  }
}

Install command taken from the project's README or registry entry. Always review code before running it.

English · 简体中文 · 日本語

整理并设计仓库 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.

Similar plugs

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…

Open-source AI job search agent and job finder: scan job boards, score each job 1-5 against your CV before you apply, tailor an ATS-friendly resume and cover letter, get…

Explore related