Do I need an existing Sanity project to use this skill?

Yes, this skill is designed to configure the frontend of an existing project that uses Sanity as its backend.

What is Sanity Visual Editing?

Sanity Visual Editing allows editors to see their changes in real-time and click on elements in the preview to edit them directly in the Sanity Studio.

Which frameworks are supported by the Sanity Visual Editing skill?

The skill supports Next.js, React Router, Remix, Svelte, Nuxt, and Astro.

What is Stega configuration?

Stega is a technology used by Sanity to encode metadata into content strings, which enables the 'click-to-edit' overlays in your frontend. This skill automates its configuration.

Does this skill handle package installation?

Yes, it detects your framework and runs the appropriate npm/yarn commands to install packages like next-sanity, @sanity/client, or framework-specific loaders.

Sanity Visual Editing Setup

Name: Sanity Visual Editing Setup
Author: sanity-io

bysanity-io

•

内容管理

Configures Sanity Visual Editing for your frontend framework to enable real-time previews and click-to-edit overlays.

This skill automates the complex integration of Sanity's Visual Editing features into your web applications, providing a seamless bridge between your content and code. It intelligently detects your specific frontend framework—including Next.js, Remix, Svelte, Nuxt, or Astro—and handles the installation of necessary dependencies, configuration of the Sanity Client with Stega, and the setup of framework-specific data loaders. This ensures that content creators can benefit from live previews and instant 'click-to-edit' functionality directly within the application's interface, streamlining the content management workflow.

主要功能

01Framework-specific loader implementation (e.g., defineLive for Next.js)

02Automated installation of required Sanity packages and loaders

0337 GitHub stars

04Comprehensive Stega configuration for interactive visual overlays

05Automatic framework detection for Next.js, Remix, Svelte, Nuxt, and Astro

06Verification steps to ensure successful integration with Sanity Studio

使用场景

01Implementing click-to-edit functionality for content editors

02Configuring framework-specific data fetching for real-time updates

03Enabling live content previews for a headless CMS project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sanity-io/agent-toolkit sanity-visual-editing-setup

For use in Claude.ai and ChatGPT

主要功能

01Framework-specific loader implementation (e.g., defineLive for Next.js)

02Automated installation of required Sanity packages and loaders

0337 GitHub stars

04Comprehensive Stega configuration for interactive visual overlays

05Automatic framework detection for Next.js, Remix, Svelte, Nuxt, and Astro

06Verification steps to ensure successful integration with Sanity Studio

使用场景

01Implementing click-to-edit functionality for content editors

02Configuring framework-specific data fetching for real-time updates

03Enabling live content previews for a headless CMS project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sanity-io/agent-toolkit sanity-visual-editing-setup

For use in Claude.ai and ChatGPT