Skip to content

Commit a3a57b7

Browse files
authored
Add polaroid + mosaic collage skills (#7)
Adds two transform-* skills that wrap the new `image merge` intent in @transloadit/node 4.9.0 (polaroid-stack and mosaic collage effects).
1 parent be5c808 commit a3a57b7

5 files changed

Lines changed: 128 additions & 16 deletions

File tree

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,12 @@ Categories:
4747
- `integrate-*`: real-world integration guides (validated via `scenarios/` + E2E, but not requiring any test harness)
4848

4949
Examples:
50-
- `generate-image`
5150
- `transform-generate-image-with-transloadit`
5251
- `transform-remove-background-with-transloadit`
5352
- `transform-describe-image-with-transloadit`
5453
- `transform-convert-markdown-to-pdf-with-transloadit`
54+
- `transform-build-polaroid-collage-with-transloadit`
55+
- `transform-build-mosaic-collage-with-transloadit`
5556
- `integrate-uppy-transloadit-s3-uploading-to-nextjs`
5657

5758
The public catalog is whatever currently lives under [`skills/`](/Users/kvz/code/skills/skills).

skills/generate-image/SKILL.md

Lines changed: 0 additions & 15 deletions
This file was deleted.
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
name: transform-build-mosaic-collage-with-transloadit
3+
description: One-off justified mosaic photo collage (N local images -> single image) using the official `@transloadit/node` CLI. Uses the `/image/merge` Robot's `mosaic` effect to build a tiled layout that keeps every photo fully visible, and downloads the result to an explicit output path via `--output`.
4+
when_to_use: |
5+
Triggers when the user asks to create a mosaic collage, tile photos edge-to-edge, build a justified photo grid, make a Flickr-style photo layout, or compose N photos into a clean editorial collage that keeps every photo fully visible. Choose this over the polaroid skill when the vibe is clean and editorial (product grids, portfolio hero sections, social previews from a batch), and over `transform-generate-image-with-transloadit` when the input is N existing photos rather than a text prompt.
6+
---
7+
8+
# Inputs
9+
10+
- Two or more absolute paths to local input images
11+
- Optional output path; default to an explicit `collage.jpg` in the current working directory
12+
- Optional canvas size (`--width`, `--height`), default `1920×1200`
13+
- Optional `--seed` for deterministic layout
14+
15+
# Prepare Instructions
16+
17+
Resolve credentials in this order:
18+
- Shell environment variables
19+
- The current working directory `.env` only
20+
- `~/.transloadit/credentials`
21+
22+
If your `.env` lives in a parent directory, export the variables into the shell first.
23+
24+
# Run
25+
26+
```bash
27+
npx -y @transloadit/node image merge \
28+
--input ./photo-a.jpg \
29+
--input ./photo-b.jpg \
30+
--input ./photo-c.jpg \
31+
--input ./photo-d.jpg \
32+
--input ./photo-e.jpg \
33+
--input ./photo-f.jpg \
34+
--effect mosaic \
35+
--width 1920 \
36+
--height 1200 \
37+
--border 12 \
38+
--shuffle \
39+
--format jpg \
40+
--output ./collage.jpg
41+
```
42+
43+
After the command finishes, confirm the image exists at the expected output path.
44+
45+
# Tuning
46+
47+
- `--border 12` sets both the outer canvas padding and the gutter width between tiles. Larger values give more breathing room.
48+
- `--background '#eee5d3'` fills the gutters and canvas padding (default). Hex codes or named colors both work.
49+
- `--background none` (with `--format png` or `--format webp`) produces a transparent canvas and transparent gutters.
50+
- `--shuffle` lets the Robot reorder inputs before solving the layout; combine with `--seed` to pin the shuffle.
51+
- `--seed 42` makes the mosaic solver deterministic — rerun with the same inputs to reproduce the same output.
52+
53+
# Debug If It Fails
54+
55+
```bash
56+
npx -y @transloadit/node assemblies get <assemblyIdOrUrl> -j
57+
```
58+
59+
Notes:
60+
- Repeated `--input` values are bundled into a single `/image/merge` assembly.
61+
- The mosaic effect reads each input's aspect ratio and solves for a justified tile layout — portrait + landscape mixes generally produce more interesting layouts than uniform sizes.
62+
- Unlike the polaroid-stack effect, tiles are center-cropped to fit their allocated rectangle. Any portion of a photo can be cropped off — if every pixel matters, resize beforehand with `/image/resize` and `resize_strategy: fit`.
63+
- Prefer an explicit output filename (e.g. `./collage.jpg` or `./collage.png`) over a directory output so the extension is deterministic.
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
name: transform-build-polaroid-collage-with-transloadit
3+
description: One-off polaroid-stack photo collage (N local images -> single image) using the official `@transloadit/node` CLI. Uses the `/image/merge` Robot's `polaroid-stack` effect and downloads the result to an explicit output path via `--output`.
4+
when_to_use: |
5+
Triggers when the user asks to create a polaroid collage, build a polaroid stack, arrange photos as polaroids, make a scrapbook-style photo collage, or lay out tilted overlapping instant photos on a canvas. Choose this over the mosaic skill when the vibe is personal or scrapbook-ish (event recaps, "year in photos"), and over `transform-generate-image-with-transloadit` when the input is N existing photos rather than a text prompt.
6+
---
7+
8+
# Inputs
9+
10+
- Two or more absolute paths to local input images
11+
- Optional output path; default to an explicit `collage.png` in the current working directory
12+
- Optional canvas size (`--width`, `--height`), default `1920×1200`
13+
- Optional `--seed` for deterministic layout
14+
15+
# Prepare Instructions
16+
17+
Resolve credentials in this order:
18+
- Shell environment variables
19+
- The current working directory `.env` only
20+
- `~/.transloadit/credentials`
21+
22+
If your `.env` lives in a parent directory, export the variables into the shell first.
23+
24+
# Run
25+
26+
```bash
27+
npx -y @transloadit/node image merge \
28+
--input ./photo-a.jpg \
29+
--input ./photo-b.jpg \
30+
--input ./photo-c.jpg \
31+
--input ./photo-d.jpg \
32+
--input ./photo-e.jpg \
33+
--input ./photo-f.jpg \
34+
--effect polaroid-stack \
35+
--width 1920 \
36+
--height 1200 \
37+
--format png \
38+
--output ./collage.png
39+
```
40+
41+
After the command finishes, confirm the image exists at the expected output path.
42+
43+
# Tuning
44+
45+
- `--background '#eee5d3'` picks a warm beige canvas (default). Hex codes or named colors both work.
46+
- `--background none` (with `--format png` or `--format webp`) produces a transparent canvas.
47+
- `--coverage 1.5` is the default. Use `2.0``2.5` for bigger, more overlapping photos; `1.0` or below for smaller, more widely spaced polaroids.
48+
- `--seed 42` makes the layout deterministic — rerun with the same inputs to reproduce the same output.
49+
- `--shuffle` lets the Robot reorder inputs before laying them out.
50+
51+
# Debug If It Fails
52+
53+
```bash
54+
npx -y @transloadit/node assemblies get <assemblyIdOrUrl> -j
55+
```
56+
57+
Notes:
58+
- Repeated `--input` values are bundled into a single `/image/merge` assembly.
59+
- The polaroid-stack effect works best with 4–12 inputs. Fewer than four tends to look sparse; more than a dozen starts to occlude heavily.
60+
- Each input is cropped to a square inside its polaroid frame — portrait or landscape originals both work.
61+
- Prefer an explicit output filename (e.g. `./collage.png` or `./collage.jpg`) over a directory output so the extension is deterministic.

skills/transform-generate-image-with-transloadit/SKILL.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
name: transform-generate-image-with-transloadit
33
description: One-off image generation (prompt -> image file) using Transloadit via the `transloadit` CLI. Prefer `image generate` for text-only and input-guided generation, and use `--output` when you need a deterministic path.
4+
when_to_use: |
5+
Triggers when the user asks to generate an image, create an image from a prompt, make an AI image, render a picture from text, or guide image generation with reference photos. Choose this for prompt-driven or prompt+input-guided generation of a local image file. Prefer this over the collage skills when the input is a text prompt rather than N existing photos to composite.
46
---
57

68
# Run

0 commit comments

Comments
 (0)