Claude-skill-inception nextjs-og-image-css-limitations

install

source · Clone the upstream repo

git clone https://github.com/strataga/claude-skill-inception

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/strataga/claude-skill-inception "$T" && mkdir -p ~/.claude/skills && cp -r "$T/nextjs-og-image-css-limitations" ~/.claude/skills/strataga-claude-skill-inception-nextjs-og-image-css-limitations && rm -rf "$T"

manifest: nextjs-og-image-css-limitations/SKILL.md

source content

Next.js OG Image CSS Limitations

Problem

Next.js

next/og

ImageResponse uses Satori for rendering, which only supports a subset of CSS. Using unsupported

display

values like

inline-block

causes build failures during static generation.

Context / Trigger Conditions

Build error:

Error occurred prerendering page "/opengraph-image"

Error message:

Invalid value for CSS property "display". Allowed values: "flex" | "block" | "none" | "-webkit-box". Received: "inline-block"

Files affected:
```
opengraph-image.tsx
```
,
```
twitter-image.tsx
```
, or similar OG image routes
Using
```
next/og
```
ImageResponse component

Solution

Replace inline-block with flex + alignSelf

Before (causes error):

<div
  style={{
    display: 'inline-block',
    padding: '10px 24px',
    background: '#FFCC00',
    width: 'fit-content',  // Also not supported
  }}
>
  Badge Text
</div>

After (works):

<div
  style={{
    display: 'flex',
    padding: '10px 24px',
    background: '#FFCC00',
    alignSelf: 'flex-start',  // Prevents stretching to full width
  }}
>
  Badge Text
</div>

Allowed display values

```
flex
```
- Most versatile, use with flexbox properties
```
block
```
- Simple block element
```
none
```
- Hide element
```
-webkit-box
```
- Legacy flexbox (rarely needed)

Other CSS limitations to watch for

```
width: fit-content
```
- Not supported, use
```
alignSelf: flex-start
```
instead
```
grid
```
- Not supported, use nested flex containers
```
inline
```
,
```
inline-flex
```
- Not supported
Complex selectors - Not supported, inline styles only

Verification

Run
```
npm run build
```
or
```
next build
```
No errors during static page generation
OG image routes generate successfully
Preview OG images at
```
/opengraph-image
```
or using OG debugger tools

Example

Full working OG image component:

import { ImageResponse } from 'next/og'

export const runtime = 'nodejs'

export default function OpengraphImage() {
  return new ImageResponse(
    <div
      style={{
        height: '100%',
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        background: '#FFFEF5',
        padding: '60px 80px',
      }}
    >
      {/* Badge - use flex + alignSelf instead of inline-block */}
      <div
        style={{
          display: 'flex',
          padding: '10px 24px',
          background: '#FFCC00',
          border: '4px solid #1a1a1a',
          fontSize: '20px',
          fontWeight: 700,
          alignSelf: 'flex-start',  // Key: prevents full-width stretch
        }}
      >
        CASE STUDY
      </div>

      {/* Title */}
      <div
        style={{
          fontSize: '72px',
          fontWeight: 900,
          color: '#1a1a1a',
          marginTop: '24px',
        }}
      >
        Project Title
      </div>
    </div>,
    {
      width: 1200,
      height: 630,
    }
  )
}

Notes

Satori (used by next/og) is designed for server-side rendering to images
It intentionally limits CSS to ensure consistent cross-platform rendering
Complex layouts should use nested flex containers
Fonts must be loaded explicitly in the ImageResponse options
Testing locally with
```
next dev
```
may not catch all issues; always test with
```
next build
```