What is generate-thumbnails-agentic?

A workflow for regenerating the preview images shown in Sanity Studio’s page-builder insert menu. It renders each content block on a temporary page, takes a screenshot, and saves the block’s thumbnail image.

Use it to refresh thumbnails for Sanity page-builder blocks and synchronize them into the Studio.

It keeps the insert-menu previews accurate after a design or theme change, while avoiding edits to generated copies that would be overwritten.

generate-thumbnails-agentic — Skill for Claude Code by robotostudio

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add robotostudio/turbo-start-sanity --skill generate-thumbnails-agentic

Clone the repo

git clone --depth 1 https://github.com/robotostudio/turbo-start-sanity

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/robotostudio/turbo-start-sanity/generate-thumbnails-agentic/github.svg)](https://agentmods.dev/skills/robotostudio/turbo-start-sanity/generate-thumbnails-agentic)

Your own site

<a href="https://agentmods.dev/skills/robotostudio/turbo-start-sanity/generate-thumbnails-agentic"><img src="https://agentmods.dev/badge/skills/robotostudio/turbo-start-sanity/generate-thumbnails-agentic/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/robotostudio/turbo-start-sanity/generate-thumbnails-agentic"><img src="https://agentmods.dev/badge/skills/robotostudio/turbo-start-sanity/generate-thumbnails-agentic.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 81 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 5,926 The whole file, excluding the scripts and references it only reads on demand.

Security scan C 2 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00081	$0.05926
Opus 5	$0.00041	$0.02963
Sonnet 5	$0.00016	$0.01185
Haiku 4.5	$0.00008	$0.00593

Measured 7d ago against content hash d769e92ccfbc, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade C, and why

generate-thumbnails-agentic scanned grade C with 2 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Recursive force deletehighDestructive command

rm -rf with a variable or a broad path is one typo away from removing the wrong tree.

rm -rf apps/web/src/app/thumbnails/ # the preview page — dead code, regenerate when needed

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

`curl -sI localhost:3000`. If it isn't, ask before starting `pnpm dev:web` —

.claude/skills/generate-thumbnails-agentic/SKILL.md · 506 lines

How it starts

The opening of the file, as written. The whole thing — 506 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Generate Page Builder Thumbnails

Overview

The Studio insert menu shows a grid of block previews. This skill regenerates that whole set: render every block on a throwaway page, screenshot each one, and write the result to each block's thumbnail.png.

Read CLAUDE.md → "Page Builder Pattern" first — the paths below are load-bearing.

How thumbnails actually work here

The source of truth is one thumbnail.png per block, co-located with it:

packages/sanity-blocks/src/<kebab-block>/thumbnail.png   ← write this
                    ↓  pnpm --filter studio sync-thumbnails  (also runs on postinstall)
apps/studio/static/thumbnails/preview-<kebab-block>.png  ← generated, do not edit

packages/sanity-blocks/scripts/sync-thumbnails.ts deletes every preview-*.png in the target directory and re-copies from the block folders. Anything you hand-write into apps/studio/static/thumbnails/ is gone at the next install.

Format is fixed by previewImageUrl in apps/studio/schemaTypes/definitions/pagebuilder.ts, which camelCase→kebab-cases the schema name and appends .png:

PNG, not WebP — a .webp file 404s and the tile renders empty
1200×800, matching every existing thumbnail
filename is the block's directory name (kebab-case: feature-cards-icon), not the schema type name (featureCardsIcon)

Prerequisites

Playwright MCP is configured. Run a Playwright MCP tool (e.g. browser_navigate) to verify. It is not committed to this repo, so a fresh clone will not have it. If unavailable, STOP and ask the user:
"This skill drives the browser through the Playwright MCP server. Please run this and restart Claude Code:"
```
claude mcp add playwright -- npx @playwright/mcp@latest
```
Do NOT proceed until the user confirms it is available.

Read the full file on GitHub · 506 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

7d ago First seen · 506 lines · 81 tokens per session scan C d769e92ccfbc

Subscribe to this mod's changes

generate-thumbnails-agentic is a skill published in the GitHub repository robotostudio/turbo-start-sanity (176 stars, last pushed today), licensed MIT. It adds 81 tokens to every session and 5,926 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it C with 2 findings (recursive force delete, makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Design and UX headless-cms nextjs page-builder sanity sanity-template starter-template

magic-ui

Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (@magicui/), integration patterns, and practical quality checks for accessibility and maintainability.

magicuidesign/magicui · 56 tokens

kiranism-shadcn-dashboard

Guide for building features, pages, tables, forms, themes, and navigation in this Next.js 16 shadcn dashboard template. Use this skill whenever the user wants to add a new page, create a feature module, build a data table, add a form, configure navigation items, add a theme, set up RBAC access control, or work with…

Kiranism/next-shadcn-dashboard-starter · 142 tokens

next-partial-prefetching-adoption

Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the partialPrefetching flag, opt routes in with export const prefetch = 'partial', audit calls, or resolve the link-prefetch-partial and instant-shell-url-data…

sanity-io/next-sanity · 92 tokens

generate-thumbnails-agentic