Og Image Generation
- 200 installs
- 18 repo stars
- Updated June 8, 2026
- andrelandgraf/fullstackrecipes
Generate dynamic Open Graph and social preview images for pages, posts, or products to improve link CTR on Twitter, LinkedIn, and Slack unfurls.
About
Implements dynamic Open Graph image generation for fullstack apps—template-driven renders with titles, branding, and page context—so shared links show polished previews that boost social click-through and reinforce brand across distribution channels.
- Dynamic OG image templates
- Brand-consistent social previews
- Framework-friendly rendering
- Improves share CTR
- Pairs with meta tags
Og Image Generation by the numbers
- 200 all-time installs (skills.sh)
- Ranked #856 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill og-image-generationAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 200 |
|---|---|
| repo stars | ★ 18 |
| Last updated | June 8, 2026 |
| Repository | andrelandgraf/fullstackrecipes ↗ |
What it does
Generate dynamic Open Graph and social preview images for pages, posts, or products to improve link CTR on Twitter, LinkedIn, and Slack unfurls.
Files
OG Image Generation
Generate dynamic social preview images using Next.js file conventions and the next/og library. Server-rendered JSX images cached at build time.
curl https://fullstackrecipes.com/recipes/og-image-generation.mdRelated skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k