Studio Skills: LLM Prompts for Every Studio Task

Studio ships 110 LLM skills: focused, copy-paste-ready prompts that turn natural-language requests like "install Studio in this app" or "register my Hero component" into actionable steps the LLM walks through with you. Skills work in any coding agent that reads Agent Skills (Claude Code, claude.ai, Cursor, Codex, GitHub Copilot, Gemini CLI, Windsurf, Cline) and any chat LLM (Gemini, ChatGPT, Copilot, Claude.ai web).

Starting from a design (Figma / screenshot / mock)? Run decompose-design. It drives the entire build end-to-end:

1. Emits a machine-readable build sheet (atomics + Layer-2 containers + Sections + proposed Content Type + governance dial + unmapped-fields note).
2. Offers to scaffold + register components (chains register-component).
3. Offers to author Sections + Template automatically via API authoring (fastest, no canvas clicks) or canvas automation via Playwright MCP (slower, produces a canvas trail).
4. Chains verify-setup to close the loop.

Prerequisite mental model: Components, sections and templates.

The 110 skills

The authoritative list lives in skills/skills-index.md, a trigger-phrase table plus a topic map grouping every skill by intent (getting started, install + configure, provisioning, register components, wire preview routes, author sections + templates, bind data, migrate + ship, verify + troubleshoot, concepts). The list here would drift. The index is generated + linted on every change.

Every skill is pull-routed through a single studio router. Only the router's frontmatter loads on a turn, about 463 tokens for the whole corpus. When it fires, it reads skills-index.md and pulls the one specialist your request needs.

The sixteen categories

The topic map groups every skill by intent. The router matches your request to a category, then reads the one skill it needs.

#	Category	Skills	What it covers
1	Start here	6	Onboarding, project diagnosis, architecture planning, and the Connected-vs-Freeform decision. Runs before anything changes state
2	Install and configure the app	8	The SDKs, Live Preview, canvas URL, local HTTPS, SDK upgrades, optional MCP servers
3	Provision the Contentstack side	5	CMA authentication, project and stack bootstrap, schema migration, bulk import
4	Components: plan and register	9	Library design, JSX decomposition, registration, design tokens, Figma generation
5	Component contracts	4	The prop, render and CSLP contracts a component must satisfy before Studio can drive it
6	Designs to a plan	6	Turning a Figma file, screenshot or existing content type into a build sheet
7	Sections	8	Building Sections, repeating Sections, exposing props, and driving the canvas UI
8	Section Slots and smart containers	5	Slots and their defaults, repeaters, condition blocks, slot data
9	Templates	5	Connected, Freeform and page-builder Templates, plus pinned entries and queries
10	Routes and template URLs	3	The canvas route, the catch-all, and the CSR-or-SSR decision
11	Data binding	7	External data, your own state, variant aliases, embedding, reference depth
12	Author by API: the contract	7	The composition JSON contract, bindings and encoding
13	Author by API: recipes	8	Worked recipes for repeaters, sections, exposed props, templates, migration
14	Ship and verify	7	Verification, visual parity, deployment, third-party script gating
15	Troubleshoot by symptom	5	Symptom-first routing into canvas, resolution, binding and SSR failures
16	Concepts	12	Explanations of what a thing is, rather than procedures for doing it

For an LLM-ready browsable listing (paste into a chat to bootstrap any model): docs/prompts/ and docs/llms.txt.

The pages under docs/prompts/ mirror the canonical skill sources in skills/src/, byte for byte.

Install the skills from the official bundle

Studio's skills ship in Contentstack's official agent skills bundle, contentstack/contentstack-agent-skills, as one skill: studio, with every other skill as a file inside it.

In Claude Code:

/plugin marketplace add contentstack/contentstack-agent-skills
/plugin install contentstack-skills@contentstack-skills

For any agent, install only Studio's skills with the skills CLI:

npx skills add contentstack/contentstack-agent-skills --skill studio

claude.ai, Cursor, Codex, GitHub Copilot and Gemini CLI each have their own install. See Install the skills.

Use a skill

After install, use natural language in your editor's chat:

"Install Studio in this project" loads install-studio, and the LLM walks the install with you

"Register my Hero component" loads register-component, reads your Hero source, writes the registration

"Canvas is blank, help debug" loads the troubleshoot router, classifies the symptom, loads the matching specialist

"Build a Card Grid section iterating related posts" loads build-repeating-section

For chat LLMs without editor integration (Gemini, ChatGPT, Claude.ai web), open the matching skill page below and paste the prompt body directly.

All skills: full listing

Each links to the full prompt text. Skills are alphabetical. The topic map in the skills index groups them by intent.

Orchestrators (entry-point skills that route to specialists)

• analyze-project-fit: pre-flight check before installing Studio in an existing project
• byoc-end-to-end: bring-your-own-components walkthrough: register, build sections, build templates, then ship
• start-here-zero-knowledge: zero-knowledge onboarding for first-time users
• studio-tour: intent-driven walkthrough that delegates to specialist skills at each step
• troubleshoot: symptom router for the five troubleshoot specialists

Setup

• install-studio: install the three SDKs + wire studioSdk.init
• install-live-preview: install Live Preview standalone (without full Studio)
• install-playwright-mcp: optional Playwright MCP for one-shot canvas verification
• install-contentstack-mcp: optional Contentstack MCP for CMA auth + tool-call provisioning (no pasted authtoken)
• enable-visual-experience: turn on Live Preview at the stack level
• configure-studio: configure Environment, Language, Canvas URL, Freeform toggle
• setup-section-preview: add the /canvas route that mounts <StudioCanvas />
• setup-template-preview-routes: wire the catch-all visitor route via <StudioComponent />
• setup-local-https-canvas: optional locally-trusted HTTPS for the canvas-app
• configure-csr-vs-ssr: decide and wire CSR or SSR for your render path
• register-component: read a React component, write its registerComponent call
• register-breakpoints: register design breakpoints + switcher UI
• register-json-rte: register the unified RTE renderer for json_rte fields
• import-design-tokens: register tokens from Tailwind / CSS variables / JSON
• upgrade-studio-sdk: bump the Studio SDK packages

Author

• build-section: author a Section linked to a structural schema
• build-repeating-section: parent + child Section pattern for card grids / lists
• build-connected-template: Template bound to a content type
• build-freeform-template: Template without a CT (three-AND rule applies)
• choose-connected-vs-freeform: pick the template flavor for a new page
• design-section-from-jsx: design a Section's linked schema from existing JSX
• discover-sections: inventory existing routes to identify Section candidates
• expose-section-props: let templates override a Section's prop per-instance
• use-section-slot: carve a Section Slot inside a Section
• configure-slot-defaults: give a Section Slot a default section and restrict which sections may drop in
• use-repeater: iterate a multi-valued field
• use-condition-block: disambiguate iteration items per CT / block type
• wire-component-default-data: set placeholder content for unbound props
• wire-external-data: bring non-Contentstack data into a composition
• render-with-own-data: render a composition against data you already hold, via <StudioComposition context={...} />
• wire-slot-data: carry an owning component's data into its slot prop with <Slot data={...}>
• wire-variant-alias: route-level Personalize variant rendering
• pin-entry-to-freeform: pin a specific entry on a Freeform template
• pin-query-to-freeform: pin a dynamic query on a Freeform template
• embed-composition: embed a Studio composition inside a code-owned page
• migrate-page-to-studio: final swap of a hand-coded route to <StudioComponent />
• author-without-code: compose pages purely in Studio's UI, no engineering
• author-composition-via-api: programmatic composition authoring via CMA
• plan-studio-architecture: from project requirements, print an architecture plan
• provision-studio-project: bootstrap a Studio project via API
• provision-studio-stack: seed CTs, global fields, entries, and assets
• figma-generate-components: generate registered components from Figma

Troubleshoot

• troubleshoot-canvas: canvas iframe symptoms (blank, Component Loading Error, preview entry, etc.)
• troubleshoot-data-binding: bindings render wrong / empty / literal path
• troubleshoot-composition-resolution: live-site URL resolves to the wrong composition or none
• troubleshoot-ssr-rendering: SSR / RSC render failures, hydration mismatches
• verify-setup: four-layer smoke test after a fresh install

Concept on-ramps (orientation before the action skills)

• understand-installation: what installing Studio adds, the two component mounts
• understand-sections: what qualifies as a Section
• understand-section-slots: what a Section Slot is, when to expose one
• understand-templates: Connected vs Freeform, three-AND rule
• understand-linked-schemas: how a Section's data shape drives auto-binding
• understand-auto-binding: what Studio does at section-drop time
• understand-canvas-url: Base URL + Canvas URL composition
• understand-canvas-vs-component: <StudioCanvas /> vs <StudioComponent />
• understand-authoring-headlessly: API authoring vs UI authoring
• understand-bring-your-own-data: the three surfaces for your own data: data, context, slot data

Build artifacts + ops

• deploy-studio-site: host the Studio-backed app + composition deployment

Why skills (over copy-paste templates)

A skill is a prompt with a contract: it expects the LLM to ask for specific inputs, follow a verified step sequence, and run acceptance checks before claiming success. Each skill is grounded in the Studio SDK source. Symbols mentioned actually exist. Recipes match what the SDK does at runtime.

That contract is what makes the skills composable: studio-tour chains analyze-project-fit, install-studio, register-component, setup-section-preview, setup-template-preview-routes, configure-studio, and verify-setup, because each leaf skill has clear preconditions and outputs.

See also

• What is Studio: the docs home
• Install the skills: every install route for the official bundle