# Create Image

> Generates minimalist black and white images for the portfolio. Creates optimized WebP variants (desktop, mobile, lazy) and uploads to AWS S3/CloudFront CDN.

- Skill: `tomevault-io/create-image` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/create-image`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/create-image/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: DevOps & Infra
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/create-image

---


# Image Generation Skill

Generates portfolio images following Meryll Dindin's visual identity. See `references/visual-identity.md` for style guidelines.

## When to Use

- Creating images for portfolio pages (/missions/, /suggestions/, /ventures/, /thoughts/)
- Generating thumbnails, section images, or backgrounds
- Replacing or updating existing CDN images

## Commands

Run from `.claude/skills/create-image/`:

```bash
# Generate and upload
uv run python scripts/create_image.py --generate "prompt" --name "asset-name"

# Generate to custom CDN path (e.g., for /thoughts/ articles)
uv run python scripts/create_image.py --generate "prompt" --name "asset" --cdn-path "articles/posters"

# Generate specific type
uv run python scripts/create_image.py --generate "prompt" --type thumbnail --name "asset"

# Enhance existing image
uv run python scripts/create_image.py --enhance --input path/to/image --name "asset"

# Preview prompt only
uv run python scripts/create_image.py --preview "prompt"

# List CDN assets
uv run python scripts/create_image.py --list-assets
```

## Image Types

| Type         | Dimensions | Aspect Ratio | CDN Path      | Use Case                  |
| ------------ | ---------- | ------------ | ------------- | ------------------------- |
| `section`    | 1080x1080  | 1:1          | `assets/`     | Section images            |
| `fullpage`   | 1080x1080  | 1:1          | `assets/`     | Full-page images          |
| `thumbnail`  | 1200x630   | 16:9         | `thumbnails/` | OG images                 |
| `background` | 1920x1080  | 16:9         | `assets/`     | Page backgrounds          |
| `portrait`   | 768x1365   | 9:16         | `assets/`     | Mobile vertical images    |

## Output Variants

### Standard types (section, fullpage, background)

Each image produces 4 WebP files:

- Desktop (1:1, 85% quality)
- Desktop lazy (100px, 20% quality)
- Mobile (16:9 center crop, 768px)
- Mobile lazy (50px, 15% quality)

### Portrait type

Produces 2 mobile-only WebP files (no cropping, just resize):

- Mobile (768px wide, 80% quality) — suffix `-mobile`
- Mobile lazy (50px wide, 15% quality) — suffix `-mobile-lazy`

## Visual Identity Summary

- **Monochrome**: Black and white only
- **Minimalist**: One concept, generous whitespace
- **Abstract**: Conceptual, not literal
- **Lo-fi**: Scientific, algorithmic aesthetic

See `references/visual-identity.md` for full guidelines and prompt templates.

## After Upload

Update the relevant JSON content file with the returned URLs:

```json
{
  "image": {
    "source": "https://cdn.merylldindin.com/assets/{name}-{timestamp}.webp",
    "lazySource": "...-lazy.webp",
    "mobile": "...-mobile.webp",
    "lazyMobile": "...-mobile-lazy.webp"
  }
}
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/merylldindin) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->