Official agent skill

Portable Text Serialization

Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text.

OfficialMITAuto-check passedFrontend & Design

Install Portable Text Serialization

skills CLI

$ npx skills add sanity-io/agent-toolkit --skill portable-text-serialization -a claude-code

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

GitHub CLI

$ gh skill install sanity-io/agent-toolkit portable-text-serialization --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/agent-toolkit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/portable-text-serialization .claude/skills/portable-text-serialization && 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/

Paste into Claude Code

Install the "portable-text-serialization" agent skill from https://github.com/sanity-io/agent-toolkit/tree/main/skills/portable-text-serialization into .claude/skills/portable-text-serialization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portable-text-serialization", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/sanity-io/agent-toolkit/tree/main/skills/portable-text-serialization

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add sanity-io/agent-toolkit --skill portable-text-serialization -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install sanity-io/agent-toolkit portable-text-serialization --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sanity-io/agent-toolkit.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/portable-text-serialization .agents/skills/portable-text-serialization && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "portable-text-serialization" agent skill from https://github.com/sanity-io/agent-toolkit/tree/main/skills/portable-text-serialization into .agents/skills/portable-text-serialization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portable-text-serialization", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add sanity-io/agent-toolkit --skill portable-text-serialization -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install sanity-io/agent-toolkit portable-text-serialization --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sanity-io/agent-toolkit.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/portable-text-serialization .cursor/skills/portable-text-serialization && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "portable-text-serialization" agent skill from https://github.com/sanity-io/agent-toolkit/tree/main/skills/portable-text-serialization into .cursor/skills/portable-text-serialization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portable-text-serialization", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/sanity-io/agent-toolkit.git --path skills/portable-text-serialization

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add sanity-io/agent-toolkit --skill portable-text-serialization -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install sanity-io/agent-toolkit portable-text-serialization --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sanity-io/agent-toolkit.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/portable-text-serialization .gemini/skills/portable-text-serialization && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "portable-text-serialization" agent skill from https://github.com/sanity-io/agent-toolkit/tree/main/skills/portable-text-serialization into .gemini/skills/portable-text-serialization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portable-text-serialization", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install sanity-io/agent-toolkit portable-text-serialization

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add sanity-io/agent-toolkit --skill portable-text-serialization -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/sanity-io/agent-toolkit.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/portable-text-serialization .github/skills/portable-text-serialization && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "portable-text-serialization" agent skill from https://github.com/sanity-io/agent-toolkit/tree/main/skills/portable-text-serialization into .github/skills/portable-text-serialization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portable-text-serialization", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add sanity-io/agent-toolkit --skill portable-text-serialization -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install sanity-io/agent-toolkit portable-text-serialization --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sanity-io/agent-toolkit.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/portable-text-serialization .opencode/skills/portable-text-serialization && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "portable-text-serialization" agent skill from https://github.com/sanity-io/agent-toolkit/tree/main/skills/portable-text-serialization into .opencode/skills/portable-text-serialization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portable-text-serialization", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: portable-text-serialization
GitHub stars: 188
Used in: 1 other repo
Token cost: ~1.1k tokens
SKILL.md length: 308 words
Files: 8
Skills in repo: 8
Repo updated: Oct 5, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text.

Implementing Portable Text rendering in any frontend framework
SKILL.md covers Portable Text Structure (Quick…, Component Mapping Pattern (All…, Framework-Specific Rules and Common Patterns (All Frameworks)
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Building custom serializers for non-standard block types

What it does

Portable Text Serialization is an agent skill from sanity-io/agent-toolkit, published by the product's own GitHub organization. Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building custom serializers for non-standard block types, converting Portable Text to HTML strings server-side, converting Portable Text to Markdown, extracting plain text from Portable Text, or troubleshooting rendering issues with marks, blocks, lists, or custom types.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files (for example `rules/astro.md`, `rules/html.md` and `rules/markdown.md`).

It sits in Frontend & Design, covering Static sites and blogs, Backend development and Markdown. It works with React, Astro, Svelte and Vue.js. The repository describes itself as: Collection of resources to help AI agents build better with Sanity. The licence is MIT.

When your agent uses it

Implementing Portable Text rendering in any frontend framework
Building custom serializers for non-standard block types
Converting Portable Text to HTML strings server-side
Converting Portable Text to Markdown

Example prompts

“/portable-text-serialization”

Requirements

Python 3

What it can do on your machine

Read from SKILL.md and the folder at commit 88d6cdf. 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
No scripts in the folder and no shell commands in SKILL.md (its code samples are groq).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- portabletext.org
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

Portable Text Serialization loads about 1.1k tokens when it runs. Until then it costs about 117 tokens; SKILL.md has 308 words of instructions outside code blocks.

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

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/agent-toolkit at commit 88d6cdf, republished under its MIT licence (© sanity-io). 308 words, ~1,078 tokens.

Download SKILL.mdSave it as .claude/skills/portable-text-serialization/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.

name: portable-text-serialization
description: Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building custom serializers for non-standard block types, converting Portable Text to HTML strings server-side, converting Portable Text to Markdown, extracting plain text from Portable Text, or troubleshooting rendering issues with marks, blocks, lists, or custom types.
license: MIT
metadata.author: sanity
metadata.version: 1.0.0

Portable Text Serialization

Render Portable Text content across frameworks using the @portabletext/* library family. Each library follows the same component-mapping pattern: you provide a components object that maps PT node types to framework-specific renderers.

Portable Text Structure (Quick Reference)

PT is an array of blocks. Each block has _type, optional style, children (spans), markDefs, listItem, and level.

Root array
├── block (_type: "block")
│   ├── style: "normal" | "h1" | "h2" | "blockquote" | ...
│   ├── children: [span, span, ...]
│   │   └── span: { _type: "span", text: "...", marks: ["strong", "<markDefKey>"] }
│   ├── markDefs: [{ _key, _type: "link", href: "..." }, ...]
│   ├── listItem: "bullet" | "number" (optional)
│   └── level: 1, 2, 3... (optional, for nested lists)
├── custom block (_type: "image" | "code" | any custom type)
└── ...more blocks

Marks come in two forms:

Decorators: string values in marks[] like "strong", "em", "underline", "code"
Annotations: keys in marks[] referencing entries in markDefs[] (e.g., links, internal references)

Component Mapping Pattern (All Frameworks)

Every @portabletext/* library accepts a components object with these keys:

Key	Renders	Props/Data
`types`	Custom block/inline types (image, code, CTA)	`value` (the block data)
`marks`	Decorators + annotations	`children` + `value` (mark data)
`block`	Block styles (h1, normal, blockquote)	`children`
`list`	List wrappers (ul, ol)	`children`
`listItem`	List items	`children`
`hardBreak`	Line breaks within a block	—

Framework-Specific Rules

Read the rule file matching your framework:

React / Next.js: rules/react.md — @portabletext/react or next-sanity
Svelte / SvelteKit: rules/svelte.md — @portabletext/svelte
Vue / Nuxt: rules/vue.md — @portabletext/vue
Astro: rules/astro.md — astro-portabletext
HTML (server-side): rules/html.md — @portabletext/to-html
Markdown: rules/markdown.md — @portabletext/markdown
Plain text extraction: rules/plain-text.md — @portabletext/toolkit

Additional Community Serializers

These are listed on portabletext.org but don't have dedicated rule files:

Target	Package
React Native	`@portabletext/react-native-portabletext`
React PDF	`@portabletext/react-pdf-portabletext`
Solid	`solid-portabletext`
Qwik	`portabletext-qwik`
Shopify Liquid	`portable-text-to-liquid`
PHP	`sanity-php` (SanityBlockContent class)
Python	`portabletext-html`
C# / .NET	`dotnet-portable-text`
Dart / Flutter	`flutter_sanity_portable_text`

Common Patterns (All Frameworks)

Custom Types Need Explicit Components

PT renderers only handle standard blocks by default. Custom types (image, code, callToAction, etc.) require explicit component mappings — they won't render otherwise.

Keep Components Object Stable

In React/Vue, define components outside the render function or memoize it. Recreating on every render causes unnecessary re-renders.

Handle Missing Components Gracefully

All libraries accept onMissingComponent to control behavior when encountering unknown types:

false — suppress warnings
Custom function — log or report

Querying PT with GROQ

Always expand references inside custom blocks:

groq

body[]{
  ...,
  _type == "image" => {
    ...,
    asset->
  },
  markDefs[]{
    ...,
    _type == "internalLink" => {
      ...,
      "slug": @.reference->slug.current
    }
  }
}

Files

SKILL.md and 7 other files in skills/portable-text-serialization of sanity-io/agent-toolkit.

SKILL.md
rules/astro.md
rules/html.md
rules/markdown.md
rules/plain-text.md
rules/react.md
rules/svelte.md
rules/vue.md

Open the folder on GitHubat commit 88d6cdf

Used in 1 other repository

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

robotostudio/turbo-start-sanity.claude/skills/portable-text-serialization

Compare with similar skills

Portable Text Serialization 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.

Portable Text Serialization compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Portable Text Serialization this skillsanity-io/agent-toolkit	188	1 repos	~1.1k	Automated safety check: Pass	MIT	3 days ago
Kill AI Slopyetone/kill-ai-slop	1.3k	—	~1.4k	Automated safety check: Pass	Apache-2.0	24 days ago
GlideSrivarsanK/Glide	125	—	~1.7k	Automated safety check: Pass	Apache-2.0	8 days ago
Glide Component SegregatorSrivarsanK/Glide	125	—	~1.2k	Automated safety check: Pass	Apache-2.0	8 days ago
Glide SetupSrivarsanK/Glide	125	—	~868	Automated safety check: Pass	Apache-2.0	8 days ago
Motion Dev Animations199-biotechnologies/motion-dev-animations-skill	114	1 repos	~2.8k	Automated safety check: Notes	MIT	6 mo ago

Similar skills

Kill AI Slop
yetone/kill-ai-slop
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.
1.3k GitHub stars~1.4k tokensUpdated 24 days ago
Frontend & DesignAuto-check passed
Glide
SrivarsanK/Glide
Authoritative guide and toolset for AI agents to operate, configure, and visually design applications using Glide (@srivarsank/glide).
125 GitHub stars~1.7k tokensUpdated 8 days ago
Frontend & DesignAuto-check passed
Glide Component Segregator
SrivarsanK/Glide
Component segregation guide for Glide (@srivarsank/glide). An agent skill from SrivarsanK/Glide.
125 GitHub stars~1.2k tokensUpdated 8 days ago
Frontend & DesignAuto-check passed
Glide Setup
SrivarsanK/Glide
Zero-error setup guide for AI agents to install and configure @srivarsank/glide visual editor on any React, Vue, Svelte, Astro, or HTML Vite project in one prompt.
125 GitHub stars~868 tokensUpdated 8 days ago
Frontend & DesignAuto-check passed
Motion Dev Animations
199-biotechnologies/motion-dev-animations-skill
Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.
114 GitHub starsUsed in 1 repo~2.8k tokens
Frontend & DesignAuto-check: notes
Solar Icons
saoudi-h/solar-icons
Add Solar Icons via @solar-icons/cli to any React, Vue, Svelte, Solid, Angular, React Native, Nuxt, Static, vanilla JS, or Laravel Blade project.
186 GitHub stars~2.1k tokensUpdated today
Frontend & DesignAuto-check passed

More from sanity-io/agent-toolkit

All 8 skills in this repo

Sanity Best Practices
sanity-io/agent-toolkit
Official
Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, webhooks, Blueprints…
188 GitHub stars~1.3k tokensUpdated 3 days ago
Auto-check passed
Portable Text Conversion
sanity-io/agent-toolkit
Official
Convert HTML and Markdown content into Portable Text blocks for Sanity.
188 GitHub starsUsed in 1 repo~664 tokens
Auto-check passed
Sanity Migration
sanity-io/agent-toolkit
Official
Plans, implements, and reviews migrations from other CMSes and content systems into Sanity.
188 GitHub stars~1.4k tokensUpdated 3 days ago
Auto-check passed
SEO Aeo Best Practices
sanity-io/agent-toolkit
Official
SEO and AEO best practices for metadata, Open Graph, sitemaps, robots.txt, hreflang, JSON-LD structured data, EEAT, and content optimized for search engines and AI answer surfaces.
188 GitHub starsUsed in 2 repos~467 tokens
Auto-check passed
Sanity Studio Upgrade
sanity-io/agent-toolkit
Official
Produces a tailored Sanity Studio upgrade plan by inspecting the repository's installed versions, config, and source, then reporting only the breaking changes that actually apply.
188 GitHub stars~4.8k tokensUpdated 3 days ago
Auto-check passed
Content Experimentation Best Practices
sanity-io/agent-toolkit
Official
Content experimentation and A/B testing guidance covering experiment design, hypotheses, metrics, sample size, statistical foundations, CMS-managed variants, and common analysis pitfalls.
188 GitHub starsUsed in 1 repo~469 tokens
Auto-check passed

Works with

Questions about Portable Text Serialization

What does Portable Text Serialization do?

Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Portable Text Serialization is an agent skill from sanity-io/agent-toolkit, published by the product's own GitHub organization. Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text.

When should I use Portable Text Serialization?

Portable Text Serialization fits situations like: implementing Portable Text rendering in any frontend framework; building custom serializers for non-standard block types; converting Portable Text to HTML strings server-side; converting Portable Text to Markdown.

How do I install Portable Text Serialization in Claude Code?

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

How do I install Portable Text Serialization in Codex?

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

Can I use Portable Text Serialization 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/agent-toolkit --skill portable-text-serialization -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/portable-text-serialization, .gemini/skills/portable-text-serialization, .github/skills/portable-text-serialization and .opencode/skills/portable-text-serialization in your project.

What does Portable Text Serialization need to run?

SKILL.md names no scripts, command-line tools or credentials: Portable Text Serialization is instructions for the agent only. Our summary lists: Python 3.

Does Portable Text Serialization access the network?

SKILL.md names 1 domain. As links in the text: portabletext.org. This is read from the text; nothing was executed.

Is Portable Text Serialization 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 Portable Text Serialization use?

Portable Text Serialization 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 Portable Text Serialization use?

About 1.1k tokens (SKILL.md is roughly 4.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 Portable Text Serialization?

Skills that share tags, products or a category with Portable Text Serialization: Kill AI Slop (yetone/kill-ai-slop, 1.3k stars), Glide (SrivarsanK/Glide, 125 stars), Glide Component Segregator (SrivarsanK/Glide, 125 stars) and Glide Setup (SrivarsanK/Glide, 125 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Portable Text Serialization?

sanity-io (a GitHub organization, an official publisher) maintains it in sanity-io/agent-toolkit, which has 188 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 5, 2026.

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

Install Portable Text Serialization

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Portable Text Serialization

Portable Text Structure (Quick Reference)

Component Mapping Pattern (All Frameworks)

Framework-Specific Rules

Additional Community Serializers

Common Patterns (All Frameworks)

Custom Types Need Explicit Components

Keep Components Object Stable

Handle Missing Components Gracefully

Querying PT with GROQ

Files

Used in 1 other repository

Compare with similar skills

Similar skills

More from sanity-io/agent-toolkit

Related

Questions about Portable Text Serialization