Sanyam
Back to Agentic AI

Agentic AI / Reusable artifact

Image Artifact Setup Skill

A Claude Code skill that turns a messy image-generation request into a repeatable build step: detect the stack, pull the real design tokens, choose the output format, and ship a reproducible screenshot pipeline that stays in sync with the product.

Skills

This skill is for the exact problem that makes generated art drift over time: a project gets a few one-off screenshots, then nobody can remember which route, what size, or which tokens they used. The workflow here keeps the process repeatable instead of improvisational.

What it does

It turns a vague request like "make the OG cards look like the site" into a tractable workflow that an agent can execute from the repo itself:

  1. Detects the stack and decides whether the generator belongs at the root or under a nested tool folder.
  2. Reads the real design tokens, fonts, and icon system instead of inventing them from memory.
  3. Asks for a few product decisions up front, including the artifact set, the expected sizes, and whether the image is composed or a live app capture.
  4. Builds a type-safe generator around Chromium and screenshots so the output is reproducible, not hand-edited.
  5. Verifies the generated image count, dimensions, and visual fit before it gets treated as done.
<!-- diagram: flow-image-artifact-setup -->
graph TD
    A[Detect stack and repo conventions] --> B[Read real tokens, fonts, and icons]
    B --> C[Choose artifact set, sizes, and layout]
    C --> D[Implement generator and script wiring]
    D --> E[Run and verify rendered output]
    E --> F[Ship repeatable image artifacts]

Why it earns a place here

The tricky part of image generation is rarely the Chromium code. The hard part is making sure the card looks like the product, uses the correct source data, and lands in the right output path without drifting later. This skill locks those decisions into a workflow so the next time someone asks for a card set, they start from the same source of truth instead of repeating the same guesswork.

How to get it

This skill is maintained publicly in Agentry Labs, a framework-agnostic collection of reusable AI-agent components. Install it into any project with one command:

curl -sSL https://raw.githubusercontent.com/ersanyamarya/agentry-labs/main/scripts/install.sh | bash -s -- skills/image-artifact-setup

Then invoke it inside Claude Code:

claude -p "/skill image-artifact-setup"

The skill directory contains:

  • SKILL.md: the on-the-ground instructions for how to set up the generator
  • references/project-detection.md: stack-specific detection signals and file-placement guidance
  • references/layout-presets.md: layout presets, dimensions, and the default card frame
  • references/capture-pitfalls.md: the gotchas that make live screenshots look polished but actually fail
  • assets/card-renderer.ts: the shared HTML/CSS + Chromium runner to adapt for new artifacts