Github Profile Beautifier

GitHub Profile Beautifier

一键生成漂亮的 GitHub 个人主页 README。自动检测仓库、分析技术栈、智能推荐项目和主题。

Overview

根据用户的 GitHub 数据（仓库、语言、star），自动生成带统计卡片、项目展示、技术栈徽章的个人主页 README。依赖 gh CLI 获取数据，输出完整的 README.md 文件。提供 5 种主题和 3 种排序方式。

When to Use

• User wants to create a GitHub profile page (with or without existing README)
• User wants to generate a new GitHub profile README
• User wants to beautify an existing README
• User wants to showcase projects and tech stack
• User inputs /github-profile-beautifier [username]
• User wants to improve their GitHub profile for job applications
• User wants to add stats cards and contribution graphs
• User wants to highlight specific projects for recruiters
• User wants a professional-looking profile with tech stack visualization

When NOT to Use:

• User only wants to make small edits to an existing README
• User already has a perfect README and just wants minor tweaks
• User wants to create a personal page on a non-GitHub platform (e.g., personal website, blog)
• User wants to generate a resume or CV (different tooling)
• User wants to create a portfolio website (use GitHub Pages or Netlify)

Core Pattern

Step 0: 解析参数

从用户输入中提取 username、--sort（默认 smart）、--theme（默认 radical）。缺少参数时交互式询问。

Step 1: 获取用户信息

# 检查 gh CLI
if ! command -v gh >/dev/null 2>&1; then
  echo "⚠️ gh CLI 未安装"
  echo "安装方式: brew install gh"
  echo "或使用 GitHub API 作为备选方案"
  
  # 备选方案：使用 GitHub API
  if command -v curl >/dev/null 2>&1 && command -v python3 >/dev/null 2>&1; then
    echo "使用 GitHub API 获取用户信息..."
    curl -s "https://api.github.com/users/$USERNAME" | python3 -c "
import sys,json
data=json.load(sys.stdin)
print(f'Login: {data.get(\"login\",\"N/A\")}')
print(f'Name: {data.get(\"name\",\"N/A\")}')
print(f'Bio: {data.get(\"bio\",\"N/A\")}')
"
  else
    echo "❌ 无法获取用户信息，请安装 gh CLI，或 curl + python3"
    exit 1
  fi
else
  # 验证用户存在
  gh api users/$USERNAME > /dev/null 2>&1 || { echo "用户不存在"; exit 1; }

  # 捕获用户信息和仓库到变量（供 Step 3 模板填充）
  USER_JSON=$(gh api users/$USERNAME)
  LOGIN=$(echo "$USER_JSON" | jq -r '.login // ""')
  NAME=$(echo "$USER_JSON" | jq -r '.name // ""')
  BIO=$(echo "$USER_JSON" | jq -r '.bio // ""')
  REPOS_JSON=$(gh repo list $USERNAME --limit 50 --json name,description,primaryLanguage,url,updatedAt,stargazerCount,isFork)
fi

Step 2: 分析仓库

• 筛选非 fork 仓库（全部是 fork 则用所有仓库）
• 排序方式：stars（按 star）、updated（按更新时间）、smart（综合 star + 更新时间 + 描述质量）
• 统计语言分布

Step 3: 准备模板数据

所有模板共享：username, name, bio, typing_lines, website, blog, email, linkedin

项目变量：projects（name, description, url, stars, tech）

技术栈变量区分：

• radical / tokyonight / dracula / minimalist → languages + tools
• professional → frontend + backend + tools（需按语言分类前后端）

语言/工具颜色从 templates/themes.json 获取。联系方式字段可选，模板用 {{#if}} 处理空值。

Step 4: 生成 README

读取对应主题模板，填充变量，输出完整 README.md。

Snake 贡献图： 深色主题包含蛇形贡献图，需用户先 fork platane/snk 并配置 GitHub Actions，否则显示 404。

Quick Reference

/github-profile-beautifier username
/github-profile-beautifier username --sort stars --theme tokyonight

Common Mistakes

🎨 GitHub Profile Beautifier

One-click generation of beautiful GitHub profile READMEs. Auto-detects repos, analyzes tech stacks, and intelligently recommends projects and themes.

Installation

# npx skills (recommended)
npx skills add wu529778790/shenzjd-skills -s github-profile-beautifier -y

# Manual (Claude Code)
git clone https://github.com/wu529778790/shenzjd-skills.git
cp -r shenzjd-skills/github-profile-beautifier ~/.claude/skills/

# Manual (Cursor)
# Copy SKILL.md content to .cursorrules or .cursor/rules/

Usage

/github-profile-beautifier username
/github-profile-beautifier username --sort stars --theme tokyonight

Themes

Prerequisites

• `gh` CLI — Must be installed and authenticated (gh auth login)
• Snake contribution graph (optional) — Dark themes include a snake contribution graph; requires forking platane/snk and setting up GitHub Actions

Dracula Theme Template

<div align="center">

🧛 {{name}}

👋 {{bio}}


🔥 GitHub 账号状态

</div>

---

📊 GitHub 统计

<p align="center"> <img src="https://github-readme-stats-eight-mu.vercel.app/api?username={{username}}&theme=dracula&hide_border=true&show_icons=true&count_private=true" alt="GitHub Stats" /> </p>

<p align="center"> <img src="https://github-readme-stats-eight-mu.vercel.app/api/top-langs/?username={{username}}&layout=compact&theme=dracula&hide_border=true" alt="Top Languages" /> </p>

<p align="center"> <img src="https://streak-stats.demolab.com?user={{username}}&theme=dracula&hide_border=true&background=0D1117" alt="GitHub Streak" /> </p>

---

🐍 贡献图

<p align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/{{username}}/{{username}}/output/github-snake-dark.svg" /> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/{{username}}/{{username}}/output/github-snake.svg" /> <img alt="github-snake" src="https://raw.githubusercontent.com/{{username}}/{{username}}/output/github-snake-dark.svg" /> </picture> </p>

---

📊 热门项目

<div align="center">

{{#each projects}} | {{name}} | ⭐ {{stars}} | {{description}} | 🔗 GitHub | {{/each}}

</div>

---

💻 技术栈

<div align="center">

🎨 主要语言

{{#each languages}}

{{/each}}

⚙️ 工具 & 框架

{{#each tools}}

{{/each}}

</div>

---

📞 联系我

<div align="center">

{{#if website}} []({{website}}) {{/if}} {{#if blog}} []({{blog}}) {{/if}} {{#if email}}  {{/if}} {{#if linkedin}}  {{/if}} 

</div>

Minimalist Theme Template

<div align="center">

{{name}}

{{bio}}

</div>

---

📊 GitHub 统计

<p align="center"> <img src="https://github-readme-stats-eight-mu.vercel.app/api?username={{username}}&hide_border=true&show_icons=true&count_private=true&bg_color=ffffff00" alt="GitHub Stats" /> </p>

<p align="center"> <img src="https://github-readme-stats-eight-mu.vercel.app/api/top-langs/?username={{username}}&layout=compact&hide_border=true&bg_color=ffffff00" alt="Top Languages" /> </p>

---

📊 项目

<div align="center">

{{#each projects}} | {{name}} | {{description}} | GitHub | {{/each}}

</div>

---

💻 技术栈

<div align="center">

{{#each languages}}

{{/each}}

{{#each tools}}

{{/each}}

</div>

---

📞 联系

<div align="center">

{{#if website}} []({{website}}) {{/if}} {{#if blog}} []({{blog}}) {{/if}} {{#if email}}  {{/if}} {{#if linkedin}}  {{/if}} 

</div>

Professional Theme Template

<div align="center">

{{name}}

{{bio}}


</div>

---

📊 GitHub 统计

<p align="center"> <img src="https://github-readme-stats-eight-mu.vercel.app/api?username={{username}}&theme=transparent&hide_border=true&show_icons=true&count_private=true&bg_color=ffffff00&title_color=2E86AB&icon_color=2E86AB&text_color=333333" alt="GitHub Stats" /> </p>

<p align="center"> <img src="https://github-readme-stats-eight-mu.vercel.app/api/top-langs/?username={{username}}&layout=compact&theme=transparent&hide_border=true&bg_color=ffffff00&title_color=2E86AB&text_color=333333" alt="Top Languages" /> </p>

---

📊 项目

<div align="center">

{{#each projects}} | {{name}} | {{description}} | {{tech}} | GitHub | {{/each}}

</div>

---

💻 技术栈

<div align="center">

前端

{{#each frontend}}

{{/each}}

后端

{{#each backend}}

{{/each}}

工具

{{#each tools}}

{{/each}}

</div>

---

📞 联系方式

<div align="center">

{{#if website}} []({{website}}) {{/if}} {{#if blog}} []({{blog}}) {{/if}} {{#if linkedin}}  {{/if}} {{#if email}}  {{/if}} 

</div>

Radical Theme Template

<div align="center">

🚀 {{name}} 🚀

👋 {{bio}}


🔥 GitHub 账号状态

</div>

---

📊 GitHub 统计

<p align="center"> <img src="https://github-readme-stats-eight-mu.vercel.app/api?username={{username}}&theme=radical&hide_border=true&show_icons=true&count_private=true" alt="GitHub Stats" /> </p>

<p align="center"> <img src="https://github-readme-stats-eight-mu.vercel.app/api/top-langs/?username={{username}}&layout=compact&theme=radical&hide_border=true" alt="Top Languages" /> </p>

<p align="center"> <img src="https://streak-stats.demolab.com?user={{username}}&theme=radical&hide_border=true&background=0D1117" alt="GitHub Streak" /> </p>

---

🐍 贡献图

<p align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/{{username}}/{{username}}/output/github-snake-dark.svg" /> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/{{username}}/{{username}}/output/github-snake.svg" /> <img alt="github-snake" src="https://raw.githubusercontent.com/{{username}}/{{username}}/output/github-snake-dark.svg" /> </picture> </p>

---

📊 热门项目

<div align="center">

{{#each projects}} | {{name}} | ⭐ {{stars}} | {{description}} | 🔗 GitHub | {{/each}}

</div>

---

💻 技术栈

<div align="center">

🎨 主要语言

{{#each languages}}

{{/each}}

⚙️ 工具 & 框架

{{#each tools}}

{{/each}}

</div>

---

📞 联系我

<div align="center">

{{#if website}} []({{website}}) {{/if}} {{#if blog}} []({{blog}}) {{/if}} {{#if email}}  {{/if}} {{#if linkedin}}  {{/if}} 

</div>

GitHub Profile Beautifier Templates

📋 可用模板

1. Radical Theme 🎨

描述： vibrant and colorful theme 适合： 个人项目、创意开发者、喜欢鲜艳颜色的用户 特点：

• 粉色和黄色为主色调
• 活泼、有活力
• 适合展示个人品牌

示例颜色：

• Primary: #fe428e (粉色)
• Secondary: #f8d847 (黄色)
• Accent: #a9fef7 (青色)

---

2. Tokyo Night Theme 🌙

描述： Modern dark theme with blue tones 适合： 喜欢现代感、深色主题的用户 特点：

• 蓝色和紫色为主色调
• 现代、科技感强
• 适合展示技术能力

示例颜色：

• Primary: #7aa2f7 (蓝色)
• Secondary: #bb9af7 (紫色)
• Accent: #9ece6a (绿色)

---

3. Dracula Theme 🧛

描述： Popular dark theme with purple accents 适合： 喜欢深色主题、紫色调的用户 特点：

• 紫色和粉色为主色调
• 深色背景，护眼
• 适合展示暗黑风格

示例颜色：

• Primary: #ff79c6 (粉色)
• Secondary: #bd93f9 (紫色)
• Accent: #50fa7b (绿色)

---

4. Minimalist Theme ✨

描述： Clean and simple design 适合： 喜欢简洁、专业风格的用户 特点：

• 黑白灰为主色调
• 简洁、专业
• 适合展示正式项目

示例颜色：

• Primary: #333333 (深灰)
• Secondary: #666666 (灰色)
• Accent: #0077B5 (蓝色)

---

5. Professional Theme 💼

描述： Business-oriented design 适合： 企业用户、求职者、需要展示专业形象的用户 特点：

• 蓝色和橙色为主色调
• 专业、商务
• 适合展示工作经验

示例颜色：

• Primary: #2E86AB (蓝色)
• Secondary: #A23B72 (紫色)
• Accent: #F18F01 (橙色)

---

🚀 使用方法

选择模板

# 使用 Radical 主题（默认）
/github-profile-beautifier username --theme radical

# 使用 Tokyo Night 主题
/github-profile-beautifier username --theme tokyonight

# 使用 Dracula 主题
/github-profile-beautifier username --theme dracula

# 使用 Minimalist 主题
/github-profile-beautifier username --theme minimalist

# 使用 Professional 主题
/github-profile-beautifier username --theme professional

---

📊 模板对比

---

🎨 颜色自定义

修改主题颜色

在 themes.json 中修改：

{
  "themes": {
    "radical": {
      "colors": {
        "primary": "#your-color",
        "secondary": "#your-color",
        "accent": "#your-color"
      }
    }
  }
}

添加新主题

1. 在 templates/ 目录创建新的模板文件 2. 在 themes.json 中添加主题配置 3. 使用新模板生成 README

---

📝 模板变量

基础变量（所有模板通用）

联系方式字段均为可选，模板使用 {{#if}} 处理空值，不会显示空白链接。

项目变量

{
  "name": "项目名",
  "stars": 1302,
  "description": "项目描述",
  "url": "https://github.com/...",
  "tech": "Vue, TypeScript"
}

• stars：仅 radical / tokyonight / dracula 模板显示
• tech：仅 professional 模板显示

语言/工具变量

{
  "name": "JavaScript",
  "color": "F7DF1E",
  "logo": "javascript"
}

技术栈分类（仅 Professional 模板）

Professional 模板将技术栈分为三组：

其他模板使用 {{#each languages}} 和 {{#each tools}} 两组。

---

💡 最佳实践

1. 选择合适的主题

• 个人项目 → Radical 或 Tokyo Night
• 技术展示 → Tokyo Night 或 Dracula
• 企业用户 → Professional 或 Minimalist
• 求职者 → Professional

2. 保持一致性

• 选择一个主题后，保持整个 README 风格一致
• 不要混合使用多个主题

3. 定期更新

• 定期重新运行 skill 更新 README
• 保持项目信息最新

---

🔧 高级自定义

创建自定义模板

1. 复制现有模板 2. 修改颜色和样式 3. 在 themes.json 的 themes 中添加新主题配置 4. 确保模板中的颜色值与 themes.json 中的配置一致

---

📚 参考资源

• Shields.io 文档
• GitHub Readme Stats
• Readme Typing SVG

Tokyo Night Theme Template

<div align="center">

🌙 {{name}}

👋 {{bio}}


🔥 GitHub 账号状态

</div>

---

📊 GitHub 统计

<p align="center"> <img src="https://github-readme-stats-eight-mu.vercel.app/api?username={{username}}&theme=tokyonight&hide_border=true&show_icons=true&count_private=true" alt="GitHub Stats" /> </p>

<p align="center"> <img src="https://github-readme-stats-eight-mu.vercel.app/api/top-langs/?username={{username}}&layout=compact&theme=tokyonight&hide_border=true" alt="Top Languages" /> </p>

<p align="center"> <img src="https://streak-stats.demolab.com?user={{username}}&theme=tokyonight&hide_border=true&background=0D1117" alt="GitHub Streak" /> </p>

---

🐍 贡献图

<p align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/{{username}}/{{username}}/output/github-snake-dark.svg" /> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/{{username}}/{{username}}/output/github-snake.svg" /> <img alt="github-snake" src="https://raw.githubusercontent.com/{{username}}/{{username}}/output/github-snake-dark.svg" /> </picture> </p>

---

📊 热门项目

<div align="center">

{{#each projects}} | {{name}} | ⭐ {{stars}} | {{description}} | 🔗 GitHub | {{/each}}

</div>

---

💻 技术栈

<div align="center">

🎨 主要语言

{{#each languages}}

{{/each}}

⚙️ 工具 & 框架

{{#each tools}}

{{/each}}

</div>

---

📞 联系我

<div align="center">

{{#if website}} []({{website}}) {{/if}} {{#if blog}} []({{blog}}) {{/if}} {{#if email}}  {{/if}} {{#if linkedin}}  {{/if}} 

</div>