
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
スコア
総合スコア
リポジトリの品質指標に基づく評価
SKILL.mdファイルが含まれている
ライセンスが設定されている
100文字以上の説明がある
GitHub Stars 100以上
3ヶ月以内に更新
10回以上フォークされている
オープンIssueが50未満
プログラミング言語が設定されている
1つ以上のタグが設定されている
レビュー
レビュー機能は近日公開予定です
