Agent skills

Leave a reply

I used an agentic workflow for building a gallery grid (below). When running the workflow, my agent used several custom skills I had created.

Work-in-progress generation tool with the skins arranged on canvas
Virtual creatures skin: a child meeting glowing forest spirits

Virtual creatures skin variant: a child running through a meadow of spirits
Hungry fish skin variant: anglers on a raft above deep water
Hungry fish skin: a child on a dock watching a school of fish
Lava blobs skin: a figure catching glowing blobs with a net
Lava blobs skin variant: a figure with a lantern beside a green planet

Case 1: Design skill

Case 2: Fix-vertical-spacings skill

Case 3: Image-export skill

Production

Case 1: Design skill

I asked Claude to create a CSS grid layout for a gallery. It then loaded my design and discovery skills.

My agent reading the design skill before starting the layout task

Grid layout variants rendered in the browser preview next to my agent's session

Case 2: Fix-vertical-spacings skill

Repeatedly, I instructed agents to fix similar vertical spacing issues in their generated layouts. I then automated the workflow with a skill. The skill’s a loop of design and evaluation.

My agent reading the fix-vertical-spacings skill before correcting the gallery spacing

The Imagery section with corrected vertical spacing in the WordPress editor

Case 3: Image-export skill

My image export skill contains a small web app. The app lets you hand-pick variants.

My agent reading the image-export skill before optimizing the gallery images

The image version selection form with a JPG and WebP toggle and per-image candidates

A row of JPEG and PNG candidates with their file sizes for one gallery image

Production

The published Imagery gallery live on teemutalja.com

Finally, I uploaded the images and the content to production.