social-sharing

Document social sharing patterns with OG image generation and useShare hook.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/vassovass/scl-v3 --skill social-sharing
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: social-sharing
Source: https://github.com/vassovass/scl-v3/tree/main/.claude/skills/social-sharing
Command: npx skills add https://github.com/vassovass/scl-v3 --skill social-sharing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill documents patterns for social sharing in StepLeague, including OG image generation, the use of the share hook, and multi-channel sharing flows. It provides guidance for implementing sharing features, generating OG images, creating share modals, and integrating social platform optimizations.

Core Features & Use Cases

  • OG image generation for social previews
  • useShare hook usage across platforms (native, WhatsApp, X, copy)
  • WhatsApp optimization and shareable URL structures
  • Share analytics & modals with multi-select content blocks

Quick Start

  • Integrate the useShare hook in sharing components to enable cross-platform sharing and automatic analytics.
  • Generate OG images via the /api/og route to optimize previews for WhatsApp and social feeds.

Frequently Asked Questions about social-sharing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Open Graph images for social media previews?

Generate OG images via the /api/og route to create optimized previews for WhatsApp, X, and social feeds. This Skill documents the OG image generation patterns required to display rich previews when links are shared across platforms.

How do I implement cross-platform social sharing in React/Next.js?

Integrate the useShare hook in your sharing components to enable multi-channel sharing across native, WhatsApp, X, and copy-to-clipboard options with automatic analytics tracking built in.

What's the best way to optimize sharing for WhatsApp?

WhatsApp optimization involves structuring shareable URLs and generating OG images through the /api/og route to ensure rich media previews appear correctly when links are shared on the platform.

Can I track sharing analytics across multiple social platforms?

Yes. The useShare hook automatically captures analytics data when users share content across platforms, and share modals can integrate multi-select content blocks to track which items are shared.

Do I need TypeScript and Next.js to use this sharing pattern?

Yes. This Skill requires familiarity with React/Next.js, TypeScript, OG image routes, and the useShare utility. These are prerequisites for implementing the documented sharing patterns.