Studio Skills: LLM Prompts for Every Studio Task

Studio ships 107 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 LLM-aware editor (Claude Code, Cursor, Windsurf, Cline, Continue) 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:

Emits a machine-readable build sheet (atomics + Layer-2 containers + Sections + proposed Content Type + governance dial + unmapped-fields note).

Offers to scaffold + register components (chains register-component).

Offers to author Sections + Template automatically via API authoring (fastest, no canvas clicks) or canvas automation via Playwright MCP (slower, produces a canvas trail).

Chains verify-setup to close the loop.

Prerequisite mental model: From designs to Sections.

The 107 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 420 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 Once Per Project

Install the full skill set into your project so the LLM in your editor finds them on every prompt:

curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh

The installer then asks which editors should read the skills, ticking the ones it finds in your project:

Which environments should read the Studio skills?

 ❯ [x] Claude Code  .claude/skills       (detected)
   [x] Codex CLI    .agents/skills       (detected)
   [ ] Gemini CLI   .gemini/skills
   [ ] Cursor       .cursor/skills
   [ ] Windsurf     .windsurf/rules
   [ ] Cline        .clinerules
   [ ] Continue     .continue/prompts

  ↑/↓ move · space toggle · a all · n none · enter install · q quit

Move with the arrow keys, toggle with space, press enter to install — tick as many as you like. .agents/skills is the shared Agent Skills directory rather than a Codex-only path: Codex, Gemini CLI, Cursor, Amp, opencode and Goose all read it, so ticking Codex CLI wires up every one of them. The skills are written once into .studio/skills/, and every editor you tick is symlinked at that one copy — so they never drift apart and re-running the command updates all of them together.

Name the editors up front to skip the question (useful in CI, or with no terminal to ask on):

curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh -s -- --ide=cursor,claude
curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh -s -- --all

Install into a custom directory for any other agent:

curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh -s -- --dir=my/custom/path

Host the skills on your own domain

The install script reads STUDIO_SKILLS_BASE_URL so you can serve the skills from anywhere: a fork, an internal mirror, or a staging deploy. A host that needs credentials is handled the same way — the installer asks when the host returns 401, or takes STUDIO_SKILLS_USER / STUDIO_SKILLS_PASSWORD (or STUDIO_SKILLS_AUTH=<user>:<password>) when there is no terminal to ask on.

# Point at a different host
STUDIO_SKILLS_BASE_URL=https://docs.your-company.com/studio \
  curl -fsSL https://docs.your-company.com/studio/install.sh | sh

# Install from a local checkout — no network
STUDIO_SKILLS_LOCAL_DIR=/path/to/composable-studio-docs/docs/prompts \
  sh /path/to/composable-studio-docs/install.sh --ide=claude

The skill list itself is auto-discovered from skills/manifest.txt at the same base URL, no hardcoded skill names in the installer. New skills land automatically next time you re-run.

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.