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.
Best use case
og-image-generation is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Generate dynamic social preview images using Next.js file conventions and the next/og library. Server-rendered JSX images cached at build time.
Teams using og-image-generation 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/og-image-generation/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How og-image-generation Compares
| Feature / Agent | og-image-generation | 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?
Generate dynamic social preview images using Next.js file conventions and the next/og library. Server-rendered JSX images cached at build time.
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
# OG Image Generation To set up OG Image Generation, refer to the fullstackrecipes MCP server resource: **Resource URI:** `recipe://fullstackrecipes.com/og-image-generation` If the MCP server is not configured, fetch the recipe directly: ```bash curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/og-image-generation ```
Related Skills
url-state-management
Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs.
testing
Complete testing setup with Neon database branching, Playwright browser tests, integration tests, and unit tests. Isolated branches with automatic TTL cleanup.
stripe-subscriptions
Complete subscription billing system with Stripe integration, feature flags for plan gating, webhook handling, and billing portal.
ralph-loop
Complete setup for automated agent-driven development. Define features as user stories with testable acceptance criteria, then run AI agents in a loop until all stories pass.
observability-monitoring
Complete observability stack with structured logging, error tracking, and web analytics.
env-management
Complete better-env workflow: typed config schema, Vercel sync, and prebuild validation.
base-app-setup
Complete setup guide for a Next.js app with Shadcn UI, Neon Postgres, Drizzle ORM, and AI SDK.
authentication
Complete authentication system with Better Auth, email verification, password reset, protected routes, and account management.
ai-chat
Build a complete AI chat application with database persistence, chat list management, and automatic title generation.
ai-agent-workflow
Build resumable multi-agent workflows with durable execution, tool loops, and automatic stream recovery on client reconnection.
workflow-setup
Install and configure the Workflow Development Kit for resumable, durable AI agent workflows with step-level persistence, stream resumption, and agent orchestration.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".