skills.rest
lossless-group
lossless-groupOFFICIAL
Explore all skills by this author →
Website𝕏@losslessgroupGitHub

overlay-svg-text

Overlay brand-compliant SVG text onto open graph images using sharp.

4|Updated May 4, 2026
Search Tags:#open-graph#og-image#gradient-text#image-compositing#marketing-assets#brand-typography#svg-overlay
One-click install
npx skills add https://github.com/lossless-group/lossless-agent-skills --skill overlay-svg-text
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: overlay-svg-text
Source: https://github.com/lossless-group/lossless-agent-skills/tree/main/overlay-svg-text
Command: npx skills add https://github.com/lossless-group/lossless-agent-skills --skill overlay-svg-text

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Unbranded, anonymous open graph and share imagery fails to reinforce brand identity when shared on social platforms or displayed in unfurl previews, and manually compositing brand-compliant text overlays is time-consuming and prone to inconsistencies with the team's type system and gradient standards.

Core Features & Use Cases

  • Brand-compliant type system enforcement: Automatically applies the Lossless standard three-element overlay layout (thin sans eyebrow, gradient Hack Bold H1, Poor Story handwritten note) to maintain consistent brand identity across all share assets.
  • Project-specific gradient integration: Pulls editable gradient tokens directly from each project's DESIGN.md instead of relying on non-editable raster-baked brand SVGs, ensuring overlays match each project's unique brand palette.
  • Use cases: Compositing text on generated OG images before shipping, adding wordmarks to anonymous unfurl previews, and adding brand-consistent title overlays to fundraise deck hero slides or marketing banners.
  • Production-ready compositing pipeline: Uses sharp for reliable JPEG output optimized for open graph compatibility, with built-in archive discipline to preserve prior canonical image versions and support for batch processing across multiple aspect ratios.

Quick Start

Use the overlay-svg-text skill to add a brand-compliant title, eyebrow, and handwritten note overlay to the generated OG image for your project.

Frequently Asked Questions about overlay-svg-text

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

FAQPage Schema
How do I add brand text overlays to open graph images automatically?▼

You can add brand text overlays to open graph images by compositing brand-compliant SVG text onto share imagery, enforcing a standardized type system and gradient discipline pulled directly from project DESIGN.md files.

What is SVG text compositing for unfurl preview customization?▼

SVG text compositing for unfurl preview customization is the process of overlaying brand-consistent typography, such as eyebrow text, gradient H1 headers, and handwritten notes, onto anonymous share imagery to reinforce brand identity across social platforms.

How do I apply project-specific gradient tokens to marketing assets?▼

To apply project-specific gradient tokens to marketing assets, the compositing pipeline reads editable gradient values from each project's DESIGN.md file rather than using non-editable raster-baked SVGs to ensure overlays match the unique brand palette.

Does sharp support multi-aspect ratio JPEG output for OG image generation?▼

Yes, sharp supports multi-aspect ratio JPEG output for OG image generation, providing a production-ready compositing pipeline optimized for open graph compatibility while preserving prior canonical image versions through built-in archive discipline.

What's the best way to standardize brand typography across marketing banners?▼

The best way to standardize brand typography across marketing banners is applying a three-element overlay layout—thin sans eyebrow, gradient Hack Bold H1, and Poor Story handwritten note—to maintain consistent brand identity across all generated share assets.

Why do my unbranded share images fail to reinforce brand identity?▼

Unbranded share images fail to reinforce brand identity because they lack standardized typography and gradient overlays, appearing anonymous in unfurl previews and social platform feeds without automated SVG text compositing.

Related Skills

Explore More Marketing & Sales Skills→
echosoarechosoar
60

canvas-cli

Generate 2D raster images and technical diagrams from declarative text command scripts.

Community
Intermediate
VictaaawVictaaaw

image

Generates and optimizes marketing images for websites and social platforms using AI models.

Community
Intermediate
monlormonlor
1

logo-generator

Generate SVG logo variants and showcase images with Python libraries.

Community
Advanced
rakibulismrakibulism
2

motion-graphics

Design motion graphics specifications for titles, lower thirds, captions, and overlays.

Community
Intermediate