Quickstart: With LLM Skills (install, Prompt, Done)
Instead of following the 5 developer Quickstarts manually, let a coding LLM (Claude Code, Codex CLI, Gemini CLI, Cursor, Windsurf, Continue, Cline) drive the setup for you. Studio ships 107 named skills: reusable prompt files an LLM reads and executes.
Prereq: Check Studio is enabled for your organization.
Do It With a Skill
This page is about the skills themselves. studio-tour is the orchestrator it describes; start-here-zero-knowledge is the gentler entry point if Studio is entirely new to you.
curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh
What Skills Are
A Skill is a self-contained markdown file that teaches an LLM one specific Studio task: install the SDK, register a component, build a Section, migrate a page. Each skill has:
- A name (e.g. install-studio, register-component, build-section).
- A “when to use” description that helps the LLM pick the right skill for the task.
- Step-by-step instructions the LLM follows, including exact commands / snippets / verification checkpoints.
Skills are the same instructions our own docs use, just packaged so an LLM can execute them autonomously.
Browse all 62: Skills index.
Have a design in hand? Once skills are installed, your first prompt should be “Decompose this design for Studio” (with your Figma link, screenshot, or mock attached). The decompose-design skill produces the atomic-component + Layer-2 + Section + Content Type plan you’ll follow through the rest of the setup. Prerequisite mental model: The three-layer model.
Step 1: Install the Skills Into Your Project
One curl command downloads every skill into your project, then asks which editors should read them:
curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh
The installer pre-ticks the tools it finds (Claude Code / Codex CLI / Gemini CLI / Cursor / Windsurf / Cline / Continue), writes the skills once into .studio/skills/, and points each tool’s own directory at that copy — so one re-run updates every editor.
Manual install: if the auto-detect fails, or you want a specific override, see the Skills page for per-tool paste-in options.
Step 2: Ask Your LLM in Plain English
If you have a design: one prompt does the whole build
Attach your Figma frame / screenshot / mock and type:
“Decompose this design for Studio and build it.”
That fires decompose-design, which:
- Decomposes the design into atomics + Layer-2 containers + Sections + a proposed Content Type shape, and emits a build sheet as docs/<template-slug>-build-sheet.md in your repo.
- Asks you: “Scaffold + register these N components?” Answering Yes chains to register-component per new component.
- Asks you: “Author the Sections + Template automatically?” There are three options:
- API path (default): chains author-composition-via-api to write composition JSON directly through the CMA. Fastest, no canvas clicks. Requires a management token in env.
- Canvas path: chains build-section + build-connected-template through Playwright MCP. Slower, produces a real canvas trail. Requires install-playwright-mcp.
- Manual: you follow the sheet in Studio’s UI.
- Chains verify-setup to close the loop.
Result: one prompt, three yeses, a shipping composition. No manual canvas clicking unless you choose the manual option.
Other common prompts
For non-design-first tasks, type any of these:
| You say | Skill fires | What happens |
|---|---|---|
| “Install Studio in this project.” | install-studio | Installs all three SDKs, bootstraps initStudio(...), wires init at the app shell. Asks you for stack credentials. Adds no routes. |
| “Set up the canvas route.” | setup-section-preview | Mounts <StudioCanvas /> on its own route and sets the matching Canvas URL. Required on every project. |
| “Wire the catch-all template route.” | setup-template-preview-routes | Mounts <StudioComponent /> on a wildcard route so every visitor URL resolves through Studio. Also handles site chrome and 404s. |
| “Register my <Card> component with Studio.” | register-component | Adds a registerComponent({ ... }) call for the component, infers propTypes from your TSX. |
| “Build a Hero section bound to the hero group.” | build-section | Creates a Simple Section composition via the CMA. |
| “Build a card grid section over related_posts.” | build-repeating-section | Creates a List Section with Repeater + Condition Blocks. |
| “Build a Connected Template for blog posts at /blog/[slug].” | build-connected-template | Creates the Template composition + wires the URL pattern. |
| “Migrate this route to Studio.” | migrate-page-to-studio | Reads a route file, generates equivalent Studio compositions, prints the JSX swap. |
For greenfield builds starting from a design, prefer the top prompt. It orchestrates the below skills automatically instead of you invoking each. Every skill above corresponds to one of the manual Quickstarts (Q1 to Q5): same outcome, done by the LLM instead of you.
Step 3: Verify
After each skill run, check the outputs:
- Files were created / modified as expected (skills print a diff of everything they touched).
- No red errors in your dev server console (npm run dev).
- The Studio canvas (in the Contentstack UI, open Studio, then your project) shows your app iframed correctly.
Failed? Ask the LLM: “Verify the Studio install.” That fires the verify-setup skill, which runs a layered smoke test across the Delivery SDK, Live Preview, the Studio SDK, and the canvas, and identifies the lowest failing layer.
Skills You’ll Use Most
| Category | Skill | When to use |
|---|---|---|
| Setup | install-studio | Fresh install of Studio into any React app. |
| Setup | verify-setup | Anything’s not working. Run this first. |
| BYOC | register-component | Adding a new component to Studio’s palette. |
| BYOC | register-json-rte | Registering custom elements in JSON Rich Text fields. |
| Sections | build-section | Building a Simple Section (no iteration). |
| Sections | build-repeating-section | Building a List Section over Modular Blocks / References / group-multiple. |
| Sections | expose-section-props | Making Section values overridable per Template instance. |
| Sections | use-section-slot | Adding a Section Slot for Templates to fill. |
| Templates | build-connected-template | Creating a Connected Template (content-type-bound). |
| Templates | build-freeform-template | Creating a Freeform Template (rare, check choose-connected-vs-freeform first). |
| Composition | author-composition-via-api | Authoring compositions via CMA (seed pipelines, scripts). |
| Migration | migrate-page-to-studio | Convert a hand-coded page/route into Studio compositions. |
| Debug | troubleshoot | Anything’s broken: general diagnostic. |
| Debug | troubleshoot-canvas | Canvas-specific issues (blank, CORS, iframe). |
| Debug | troubleshoot-data-binding | Bindings resolve to undefined at runtime. |
Skills vs Manual Quickstarts
| Manual Quickstarts (Q1-Q5) | Skills | |
|---|---|---|
| Time | ~1 hour | ~15 min |
| You write | Every line of code | English sentences |
| You verify | Every checkpoint yourself | Skill runs verification automatically |
| Best for | Learning what Studio does | Getting to a working install fast |
| Best for | Debugging why something failed | Doing the same task the 5th time |
Recommended path: do Q1 (Setup) manually to internalize what Studio installs. Then use skills for Q2-Q5 and everything after. You get the mental model + the speed.
What Next
- Author 5-min Quickstart: if you have a content author on your team to onboard, share this with them (no code involved).
- Skills index: browse all 107 skills.
- Manual Quickstart 1: Setup, if you’d rather understand what the LLM would install before running it.