denwa-web-shared/skills/render-picture/SKILL.md

A shared library for Next.js App Router projects containing reusable components, hooks, schemas, and utilities.

---
name: render-picture
description: >
  Use the BasePicture component to render images instead of Next.js Image.
  Load when generating images, using getImageData, IPreparedServerImage, or IPreparedServerImageWithAlt.
type: core
library: denwa-web-shared
library_version: '1.0.58'
sources:
  - 'src/server/ui/image.tsx'
  - 'src/server/lib/utils.ts'
---

# denwa-web-shared — Render responsive images

## Setup

```tsx
import { BasePicture } from 'denwa-web-shared/server';
import { getImageData } from 'denwa-web-shared/server';

// Assuming serverImage is of type IPreparedServerImage
const pictureData = getImageData(serverImage);

<BasePicture data={pictureData} alt="alt text" type={serverImage.type} />;
```

## Core Patterns

### Rendering a picture using server data

```tsx
import { BasePicture, getImageData } from 'denwa-web-shared/server';
import type { IPreparedServerImage } from 'denwa-web-shared/server';

export const MyComponent = ({ image }: { image: IPreparedServerImage }) => {
  const data = getImageData(image);

  return <BasePicture data={data} alt="Responsive image" type={image.type} />;
};
```

## Common Mistakes

### CRITICAL Using next/image instead of Picture

Wrong:

```tsx
import Image from 'next/image';

<Image src={src} alt={alt} />;
```

Correct:

```tsx
import { BasePicture, getImageData } from 'denwa-web-shared/server';

const pictureData = getImageData(serverImage);
<BasePicture data={pictureData} alt="alt text" type={serverImage.type} />;
```

Agents default to next/image instead of using the custom BasePicture component.

Source: maintainer interview

### HIGH Not using getImageData for Picture path

Wrong:

```tsx
import { BasePicture } from 'denwa-web-shared/server';

<BasePicture data={{ image1x: item.path }} alt="alt text" type="image/jpeg" />;
```

Correct:

```tsx
import { BasePicture, getImageData } from 'denwa-web-shared/server';

const pictureData = getImageData(item);
<BasePicture data={pictureData} alt="alt text" type={item.type} />;
```

Agents try to construct paths manually instead of using the getImageData helper to generate PictureData.

Source: maintainer interview