An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Beautify Github Readme
README design skill for Claude Code & Codex. 帮你把 GitHub README 做得好看又好懂。
Install
npx skills add oil-oil/beautify-github-readmeclaude mcp add beautify-github-readme -- npx skills add oil-oil/beautify-github-readme{
"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.
README excerpt
Read full README on GitHub →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…
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
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…
OmO: Just type "mass ulw" keyword with your prompt. Now you are the master of graph engineering.