Official agent skill

Sanity Tsdown Config

by sanity-io in sanity-io/sanity

Configure Sanity libraries with @sanity/tsdown-config, including its publishing defaults, React transforms, CSS extraction, TSDoc checks, and advanced tsdown composition.

OfficialMITAuto-check passedFrontend & Design

Install Sanity Tsdown Config

skills CLI
$ npx skills add sanity-io/sanity --skill sanity-tsdown-config -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sanity-io/sanity sanity-tsdown-config --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sanity-io/sanity.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/sanity-tsdown-config .claude/skills/sanity-tsdown-config && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
sanity-tsdown-config
GitHub stars
6.4k
Token cost
~2.3k tokens
SKILL.md length
808 words
Files
1
Skills in repo
34
Repo updated
First seen
Licence
MIT

At a glance

Configure Sanity libraries with @sanity/tsdown-config, including its publishing defaults, React transforms, CSS extraction, TSDoc checks, and advanced tsdown composition.

  • Editing tsdown.config.ts for a Sanity package
  • SKILL.md covers Install and configure, Know the defaults, Use PackageOptions first and Opt-in features, plus 3 more sections
  • Calls pnpm and npx
  • Deciding between PackageOptions and stock tsdown options

What it does

Sanity Tsdown Config is an agent skill from sanity-io/sanity, published by the product's own GitHub organization. Configure Sanity libraries with @sanity/tsdown-config, including its publishing defaults, React transforms, CSS extraction, TSDoc checks, and advanced tsdown composition. Use when creating or editing tsdown.config.ts for a Sanity package, or when deciding between PackageOptions and stock tsdown options.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with React. The repository describes itself as: Sanity Studio – Rapidly configure content workspaces powered by structured content. The licence is MIT.

When your agent uses it

  • Editing tsdown.config.ts for a Sanity package
  • Deciding between PackageOptions and stock tsdown options

Example prompts

  • “/sanity-tsdown-config”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit efa15fb. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm and npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Sanity Tsdown Config loads about 2.3k tokens when it runs. Until then it costs about 81 tokens; SKILL.md has 808 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~81
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sanity-io/sanity at commit efa15fb, republished under its MIT licence (© sanity-io). 808 words, ~2,327 tokens.

Download SKILL.mdSave it as .claude/skills/sanity-tsdown-config/SKILL.md (or your agent's skills folder).
name
sanity-tsdown-config
description
Configure Sanity libraries with @sanity/tsdown-config, including its publishing defaults, React transforms, CSS extraction, TSDoc checks, and advanced tsdown composition. Use when creating or editing tsdown.config.ts for a Sanity package, or when deciding between PackageOptions and stock tsdown options.
license
MIT
metadata.author
sanity-io
metadata.version
0.28

@sanity/tsdown-config

Use this skill for Sanity's opinionated wrapper around tsdown. Use the separately installable tsdown skill for generic tsdown concepts and options:

sh
npx skills add rolldown/tsdown --skill tsdown

This skill owns the wrapper's defaults and integration points. Do not replace the wrapper with a raw tsdown config unless the package explicitly does not want Sanity's library conventions.

Install and configure

@sanity/tsdown-config 0.28.x requires Node.js ^22.18.0 || ^24.11.0 || >=26.0.0.

sh
pnpm add -D @sanity/tsdown-config tsdown

Create tsdown.config.ts:

ts
import {defineConfig} from '@sanity/tsdown-config'

export default defineConfig({tsconfig: 'tsconfig.dist.json'})

Prefer a distribution tsconfig that includes only publishable source. Let package metadata drive declaration generation: tsdown enables dts when package.json has a types field or a types condition in exports.

Build and watch with tsdown:

sh
pnpm tsdown
pnpm tsdown --watch

Know the defaults

Do not restate these unless intentionally overriding them:

Behavior@sanity/tsdown-config default
Platform'neutral'; also externalizes node: built-ins and restores module/main resolution for inlined dependencies without exports
Format'esm'
Source mapstrue (stock tsdown defaults to false)
Package exportsAlways generated; in pnpm projects, devExports: true points local exports at source and puts built exports in publishConfig
Package validationpublint: true
Dependency subpathsdeps.resolveDepSubpath: true
Circular dependencieschecks.circularDependency: true; declaration-only cycles are suppressed, runtime cycles still warn
MinificationCompression/dead-code elimination only; no mangling or whitespace codegen; function and class names are preserved
Report{gzip: false}
CleaningStock tsdown default: clean outDir (dist)
Output directoryStock tsdown default: dist
Chunk namesKeep tsdown's hashed default

The neutral platform is deliberate for isomorphic packages. Do not switch to 'node' merely because some source imports Node APIs: 'node' can emit module-scope CommonJS interop that crashes browser bundles. Set a specific platform only when the package is truly runtime-specific.

The exports feature rewrites package.json on every build, including when CI=true. Review the resulting local exports and publishConfig.exports.

Use PackageOptions first

The wrapper directly exposes common package options: tsconfig, entry, format, dts, define, target, outDir, clean, platform, cwd, exports, sourcemap, deps, css, vanillaExtract, reactCompiler, styledComponents, bundleAnalyzer, tsdoc, and suppressWarnings.

Add only what the package needs:

ts
import {defineConfig} from '@sanity/tsdown-config'

export default defineConfig({
  tsconfig: 'tsconfig.dist.json',
  deps: {neverBundle: [/^some-package(\/|$)/]},
  tsdoc: true,
})

Under the neutral platform, user deps.neverBundle entries are appended to the built-in /^node:/ external rather than replacing it. Strings use tsdown matching semantics; use a regular expression when a dependency's subpaths must also match.

Opt-in features

React Compiler

The default implementation is Oxc and requires:

sh
pnpm add -D oxc-transform-react
ts
export default defineConfig({
  tsconfig: 'tsconfig.dist.json',
  reactCompiler: true,
})

Use reactCompiler: {target: '18'} for compiler options. Choose the Babel reference implementation only for features the Oxc port does not support, such as a custom jsxImportSource, a logger, or function-valued sources:

sh
pnpm add -D @rolldown/plugin-babel @babel/core babel-plugin-react-compiler
ts
reactCompiler: {target: '19', transform: 'babel'}

For an isomorphic component library, reactCompiler: {target: '19', reactServer: true} emits an additional uncompiled react-server variant and adds that export condition. This is experimental, creates two module instances across conditions, and is unnecessary for client-only packages that ship 'use client'.

styled-components

Set styledComponents: true to add display names and stable component IDs and to minify tagged CSS. This uses Oxc's native transform; do not install babel-plugin-styled-components.

Show full SKILL.md (356 more words)Show less
CSS and vanilla-extract
  • vanillaExtract: true extracts .css.ts files to dist/bundle.css.
  • css: {...} enables plain CSS, CSS modules, preprocessors, and PostCSS through the optional @tsdown/css peer. Install it with pnpm add -D @tsdown/css.
  • Both default CSS minification to true, use Sanity browser targets when the JS target has no browsers, and publish a conditional CSS export with a no-op Node shim.
  • Both can be enabled together: vanilla-extract uses bundle.css; css uses style.css.
  • Add published CSS to package.json#sideEffects, for example "sideEffects": ["*.css"].

Install @vanilla-extract/css when authoring .css.ts files. It is separate from the tsdown plugin bundled by this wrapper.

Bundle analysis

Keep analysis opt-in:

ts
bundleAnalyzer: process.env.ENABLE_BUNDLE_ANALYZER === 'true'

true emits the LLM-friendly dist/analyze-data.md. Exclude the report from package.json#files; it is not a publishable artifact.

TSDoc

Set tsdoc: true to run API Extractor after the build for TSDoc syntax and release-tag checks. This is off by default. It validates emitted entry declarations; it is not a replacement for TypeScript type-checking.

Reach stock tsdown through mergeConfig

PackageOptions is intentionally smaller than UserConfig. For a stock tsdown option it does not expose, await the Sanity config and merge over it:

ts
import {defineConfig} from '@sanity/tsdown-config'
import {mergeConfig} from 'tsdown'

export default mergeConfig(await defineConfig({tsconfig: 'tsconfig.dist.json'}), {
  hash: false,
})

Use this pattern for advanced tsdown or Rolldown behavior, including overriding checks.circularDependency or the wrapper's compress-only minify. mergeConfig deep-merges plain objects, appends plugins, and replaces scalars and non-plugin arrays.

With the @sanity/tsconfig/isolated-declarations preset, annotate the export to avoid a non-portable inferred type:

ts
import {defineConfig} from '@sanity/tsdown-config'
import type {UserConfig} from 'tsdown'

export default defineConfig() satisfies Promise<UserConfig>

Use Promise<UserConfig[]> when reactCompiler.reactServer is enabled.

Do not add by default

  • Do not enable exe; this wrapper targets publishable libraries, not standalone executables.
  • Do not enable devtools; it is not part of the wrapper's package API or defaults.
  • Do not replace compress-only output with full minification. Consumer production builds minify dependencies again, while published names and readable output improve debugging.
  • Do not design around Storybook. Storybook is an app/demo concern, not this library build contract.
  • Do not disable exports, publint, circular-dependency checks, or source maps without a concrete package requirement.

Choose the right Sanity tool

Use @sanity/pkg-utils and pkg build when a conventional Sanity package already describes its entries and runtime conditions in package.json#exports. Use this wrapper directly when the build needs arbitrary tsdown options, multiple configs, reactCompiler.reactServer, or behavior outside pkg-utils' package.config.ts surface.

© sanity-io, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/sanity-tsdown-config of sanity-io/sanity.

Open the folder on GitHubat commit efa15fb

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in sanity-io/sanity, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Sanity Tsdown Config next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Sanity Tsdown Config compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Sanity Tsdown Config this skillsanity-io/sanity6.4k—~2.3kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
React UI State PatternsChrisWiles/claude-code-showcase6.1k8 repos~1.6kAutomated safety check: PassNone
GSAP Core Animationgreensock/gsap-skills16k3 repos~3.7kAutomated safety check: PassMIT

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed
  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed
  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed
  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 8 repos~1.6k tokens
    Frontend & DesignAuto-check passed
  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 3 repos~3.7k tokens
    Frontend & DesignAuto-check passed
  • Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from sanity-io/sanity

All 34 skills in this repo
  • Playwright CLI

    sanity-io/sanity

    Official

    Automates browser interactions for web testing, form filling, screenshots, and data extraction.

    6.4k GitHub starsUsed in 18 repos~1.9k tokens
    Auto-check passed
  • Find Skills

    sanity-io/sanity

    Official

    Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities.

    6.4k GitHub starsUsed in 67 repos~1.2k tokens
    Auto-check passed
  • Official

    React and Next.js performance optimization guidelines from Vercel Engineering.

    6.4k GitHub starsUsed in 129 repos~1.6k tokens
    Auto-check passed
  • Before And After

    sanity-io/sanity

    Official

    Add existing screenshots or screen recordings to a GitHub pull request as a before/after or preview block.

    6.4k GitHub starsUsed in 1 repo~2.1k tokens
    Auto-check passed
  • React Devtools

    sanity-io/sanity

    Official

    React DevTools CLI for AI agents. An agent skill from sanity-io/sanity.

    6.4k GitHub starsUsed in 3 repos~2.1k tokens
    Auto-check passed
  • TDD

    sanity-io/sanity

    Official

    Test-driven development with red-green-refactor loop. An agent skill from sanity-io/sanity.

    6.4k GitHub starsUsed in 20 repos~1k tokens
    Auto-check passed

Works with

Questions about Sanity Tsdown Config

What does Sanity Tsdown Config do?

Configure Sanity libraries with @sanity/tsdown-config, including its publishing defaults, React transforms, CSS extraction, TSDoc checks, and advanced tsdown composition. Sanity Tsdown Config is an agent skill from sanity-io/sanity, published by the product's own GitHub organization. Configure Sanity libraries with @sanity/tsdown-config, including its publishing defaults, React transforms, CSS extraction, TSDoc checks, and advanced tsdown composition.

When should I use Sanity Tsdown Config?

Sanity Tsdown Config fits situations like: editing tsdown.config.ts for a Sanity package; deciding between PackageOptions and stock tsdown options.

How do I install Sanity Tsdown Config in Claude Code?

Run `npx skills add sanity-io/sanity --skill sanity-tsdown-config -a claude-code`. Or copy the skill folder (.agents/skills/sanity-tsdown-config in sanity-io/sanity) into .claude/skills/sanity-tsdown-config in your project. Claude Code loads it when a task matches its description.

How do I install Sanity Tsdown Config in Codex?

Run `npx skills add sanity-io/sanity --skill sanity-tsdown-config -a codex`. Or copy the skill folder (.agents/skills/sanity-tsdown-config in sanity-io/sanity) into .agents/skills/sanity-tsdown-config in your project. Codex loads it when a task matches its description.

Can I use Sanity Tsdown Config in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sanity-io/sanity --skill sanity-tsdown-config -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sanity-tsdown-config, .gemini/skills/sanity-tsdown-config, .github/skills/sanity-tsdown-config and .opencode/skills/sanity-tsdown-config in your project.

What does Sanity Tsdown Config need to run?

Going by SKILL.md and its folder, Sanity Tsdown Config needs the command-line tools its instructions call (pnpm and npx). Our summary lists: Node.js.

Does Sanity Tsdown Config access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Sanity Tsdown Config safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Sanity Tsdown Config use?

Sanity Tsdown Config is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Sanity Tsdown Config use?

About 2.3k tokens (SKILL.md is roughly 9.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Sanity Tsdown Config?

Skills that share tags, products or a category with Sanity Tsdown Config: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), React Router Development (remix-run/react-router, 57k stars) and React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Sanity Tsdown Config?

sanity-io (a GitHub organization, an official publisher) maintains it in sanity-io/sanity, which has 6,352 GitHub stars. The repository holds 34 skills in this directory. The repository was last updated on October 9, 2026.

Source: sanity-io/sanity on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.