
add-social-media-header
by 0GiS0
🤖 Colección de Skills especializados para GitHub Copilot Agent que automatizan tareas comunes en desarrollo, documentación y configuración de repositorios
SKILL.md
name: add-social-media-header description: Add professional social media headers to README files and documentation to enhance engagement and visibility across LinkedIn, YouTube, GitHub, and X (Twitter). Use when you need to add or update social media badges with clickable links to your profiles.
Add Social Media Header
Add a professional social media header with styled badges and links to enhance your content's visibility and engagement.
How to use
When asked to add a social media header to your README or documentation:
- Gather your profile information: Get your YouTube channel ID, GitHub username, LinkedIn URL, and X/Twitter URL
- Identify insertion point: The header should go at the top of your README, right after the main title
- Customize the template: Replace all placeholder values with your actual profile information
- Insert into file: Add the complete block to your README
Template
<div align="center">
[](YOUR_YOUTUBE_URL) [](YOUR_GITHUB_URL) [](YOUR_LINKEDIN_URL) [](YOUR_X_URL)
</div>
Important: Keep all badges on a single line (no line breaks between them) for proper horizontal alignment.
Replace the following placeholders with your actual information:
YOUR_CHANNEL_ID- Your YouTube channel ID (find in YouTube channel settings, usually looks like: UC140iBrEZbOtvxWsJ-Tb0lQ)YOUR_USERNAME- Your GitHub username (e.g., 0GiS0)YOUR_YOUTUBE_URL- Full URL to your YouTube channel (e.g., https://www.youtube.com/c/YourChannelName)YOUR_GITHUB_URL- Full URL to your GitHub profile (e.g., https://github.com/YourUsername)YOUR_LINKEDIN_URL- Full URL to your LinkedIn profile (e.g., https://www.linkedin.com/in/yourprofile/)YOUR_X_URL- Full URL to your X/Twitter profile (e.g., https://twitter.com/YourHandle)
Example with Real URLs
Here's a complete example with actual URLs that you can adapt (all badges on one line):
<div align="center">
[](https://www.youtube.com/c/GiselaTorres?sub_confirmation=1) [](https://github.com/0GiS0) [](https://www.linkedin.com/in/giselatorresbuitrago/) [](https://twitter.com/0GiS0)
</div>
Important Notes
Why badges might not render
If you only see the <div align="center"> and not the badges:
- GitHub might not be rendering shields.io badges: Refresh your browser
- Internet connection required: Badge images are fetched from shields.io, so internet is needed
- Network blocked: Some corporate networks block external image sources
Troubleshooting
If badges don't appear:
- Verify your YouTube channel ID is correct
- Check that all URLs are complete and valid (start with https://)
- Ensure all badges are on a single line (this is important for proper alignment)
- Try accessing the badge URLs directly in your browser:
- YouTube:
https://img.shields.io/youtube/channel/subscribers/YOUR_CHANNEL_ID?style=for-the-badge&logo=youtube
- YouTube:
- Make sure there are blank lines between the
<div>tag and the badges line
Customization options
Style variations
style=for-the-badge- Modern, rectangular badges (recommended)style=flat- Flat designstyle=plastic- Glossy appearancestyle=flat-square- Square badges
Colors
Add custom colors to badges using the color= parameter (hex without #):
- YouTube:
color=FF0000(red) - GitHub:
color=000000(black) orcolor=FFFFFF(white) - LinkedIn:
color=0077b5(official LinkedIn blue) - X:
color=000000(black)
Badge text
Update the badge labels (e.g., "Follow", "Subscribe", "Connect") to match your preference.
Pro Tips
- Keep badges on one line: Don't add line breaks between badges for proper horizontal alignment
- Keep it simple: Don't add more than 4-5 badges to avoid clutter
- Test locally: Use GitHub's markdown preview or VS Code to verify rendering
- Update regularly: If your follower count changes significantly, update the label if needed
Score
Total Score
Based on repository quality metrics
SKILL.mdファイルが含まれている
ライセンスが設定されている
100文字以上の説明がある
GitHub Stars 100以上
1ヶ月以内に更新
10回以上フォークされている
オープンIssueが50未満
プログラミング言語が設定されている
1つ以上のタグが設定されている
Reviews
Reviews coming soon
