Sanyam
Back to Agentic AI

Agentic AI / Skills

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, agree on the artifacts and their data source, then scaffold a Playwright and Chromium generator that reads project data so the images stay in sync with the product.

Skills

Use it

  1. 1

    Check you have

    bun or tsxplaywright-coresharpchromium
  2. 2

    Install into your project

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

    Run it in Claude Code

    /skill image-artifact-setup
View source on GitHub

Share

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 runtime (bun if the project uses it, otherwise tsx). In a JS/TS project the generator goes in scripts/image-gen-tools/ with a root script; in Flutter, Swift, Android and other non-JS repos that folder becomes a self-contained sub-project.
  2. Reads the real design tokens, fonts, and icon library, copies the values exactly, and shows them to you before any code exists.
  3. Asks for a few product decisions up front: which artifacts, the standard size for the purpose, a layout preset, and whether the image is composed from HTML or a live app capture.
  4. Confirms where titles and descriptions come from (a nav config, route manifest, or content collection) and where the images land, which also sets the render scale.
  5. Generates the generator: a shared card-renderer.ts frame plus one script per artifact family, rendered in headless Chromium so the output is reproducible, not hand-edited.
  6. Runs it and checks the result with a bundled verify-images.mjs script (file count, pixel dimensions, suspiciously small files), then looks at a few images and runs the project's typecheck and build.
<!-- diagram: flow-image-artifact-setup -->
graph TD
    A[Identify the project, runtime, and location] --> B[Extract exact tokens, fonts, and icons]
    B --> C[Agree on artifacts, size, layout, composed or live]
    C --> D[Confirm data source, destination, and render scale]
    D --> E[Generate scripts/image-gen-tools]
    E --> F[Run it, verify-images.mjs, review, build]

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.

Prerequisites

  • Bun or tsx to run the generated TypeScript script. The skill uses bun when the project already does, otherwise it adds tsx.
  • playwright-core plus its Chromium binary. The skill adds the package as a dev dependency and installs Chromium, preferably from a postinstall so a fresh clone works. In a bun project that is bunx playwright-core install chromium.
  • sharp, added by default for compression and JPEG output. It is dropped only when every artifact is an uncompressed PNG.
  • Node, to run the bundled verify-images.mjs check. It has no dependencies.
  • The app running locally, only for live showcase cards shot from real pages rather than composed from HTML.

What's inside

Maintained publicly in Agentry Labs, a framework-agnostic collection of reusable AI-agent components. The skill directory contains:

  • SKILL.md: the six-phase workflow for setting up the generator
  • references/project-detection.md: per-stack detection signals, image destinations, token locations, and install commands per package manager
  • references/layout-presets.md: the dimension table, four layout presets, and the shared card frame
  • references/rendering-guide.md: font loading, asset inlining, encoding choice, icons, failing loudly, and variable-length text
  • 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
  • scripts/verify-images.mjs: a dependency-free check of image count, dimensions, and file size
  • evals/evals.json: test prompts covering OG cards, monorepo README banners, and Flutter store tiles