add-social-media-header
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.
Best use case
add-social-media-header is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using add-social-media-header should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/add-social-media-header/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How add-social-media-header Compares
| Feature / Agent | add-social-media-header | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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: 1. **Gather your profile information**: Get your YouTube channel ID, GitHub username, LinkedIn URL, and X/Twitter URL 2. **Identify insertion point**: The header should go at the top of your README, right after the main title 3. **Customize the template**: Replace all placeholder values with your actual profile information 4. **Insert into file**: Add the complete block to your README ### Template ```markdown <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): ```markdown <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: 1. **GitHub might not be rendering shields.io badges**: Refresh your browser 2. **Internet connection required**: Badge images are fetched from shields.io, so internet is needed 3. **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` - 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 design - `style=plastic` - Glossy appearance - `style=flat-square` - Square badges ### Colors Add custom colors to badges using the `color=` parameter (hex without #): - YouTube: `color=FF0000` (red) - GitHub: `color=000000` (black) or `color=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 1. **Keep badges on one line**: Don't add line breaks between badges for proper horizontal alignment 2. **Keep it simple**: Don't add more than 4-5 badges to avoid clutter 3. **Test locally**: Use GitHub's markdown preview or VS Code to verify rendering 4. **Update regularly**: If your follower count changes significantly, update the label if needed
Related Skills
accessibility-remediation
Use this skill when the user writes/edits components, asks to "fix accessibility issues", "add ARIA labels", "improve accessibility", "check WCAG compliance", "remediate a11y violations", mentions "screen reader support", "keyboard navigation", or wants AI-powered accessibility fixes with one-click application. Automatically analyzes components for a11y issues and suggests context-aware fixes. Trigger on PostToolUse hook or explicit request.
acc-create-mediator
Generates Mediator pattern for PHP 8.5. Creates coordination layer for complex component interactions with event dispatching, request/response handling, and colleague classes. Reduces coupling between interacting objects. Includes unit tests.
chrome-debug
This skill empowers AI agents to debug web applications and inspect browser behavior using the Chrome DevTools Protocol (CDP), offering both collaborative (headful) and automated (headless) modes.
astro
This skill provides essential Astro framework patterns, focusing on server-side rendering (SSR), static site generation (SSG), middleware, and TypeScript best practices. It helps AI agents implement secure authentication, manage API routes, and debug rendering behaviors within Astro projects.
modal-deployment
Run Python code in the cloud with serverless containers, GPUs, and autoscaling using Modal. This skill enables agents to generate code for deploying ML models, running batch jobs, serving APIs, and scaling compute-intensive workloads.
grail-miner
This skill assists in setting up, managing, and optimizing Grail miners on Bittensor Subnet 81, handling tasks like environment configuration, R2 storage, model checkpoint management, and performance tuning.
ontopo
An AI agent skill to search for Israeli restaurants, check table availability, view menus, and retrieve booking links via the Ontopo platform, acting as an unofficial interface to its data.
vly-money
Generate crypto payment links for supported tokens and networks, manage access to X402 payment-protected content, and provide direct access to the vly.money wallet interface.
whisper-transcribe
Transcribes audio and video files to text using OpenAI's Whisper CLI, enhanced with contextual grounding from local markdown files for improved accuracy.
thor-skills
An entry point and router for AI agents to manage various THOR-related cybersecurity tasks, including running scans, analyzing logs, troubleshooting, and maintenance.
ux
This AI agent skill provides comprehensive guidance for creating professional and insightful User Experience (UX) designs, covering user research, information architecture, interaction design, visual guidance, and usability evaluation. It aims to produce actionable, user-centered solutions that avoid generic AI aesthetics.
tech-blog
Generates comprehensive technical blog posts, offering detailed explanations of system internals, architecture, and implementation, either through source code analysis or document-driven research.