# Og Image Generation

> Genera imágenes de vista previa social dinámicas usando convenciones de archivos de Next.js y la librería next/og. Imágenes JSX renderizadas en servidor, cacheadas en build time.

Fuente: https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/og-image-generation
Markdown: https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/og-image-generation.md

Repositorio: https://github.com/andrelandgraf/fullstackrecipes
Autor: andrelandgraf
Licencia: no declarada
Actualizado: hace 3 meses
Coste de contexto: 36 tok instalada, 109 tok al activarse, 109 tok con todos los archivos del bundle
Bundle: 1 archivo, 437 B
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add andrelandgraf/fullstackrecipes --skill og-image-generation --agent claude-code
# Cursor
npx -y skills add andrelandgraf/fullstackrecipes --skill og-image-generation --agent cursor
# Codex
npx -y skills add andrelandgraf/fullstackrecipes --skill og-image-generation --agent codex
# Gemini CLI
npx -y skills add andrelandgraf/fullstackrecipes --skill og-image-generation --agent gemini
# Windsurf
npx -y skills add andrelandgraf/fullstackrecipes --skill og-image-generation --agent windsurf
# Cline
npx -y skills add andrelandgraf/fullstackrecipes --skill og-image-generation --agent cline
```

## Qué hace

- Genera imágenes de vista previa social dinámicas usando las convenciones de archivos de Next.js y la librería next/og
- Renderiza imágenes JSX en el servidor, cacheadas en build time

## Cuándo usarla

- Necesitas generar imágenes OG dinámicas para redes sociales en un proyecto Next.js

## Qué la activa

- "Genera imágenes OG dinámicas para mi sitio Next.js"
- "Crea preview images con next/og para mis páginas"

## Antes de instalar

- Requiere un proyecto Next.js con la librería next/og.
- Necesita en el PATH: curl
- makes network requests

## Archivos

- SKILL.md — 437 B

## SKILL.md

No se reproduce aquí. Léelo en https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/og-image-generation/SKILL.md

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [andrelandgraf](https://skillsagentes.com/creators/andrelandgraf.md) — 0 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Authoring Recipes](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/authoring-recipes.md): Guías para escribir contenido de fullstackrecipes: setup recipes, skills expuestas, cookbooks, templates y utilidades instalables del registro, pensadas para mantenedores del proyecto, no para consumidores del stack.
- [Use Fullstackrecipes](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/use-fullstackrecipes.md): Descubre y sigue las recetas de fullstackrecipes (guías de setup, skills, cookbooks) obteniendo su Markdown; la meta-skill para encontrar y aplicar recetas correctamente.
- [Authentication Best Practices](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/authentication-best-practices.md): Lee sesiones en cliente y servidor, protege rutas y ejecuta sign in/up/out con Better Auth. Úsalo al restringir páginas/APIs por autenticación o al conectar flujos de auth.
- [Better Auth Components](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/better-auth-components.md): Añade componentes de UI y páginas para flujos de autenticación: inicio de sesión, registro, recuperación de contraseña, restablecimiento de contraseña y verificación de email.
- [Analytics Best Practices](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/analytics-best-practices.md): Rastrea eventos personalizados y conversiones con Vercel Web Analytics mediante track(). Úsalo al instrumentar acciones de usuario, conversiones o envíos de formularios.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)