add-social-media-header
Scannednpx machina-cli add skill 0GiS0/ghcp-agent-skills/add-social-media-header --openclawFiles (1)
SKILL.md
4.9 KB
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
Source
git clone https://github.com/0GiS0/ghcp-agent-skills/blob/main/.github/skills/add-social-media-header/SKILL.mdView on GitHub Overview
This skill adds a polished social media header to READMEs and documentation. It creates a single-line block of badge links for YouTube, GitHub, LinkedIn, and X, boosting engagement and visibility of your profiles.
How This Skill Works
You gather your profile data, choose the insertion point at the top of the README after the main title, and apply the Markdown template by replacing the placeholders with your real URLs and IDs. The resulting block keeps all badges on one line for proper horizontal alignment and clickable navigation.
When to Use It
- When creating a new README for a project to surface your social profiles from the start
- When updating an existing README or documentation to include current social profiles
- For personal or company docs that require consistent branding across YouTube, GitHub, LinkedIn, and X
- When setting up multiple repositories that should share the same branded header
- When you want clickable badges that drive profile visits from documentation pages
Quick Start
- Step 1: Gather your YouTube channel ID, GitHub username, and profile URLs
- Step 2: Insert the header block at the top of your README right after the main title, keeping all badges on one line
- Step 3: Replace placeholders with your data and save
Best Practices
- Keep all badges on a single line to ensure horizontal alignment
- Replace all placeholders with your real profile information
- Use HTTPS URLs for reliability
- Verify badge links and channel IDs after insertion
- Test the rendered header by viewing the README in your repository
Example Use Cases
- README for an open-source project with YouTube channel, GitHub profile, LinkedIn, and X
- Personal portfolio repository header linking to all social profiles
- Company tech docs with leadership LinkedIn and brand channels
- Developer blog docs page with social badges at the top
- Multi-repo guide where every repository shares a consistent header
Frequently Asked Questions
Add this skill to your agents
