القائمة
Create and customize GitHub profile READMEs with stats cards, animations, badges, and GitHub Actions automation.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Create, verify, and improve AGENTS.md files. Minimal, focused, progressive disclosure. Fixes bloat, contradictions, stale info.
Audit and plan website optimisation for AI agents, AI search, LLM discoverability, llms.txt, structured data, and sitemaps.
Build distinctive, production-grade frontend interfaces (websites, components, dashboards, layouts) with polished UI design that avoids generic AI aesthetics.
Generate and validate Awesome list READMEs following sindresorhus/awesome standards.
Scaffold type-safe TypeScript projects with the Better-T-Stack CLI — new projects, features, or troubleshooting.
Build full-stack TypeScript apps with Convex — server functions, schema, auth, file storage, real-time, frontend integration, testing, deployment.
| name | gh-profile |
| description | Create and customize GitHub profile READMEs with stats cards, animations, badges, and GitHub Actions automation. |
| license | MIT |
This skill transforms GitHub profiles from basic to extraordinary. Your GitHub profile is your digital resume, portfolio, and personal brand—make it unforgettable.
Users typically want help with GitHub profile customization when they:
You provide comprehensive GitHub profile customization guidance, including:
A GitHub profile is a special README.md file that appears on your GitHub profile page at github.com/username. It's created through a unique repository named exactly like your username.
Your GitHub profile is your:
YOUR_USERNAME (must match exactly)README.md file with markdown contentgithub.com/YOUR_USERNAMEREADME.md file must be in the root directory✅ Clean, branded profiles with consistent styling ✅ Strategic widget placement (stats, streak, languages) ✅ High contrast themes for accessibility ✅ Tech stack badges and social links ✅ Animated typing SVG and contribution snakes ✅ Visitor counters with geographic tracking ✅ Dynamic blog feeds via GitHub Actions ✅ Project showcases with repo cards ✅ GitHub Achievements displayed prominently ✅ Impact metrics ("Used by 10k+ users", "500+ stars")
❌ Overcrowded profiles with too many widgets ❌ Broken or slow-loading images ❌ Generic templates without customization ❌ Low contrast color schemes ❌ Excessive GIFs that hurt performance ❌ Missing or outdated contact information
When a user requests help, first understand their needs:
If they have no profile yet:
If they have an existing profile:
For customization goals:
Step 1: Create Your Profile Repository
johndoe)Step 2: Add Your Profile Content
Copy this entire block and paste it into your README.md (replace the placeholders):
<div align="center">
# Hi, I'm Your Name! 👋
I'm a developer who loves building things that live on the internet.
## 🚀 What I'm Working On
- Currently building [your current project]
- Learning [technology you're learning]
- Open to collaborations on [topics you're interested in]
## 💬 Let's Connect
- Email: your.email@example.com
- LinkedIn: linkedin.com/in/yourprofile
- Twitter: @yourhandle
---
*This profile is a work in progress!*
</div>
Step 3: Verify It Works
github.com/YOUR_USERNAME (not the repository, your main profile)That's it! You now have a working GitHub profile. Ready to level up? Continue below.
Before customizing further, verify:
YOUR_USERNAME (case-sensitive)Not seeing your profile? See Troubleshooting
Once you have a basic profile, add these features one at a time:
1. Add GitHub Stats Card
- Shows your stars, forks, contributions
- Choose a theme (dracula, radical, tokyonight)
2. Add Tech Stack Badges
- Display your programming languages
- Add frameworks and tools you use
3. Add Social Links
- Email, LinkedIn, Twitter, Website
- Use badge formats for consistency
4. Add Visitor Counter
- Track how many people visit your profile
- Geographic data if desired
5. Add Featured Projects
- Link to your best repositories
- Include brief descriptions
1. Add Stats Cards (github-readme-stats)
2. Add Streak Stats
3. Add Profile Trophy
4. Add Visitor Counter
5. Add Tech Stack Icons
6. Add Typing Animation
7. Integrate Blog Feed (GitHub Actions)
8. Add Snake Contribution Animation
1. Set Up GitHub Actions Workflows
- Automated blog post updates
- Dynamic content generation
- Custom SVG generation
- External API integrations
2. Create Custom Scripts
- Python/Node.js for data fetching
- Jinja2 templates for content
- GraphQL queries for complex data
3. Optimize Performance
- Caching strategies
- API rate limiting
- Lazy loading for large content
- SVG optimization
4. Implement Security Best Practices
- Token management
- Permission limiting
- Secret management
All code snippets below go in your README.md unless otherwise specified.
Parameters Explained:
username=YOUR_USERNAME - Your GitHub username (required)show_icons=true - Show service icons next to labelstheme=dracula - Color scheme (dracula, radical, tokyonight, gruvbox, synthwave, etc.)hide_border=true - Remove card bordertitle_color=00ff00 - Custom title color (hex code)bg_color=000000 - Custom background color (hex code)Available Themes:
dark, light, dracula, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, monokai, nord, gotham
[](https://github.com/avgupta456/github-trends)
Features:
[](https://git.io/streak-stats)
Parameters:
theme=dracula - Color themehide_border=true - Remove bordermode=daily - Show daily contributionsstroke=00ff00 - Custom stroke color[](https://github.com/ryo-ma/github-profile-trophy)
Parameters:
no-frame=true - Remove trophy frameno-bg=true - Remove backgroundcolumn=4 - Number of columns (default: 7)margin-w=4 - Width marginFile: README.md
[](https://git.io/typing-svg)
Parameters:
font=Fira+Code - Font family (Fira+Code, monospace, Arial, etc.)size=32 - Font size in pixelsduration=2800 - Typing duration in millisecondspause=2000 - Pause between typing cyclescolor=00ff00 - Text colorcenter=true - Center alignmentlines=Line1;Line2;Line3 - Lines to type (semicolon-separated)File: .github/workflows/snake.yml
name: Generate Snake
on:
schedule:
- cron: "0 0 * * *" # Daily at midnight
workflow_dispatch:
jobs:
generate:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: Platane/snk@v3
with:
github_user_name: ${{ github.repository_owner }}
outputs: |
dist/github-snake.svg
dist/github-snake-dark.svg?palette=github-dark
dist/ocean.gif?generator_ocean
- uses: peaceiris/actions-gh-pages@v4
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
Usage in README.md:
GitHub Achievements are badges you earn for various activities on the platform. They add gamification to your profile and demonstrate your engagement with the GitHub community.
master branch to main or any other name@ mentions in commit messagesAchievements automatically appear on your profile once earned. To maximize them:
Focus on quality contributions
Consistent activity
Community engagement
Create popular repositories
[](https://skillicons.dev)
<div align="center">
<img src="https://techstack-generator.vercel.app/react-icon.svg" alt="React" width="50" height="50" />
<img src="https://techstack-generator.vercel.app/js-icon.svg" alt="JavaScript" width="50" height="50" />
<img src="https://techstack-generator.vercel.app/python-icon.svg" alt="Python" width="50" height="50" />
<img src="https://techstack-generator.vercel.app/ts-icon.svg" alt="TypeScript" width="50" height="50" />
<img src="https://techstack-generator.vercel.app/docker-icon.svg" alt="Docker" width="50" height="50" />
</div>
AI-powered tools can help you create your profile faster:
ReadMeCodeGen
rahuldkjain/github-profile-readme-generator
Using ChatGPT/Claude
For Job Seekers:
"Create a GitHub profile README for a senior full-stack developer with 5 years experience. Skills: React, Node.js, Python, AWS. Looking for senior roles. Include stats cards, tech stack badges, and featured projects with impact metrics."
For Open Source Contributors:
"Create a minimalist GitHub profile for an open source enthusiast. Focus on contributions, starred repos, and community engagement. Use Tokyo Night theme. Include activity graph and contribution snake."
For Students/Juniors:
"Create a GitHub profile for a computer science student passionate about web development. Include learning journey, current projects, and contact information. Keep it clean and professional."
File: .github/workflows/blog-posts.yml
name: Blog Posts
on:
schedule:
- cron: '0 */6 * * *' # Every 6 hours
workflow_dispatch:
jobs:
update-blog:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: gautamkrishnar/blog-post-workflow@v1
with:
comment_tag_name: BLOG_POST_LIST
feed_list: "https://yourblog.com/feed.xml,https://medium.com/feed/@yourusername"
max_post_count: 5
feed_item_custom_template: "- [$title]($url)"
date_format: "MMM DD, YYYY"
In README.md:
## 📝 Latest Blog Posts
<!-- BLOG_POST_LIST:START -->
<!-- BLOG_POST_LIST:END -->
File: .github/workflows/wakatime.yml
name: WakaTime Stats
on:
schedule:
- cron: '0 0 * * *' # Daily at midnight
workflow_dispatch:
jobs:
update-wakatime:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: lowlighter/metrics@latest
with:
filename: metrics.svg
token: ${{ secrets.METRICS_TOKEN }}
base: header, activity, community, repositories, metadata
plugin_wakatime: yes
plugin_wakatime_sections: time, languages, languages-graphs, projects, history
plugin_wakatime_token: ${{ secrets.WAKATIME_API_KEY }}
Setup:
WAKATIME_API_KEY to GitHub repository secrets
Parameters:
theme=Dark - Color theme (Dark, Light, Radical)mode=card - Display mode (default, card)File: .github/workflows/spotify.yml
name: Update Spotify
on:
schedule:
- cron: '*/15 * * * *' # Every 15 minutes
workflow_dispatch:
jobs:
spotify:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses:athul/waka-readme@master
with:
WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}
Limit External Images
Lazy Loading
<details>
<summary>Click to expand more stats</summary>
<br>
</details>
File: .github/workflows/cached-update.yml
name: Cached Profile Update
on:
schedule:
- cron: '0 0 * * *'
workflow_dispatch:
jobs:
update:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Cache node modules
uses: actions/cache@v4
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: Your update script
run: |
# Your update commands here
- name: Check for changes
id: check-changes
run: |
if git diff --quiet HEAD README.md; then
echo "has_changes=false" >> $GITHUB_OUTPUT
else
echo "has_changes=true" >> $GITHUB_OUTPUT
fi
- name: Commit changes
if: steps.check-changes.outputs.has_changes == 'true'
run: |
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
git add README.md
git commit -m "Update profile [skip ci]"
git push
When fetching data from APIs:
BAD:
run: echo "API_KEY=12345" > config.txt
GOOD:
run: echo "API_KEY=${{ secrets.API_KEY }}" > config.txt
Add secrets in: Repository Settings → Secrets and variables → Actions
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
API_KEY: ${{ secrets.API_KEY }}
SPOTIFY_CLIENT_ID: ${{ secrets.SPOTIFY_CLIENT_ID }}
permissions:
contents: write
pull-requests: read
# BAD
- uses: actions/checkout@master
# GOOD
- uses: actions/checkout@v4
# GOOD (with SHA pinning for production)
- uses: actions/checkout@8ade135a41bc03ea155e62e844d2df94e0d05d4b
High Contrast
highcontrast, dracula, tokyonightAlt Text
Screen Reader Friendly
<div align="center">, <details>, etc.)Color Blind Safe
Keyboard Navigable
Avoid: Custom themes with low contrast ratios
<div align="center">
# Hi, I'm Your Name 👋
[](https://yourwebsite.com)
[](https://twitter.com/yourusername)
[](https://linkedin.com/in/yourusername)
</div>
## About Me
I'm a [Your Role] passionate about [Your Interests].
- 🔭 Currently working on [Project]
- 🌱 Learning [Technology]
- 👯 Open to collaborations on [Topic]
- 💬 Ask me about [Expertise]
## Tech Stack
[](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[](https://www.python.org/)
[](https://reactjs.org/)
## GitHub Stats
<div align="center">
<img width="49%" src="https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=dracula&hide_border=true" />
<img width="49%" src="https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR_USERNAME&layout=compact&theme=dracula&hide_border=true" />
</div>
## Featured Projects
- [Project 1](link) - Description
- [Project 2](link) - Description
- [Project 3](link) - Description
## Connect
[](mailto:your.email@example.com)
<div align="center">
# Senior Full Stack Developer | React, Node.js, AWS | Open Source Contributor
[](https://linkedin.com/in/yourprofile)
[](mailto:your@email.com)
</div>
## About Me
Experienced full-stack developer with 5+ years building scalable web applications. Passionate about clean code, performance optimization, and mentoring junior developers.
## Tech Stack
### Frontend
[](https://reactjs.org/)
[](https://www.typescriptlang.org/)
[](https://nextjs.org/)
### Backend
[](https://nodejs.org/)
[](https://www.python.org/)
[](https://www.postgresql.org/)
### Cloud & DevOps
[](https://aws.amazon.com/)
[](https://www.docker.com/)
[](https://kubernetes.io/)
## GitHub Stats
<div align="center">
<img src="https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=dracula&hide_border=true&rank_icon=github" />
</div>
## Featured Projects
### E-commerce Platform - 10,000+ users, 500+ stars
**Tech:** React, Node.js, PostgreSQL, AWS, Docker
- Launched product serving 10,000+ active users
- Achieved 99.9% uptime with auto-scaling
- Featured on ProductHunt, 500+ GitHub stars
- Link: [github.com/YOUR_USERNAME/project](https://github.com/YOUR_USERNAME/project)
### Real-Time Analytics Dashboard
**Tech:** TypeScript, WebSocket, Redis, Grafana
- Reduced data processing time by 60%
- Handles 1M+ events per day
- Real-time visualization for 500+ concurrent users
- Link: [github.com/YOUR_USERNAME/analytics](https://github.com/YOUR_USERNAME/analytics)
### Open Source Contributions
- Active contributor to [popular repo 1]
- Maintainer of [popular repo 2] with 1k+ stars
- 500+ contributions across 50+ repositories
## Contact
- **Email:** your.email@example.com
- **LinkedIn:** linkedin.com/in/yourprofile
- **GitHub:** github.com/YOUR_USERNAME
- **Location:** San Francisco, CA (Open to remote)
<div align="center">
# 👋 Hi, I'm Your Name
</div>
## 📖 My Journey
### 🌱 2020 - Where It Started
- Built my first website with HTML & CSS
- Fell in love with coding and problem-solving
- Started learning JavaScript and Python
### 🚀 2021 - Growth
- First open source contribution to [project]
- Landed my first developer job at [company]
- Learned React, Node.js, and PostgreSQL
- Built [first significant project]
### 💡 2022 - Expertise
- Promoted to Senior Developer
- Started technical blog (10k+ views)
- Mentored 5 junior developers
- Contributed to [major open source project]
### 🔥 2023 - Present
- Full-stack architect at [company]
- 1000+ GitHub contributions
- Maintainer of [project] (500+ stars)
- Building products that matter
---
## 🏆 Achievements
<div align="center">
<img src="https://github-profile-trophy.vercel.app/?username=YOUR_USERNAME&theme=dracula&no-frame=true&no-bg=true&margin-w=4" />
</div>
---
## 🛠️ Tech Stack
[](https://skillicons.dev)
---
## 📫 Let's Connect
[](mailto:your.email@example.com)
[](https://linkedin.com/in/yourusername)
[](https://twitter.com/yourhandle)
Problem: Your profile isn't visible on your GitHub page
Solutions:
Problem: Stats cards showing old data
Solutions:
Problem: Widget or badge images not displaying
Solutions:
Problem: Workflows not running or failing
Solutions:
Problem: Profile looks bad on mobile devices
Solutions:
<div align="center"> for centeringProblem: Profile is cluttered and slow
Solutions:
<details> for expandable contentFor users who want a profile in under 5 minutes:
rahuldkjain/github-profile-readme-generator ⭐ Most Popular
ProfileMe.dev
Readmefy
ReadMeCodeGen
Coderspace GitHub ReadMe Generator
awesomegithub.web.app
┌───────────── minute (0 - 59)
│ ┌───────────── hour (0 - 23)
│ │ ┌───────────── day of month (1 - 31)
│ │ │ ┌───────────── month (1 - 12)
│ │ │ │ ┌───────────── day of week (0 - 6)
│ │ │ │ │
* * * * *
# Every hour
- cron: '0 * * * *'
# Every day at midnight UTC
- cron: '0 0 * * *'
# Every 6 hours
- cron: '0 */6 * * *'
# Every Monday at 9:00 UTC
- cron: '0 9 * * 1'
# Every day at 8:00 and 18:00 UTC
- cron: '0 8,18 * * *'
# Every weekday at 9:00 UTC
- cron: '0 9 * * 1-5'
# Every month on the 1st at midnight
- cron: '0 0 1 * *'
File: scripts/update_readme.py
import requests
import re
def fetch_latest_repos(username):
"""Fetch user's latest repositories"""
url = f"https://api.github.com/users/{username}/repos"
response = requests.get(url)
return response.json()[:6]
def update_readme(readme_path, marker, content):
"""Update a section in README between markers"""
with open(readme_path, 'r') as f:
readme = f.read()
start_marker = f'<!-- {marker}_START -->'
end_marker = f'<!-- {marker}_END -->'
pattern = f'{start_marker}.*?{end_marker}'
replacement = f'{start_marker}\n{content}\n{end_marker}'
readme = re.sub(pattern, replacement, readme, flags=re.DOTALL)
with open(readme_path, 'w') as f:
f.write(readme)
if __name__ == '__main__':
username = "YOUR_USERNAME"
repos = fetch_latest_repos(username)
content = "### Latest Repos\n\n"
for repo in repos:
content += f"- [{repo['name']}]({repo['html_url']}) - {repo.get('description', 'No description')}\n"
update_readme('README.md', 'REPOS', content)
In workflow:
- name: Update README with Python
run: |
python scripts/update_readme.py
When helping users create their GitHub profile:
Remember: A great GitHub profile balances personality, professionalism, and purpose. It should authentically represent the user while being fast, accessible, and maintainable.
# Basic Profile (5 minutes)
1. Create username/username repository (public)
2. Add README.md with intro, skills, contact
3. Add stats card: 
4. Verify at github.com/YOUR_USERNAME
# Enhanced Profile (15 minutes)
5. Add streak stats: 
6. Add trophy: 
7. Add visitor counter: 
8. Add typing animation and tech stack badges
# Advanced Profile (1 hour)
9. Set up GitHub Actions for blog feed
10. Add snake contribution animation
11. Create custom workflow for dynamic content
12. Optimize performance and accessibility
13. Implement security best practices
The goal is to help users create profiles that are memorable, professional, and uniquely theirs—profiles that make recruiters take notice and collaborators want to connect.