From social-media-tools
Builds and opens a filterable HTML gallery of saved social cards. Scans docs/media/social/ and generates a filterable index page. Use when asked to browse the media library or view saved posts.
How this skill is triggered — by the user, by Claude, or both
Slash command
/social-media-tools:media-libraryThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate an interactive HTML page listing all saved social media posts, then open it in the browser.
Generate an interactive HTML page listing all saved social media posts, then open it in the browser.
Every card-generating skill saves populated HTML to docs/media/social/. This skill scans that directory, builds a filterable HTML page with clickable links to every card, and opens it in the browser.
ExitPlanMode is a deferred tool. Only call it if currently in plan mode — skip this step entirely when not in plan mode. When calling: use ToolSearch with select:ExitPlanMode first, then call ExitPlanMode silently.
MEDIA_DIR="${PWD}/docs/media/social"
MEDIA_FILES=$(ls -t "$MEDIA_DIR"/*.html 2>/dev/null | grep -v '/index\.html$')
If docs/media/social/ does not exist or contains no .html files, tell the user:
"No saved posts found in
docs/media/social/. Run a sharing skill to generate your first post."
STOP.
Find the templates/ directory to derive $PLUGIN_DIR:
find ~/.claude/plugins -path "*/social-media-tools/templates" -type d 2>/dev/null | head -1
find "$PWD" -path "*/social-media-tools/templates" -type d 2>/dev/null | head -1
Use the first non-empty result as TEMPLATES_DIR. Derive:
PLUGIN_DIR=$(dirname "$TEMPLATES_DIR")
If no directory is found: output "Templates not found. Install the plugin or load it with --plugin-dir." and STOP.
Read the gallery template from $PLUGIN_DIR/templates/gallery.html.
Build {{GALLERY_ENTRIES}} — for each card file (most recent first), parse the filename
({type}-{slug}-{YYYY-MM-DD}.html) and generate one card entry:
<div class="gallery-card-wrap">
<a class="gallery-card" href="{BASENAME}" data-type="{TYPE}" data-topic="{TOPIC}">
<div class="thumb-container">
<img src="{BASENAME_PNG}" alt="{TOPIC}" onerror="showFallback(this)">
<span class="thumb-fallback" style="display:none">{TYPE}</span>
</div>
<div class="card-info">
<div class="card-info-top">
<span class="type-badge type-{TYPE}">{TYPE}</span>
<span class="card-date">{DATE}</span>
</div>
<span class="card-topic">{TOPIC}</span>
<span class="card-file">{BASENAME}</span>
</div>
</a>
<button type="button" class="open-img-link" data-img="{BASENAME_PNG}" data-topic="{TOPIC}" aria-label="View image: {TOPIC}">View image</button>
</div>
Only include the .open-img-link button when a matching .png file exists alongside the .html card (test with -f "$MEDIA_DIR/${BASENAME_PNG}"). Omit the button element entirely for cards without a screenshot to avoid dead controls.
Where:
{BASENAME} = filename without path (e.g., diff-add-copy-button-2026-05-27.html){BASENAME_PNG} = same with .png extension{TYPE} = first segment of filename (e.g., diff, feature, blog){TOPIC} = middle segments with hyphens replaced by spaces, title-cased (e.g., "Add Copy Button"){DATE} = last segment before .html (e.g., 2026-05-27)Substitute variables in the template:
{{GALLERY_ENTRIES}} → the concatenated <a> blocks{{CARD_COUNT}} → total number of cards{{GENERATED_AT}} → current date and time (e.g., 2026-05-27 14:30)Write the populated HTML to docs/media/social/index.html.
GALLERY_PATH=$(realpath "docs/media/social/index.html" 2>/dev/null || echo "${PWD}/docs/media/social/index.html")
open "$GALLERY_PATH" 2>/dev/null || xdg-open "$GALLERY_PATH" 2>/dev/null || true
Tell the user: "Media library generated at docs/media/social/index.html with {count} cards — opened in your browser. Click any card to view it."
If the user asks to view copy text from a specific card after seeing the library:
Read the chosen HTML file<textarea class="post-copy-text">…</textarea>, noting each one's preceding <p class="copy-label"> label**[platform label]**
```
[extracted post copy text]
```
diff, feature, quote → share-codeblog → share-blogvideo → share-videosnippet → share-githubproject → share-projectsession → share-sessionSTOP. Do not invoke any other skills or run git commands after delivering.
npx claudepluginhub shawn-sandy/agentics-kit --plugin social-media-toolsProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.