portable-text-conversion

作成者: sanity-io

HTMLおよびMarkdownコンテンツをSanity用のPortable Textブロックに変換します。レガシーCMSからのコンテンツ移行時や、HTMLやMarkdownをSanityにインポートする際に使用します。

npx skills add https://github.com/sanity-io/agent-toolkit --skill portable-text-conversion

Portable Text Conversion

Convert external content (HTML, Markdown) into Portable Text for Sanity. Three main approaches:

  1. markdownToPortableText — Convert Markdown directly using @portabletext/markdown (recommended for Markdown)
  2. htmlToBlocks — Parse HTML into PT blocks using @portabletext/block-tools (for HTML migration)
  3. Manual construction — Build PT blocks directly from any source (APIs, databases, etc.)

Portable Text Specification

Understand the target format before converting. PT is an array of blocks:

[
  {
    "_type": "block",
    "_key": "abc123",
    "style": "normal",
    "children": [
      {"_type": "span", "_key": "def456", "text": "Hello ", "marks": []},
      {"_type": "span", "_key": "ghi789", "text": "world", "marks": ["strong"]}
    ],
    "markDefs": []
  },
  {
    "_type": "block",
    "_key": "jkl012",
    "style": "h2",
    "children": [
      {"_type": "span", "_key": "mno345", "text": "A heading", "marks": []}
    ],
    "markDefs": []
  },
  {
    "_type": "image",
    "_key": "pqr678",
    "asset": {"_type": "reference", "_ref": "image-abc-200x200-png"}
  }
]

Key rules:

  • Every block and span needs _key (unique within the array)
  • _type: "block" is for text blocks; custom types use their own _type
  • markDefs holds annotation data; marks on spans reference markDefs[*]._key or are decorator strings
  • Lists use listItem ("bullet" | "number") and level (1, 2, 3...) on regular blocks

Conversion Rules

Read the rule file matching your source format:

  • Markdown → Portable Text: rules/markdown-to-pt.md — @portabletext/markdown with markdownToPortableText (recommended)
  • HTML → Portable Text: rules/html-to-pt.md — @portabletext/block-tools with htmlToBlocks
  • Manual PT Construction: rules/manual-construction.md — build blocks programmatically from any source

Note: @sanity/block-tools is the legacy package name. Always use @portabletext/block-tools for new projects. The API is the same.

sanity-ioのその他のスキル

tdd
sanity-io
テスト駆動開発のレッド・グリーン・リファクタリングループ。ユーザーがTDDを使って機能を構築したりバグを修正したい場合、「レッド・グリーン・リファクタリング」に言及した場合、または…
performance-optimization
sanity-io
アプリケーションのパフォーマンスを最適化します。パフォーマンス要件がある場合、パフォーマンスの低下が疑われる場合、またはCore Web Vitalsや読み込み時間が…
content-experimentation-best-practices
sanity-io
コンテンツ実験の設計、実行、分析に関する構造化されたガイダンスで、コンバージョンとエンゲージメントを向上させます。仮説フレームワーク、指標の選択、サンプルサイズの計算、A/Bテストや多変量実験における統計的有意性検定を網羅。p値、信頼区間、検出力分析、結果解釈のためのベイズ手法に関する詳細なリソースを提供。フィールドレベルでバリアントを管理し、外部と接続するためのCMS統合パターンを含みます。
content-modeling-best-practices
sanity-io
構造化コンテンツモデリングのガイダンス:スキーマ設計、再利用性、マルチチャネル配信に対応。コンテンツをページではなくデータとして扱う、単一情報源の維持、将来のチャネルに対応した設計、編集者ワークフローの最適化といった基本原則を網羅。参照と埋め込みオブジェクトの判断基準、関心の分離、コンテンツ再利用パターンを提供。フラット、階層的、ファセット型アプローチのタクソノミーと分類ガイダンスを提示。対象範囲:...
portable-text-serialization
sanity-io
Portable TextをReact、Svelte、Vue、Astro、HTML、Markdown、プレーンテキストにレンダリングおよびシリアライズします。任意のフロントエンドでPortable Textレンダリングを実装する際に使用します…
sanity-best-practices
sanity-io
Sanity CMS開発におけるフレームワーク横断的な包括的なベストプラクティスと統合ガイド。Next.js、Nuxt、Astro、Remix、SvelteKit、Angularを含む10以上のフレームワーク統合を、フレームワーク固有のパターンとセットアップガイダンスとともにカバー。スキーマ設計、GROQクエリ最適化、ビジュアル編集、Portable Text、画像、TypeGen、ローカライゼーション、コンテンツ移行に関するトピックガイドを含む。タスクタイプに基づいて関連ガイドのみを読み込むためのクイックリファレンス構造を提供。
sanity-migration
sanity-io
他のCMSやコンテンツシステムからSanityへの移行を計画、実施、レビューします。AEM、Adobe Experience Manager、Contentful、Strapi、Webflow、WordPress、Payload、Drupal、Markdown/MDX/frontmatterファイル、WXR/XMLエクスポート、CMS API、データベースダンプ、静的HTMLからの移行やSanityへのリプラットフォーム時、または抽出、変換、Portable Text変換、アセット移行、リダイレクト、検証、カットオーバーワークフローの設計時に使用します。
data-analysisdatabasedevelopment
seo-aeo-best-practices
sanity-io
包括メタデータ、構造化データ、EEAT、AI対応を網羅した包括的なSEOおよびAEO最適化ガイダンス。Google、ChatGPT、Perplexity、および類似プラットフォームにおける従来の検索エンジン最適化(SEO)とAI回答エンジン最適化(AEO)の両方をカバー。メタデータ、Open Graphタグ、サイトマップ、robots.txt、hreflang、国際SEO設定などの技術的SEOの基本を提供。Article、FAQ、Breadcrumb、ProductスキーマのJSON-LD構造化データパターンを提供。実装...