Look up any skill in the Studio skill pack and what it does. Use it to find the skill that does a task, or to see what your agent loads when you ask it something. The skills are in the same groups the pack's router uses.
You don't have to name a skill to use it. Ask your agent in plain English, and the studio router picks the skill for you. To see how, read What are skills?. Each skill name below opens the skill itself. You can also paste it into a chat LLM that has no skills installed. Download saves the skill as a Markdown file, so you can add that one skill to your agent yourself.
The pack has 110 skills, counting the router.
Start here
Use these skills before you change anything. They onboard you, check your project and write the plan you approve before a build.
| Skill | What it does | Download |
|---|
start-here-zero-knowledge | Walks someone new to Studio through it from the beginning. | Download |
studio-tour | Asks what you're trying to do and hands each step to the skill that does it. | Download |
analyze-project-fit | Reads your project and reports what Studio needs, without changing anything. Runs before any install. | Download |
convert-project-to-studio | Makes a whole app Studio-ready. It asks how much to convert, then adds Studio behind your existing routes and keeps your own 404 page. It doesn't migrate or split up any existing page. | Download |
plan-studio-architecture | Writes a plan for you to approve: sections, section slots, components, content types, connected or freeform for each template, and the build order. Nothing is built until you approve it. | Download |
match-existing-pattern | Reads the compositions a project already has and reports how they're built, so new templates and sections match them. Runs before authoring in any project that already has compositions. | Download |
choose-connected-vs-freeform | Helps you choose between a connected and a freeform template, and names the skill that builds it. | Download |
Provision the Contentstack side
| Skill | What it does | Download |
|---|
authenticate-cma | Explains how every Management API call gets its credential, how tokens refresh, and what each 401 and 422 response means. | Download |
provision-studio-project | Sets up a Studio project by API: its compositions content type, a publish and a delivery token. | Download |
provision-studio-stack | Creates your site's content types, global fields, entries and assets. | Download |
migrate-ct-schema | Changes the fields of a content type that's already in use: add, rename, retype, remove, or move into a global field. It plans first and can roll back. | Download |
import-content | Imports entries from JSON, CSV, Markdown or another stack into your content types, and can be re-run safely. To move off another CMS, use @contentstack/cli-cm-import instead. | Download |
Plan and register components
| Skill | What it does | Download |
|---|
design-component-library | Plans which components to register from your design system, before any registration is written. | Download |
classify-existing-component | Says whether one component is an atom, a layout or a compound, and which skill comes next. | Download |
decompose-jsx-to-atomics | Splits a large React component, often a whole page in one file, into small components and sections that authors can rearrange. | Download |
register-component | Reads a React component and writes its registerComponent call. | Download |
register-json-rte | Registers one renderer for JSON rich text, HTML rich text and Markdown, including embedded entries and assets. | Download |
register-breakpoints | Registers default, tablet and mobile breakpoints when the SDK starts. | Download |
import-design-tokens | Registers your Tailwind, CSS variable or JSON tokens, so the Design tab offers them. | Download |
figma-generate-components | Turns Figma frames into React components and their registrations, through the Studio Figma plugin. | Download |
wire-component-default-data | Gives each prop a default value, so a component shows something as soon as it's dropped. | Download |
Component contracts
Read these while you register a component. Each one covers a set of rules a component has to follow before Studio can control it.
Turn a design into a plan
| Skill | What it does | Download |
|---|
decompose-design | Turns one design, such as a Figma frame, a screenshot or a mock, into a build sheet and a proposed content type, then offers to build it. Start here for one new template from a design. | Download |
decompose-site | Does the same across a whole site. It shares components between templates, finds global field candidates and orders the build. It also turns a Figma board of section variants into one section with choices. | Download |
decompose-blocks-page | Splits a template whose body is one modular blocks field, rendered by one component, into a section per block type. | Download |
discover-sections | Finds section candidates in your codebase, which are components that recur across routes. | Download |
discover-sections-from-ct | Finds section candidates in an existing content type, one for each group, reference or modular block. | Download |
design-section-from-jsx | Proposes a section's linked schema from a JSX component. | Download |
Sections
Section slots, repeaters and condition blocks
Templates
Routes and template URLs
Data binding
| Skill | What it does | Download |
|---|
wire-external-data | Brings data from outside Contentstack into a composition, through the data prop on <StudioComponent />. | Download |
render-with-own-data | Renders a template or section against data you already hold, with <StudioComposition />. | Download |
wire-studio-state | Adds state variables that authors can bind, connects your own store, and wires named functions to buttons. | Download |
wire-variant-alias | Renders a Personalize variant, by passing its alias from a cookie or header to <StudioComponent />. | Download |
embed-composition | Embeds one editable region in a page your code owns, with useCompositionData. | Download |
resolve-reference-depth | Fetches referenced entries one hop at a time, and asks you when it can't tell which path to follow. | Download |
resolve-reference-depth-pitfalls | Error 141 and the other ways that fetching referenced entries goes wrong. | Download |
make-visual-editor-editable | Makes every field on a page editable in Visual Editor, including list items you add, move or delete, and a brand-new entry. Each of these fails silently when it's missing. | Download |
Author by API: the contract
| Skill | What it does | Download |
|---|
author-composition-via-api | Writes compositions directly through the Management API, for scripts, seeding and migration. Start here for API authoring. | Download |
use-compositions-api | Creates, reads, lists, updates and deletes compositions from a script, and checks each one before it saves. | Download |
author-without-code | The end-to-end path for content teams building in Studio on a project that's already set up. | Download |
author-composition-practice | How to approach API authoring. Build the structure before you bind it, and read each component's source, not only its registration. | Download |
author-composition-entry | The composition entry body, with its url and url_metadata pair. Read it first when you author by API. | Download |
author-composition-static-values | Writes static_value bindings by API. The binding stores a key, and the literal value goes under static_value in the composition entry. | Download |
author-composition-bindings | Every binding type, the shape of a node in the ui tree, and Repeater bindings. Read it second. | Download |
author-composition-encoding | Compresses the ui tree and validates it before you publish. | Download |
Author by API: recipes
Ship and verify
| Skill | What it does | Download |
|---|
complete-the-build | Checks the ten things every build has to finish, and runs at the end of every build. Three are about Visual Editor: Live Preview is on, it runs in builder mode, and a new entry is editable on the page. The others are edit tags, studioAttributes, component thumbnails, section thumbnails, the canvas route, publishing, and templates made of sections. | Download |
verify-setup | Tests your setup one layer at a time, from the stack's Visual Experience settings up to the Studio canvas, so you fix the lowest failure first. | Download |
verify-visual-parity | Compares each section built in Studio against your production site in a browser, and fixes each difference where it starts. | Download |
deploy-studio-site | Sets up your app on Contentstack Launch with its environments and environment variables, Deploys your compositions, and configures the region and Live Preview. | Download |
migrate-page-to-studio | Swaps one hand-coded route for <StudioComponent />. | Download |
gate-third-party-scripts | Keeps cookie banners, chat widgets, tag managers and tracking pixels off the canvas, with isStudioCanvas. | Download |
byoc-end-to-end | Takes your own components the whole way, in order: register them, build sections, build templates and publish. | Download |
Troubleshoot
Concepts
These skills explain something instead of doing a task. An agent reads one when you ask what something is.
Where to go next