When to Use

Expose individual component props on a Section so template authors can override them per instance.

Use when a single value inside a section (headline, CTA label, image, href) needs to be overridable per template instance. Phrases: “expose this prop”, “let authors override the headline”, “per-instance override”. Do NOT use for a swappable component subtree (use Section Slots) or a different entry list per page (Linked schema).

Mandatory auth preflight: settle the credential before the first API call. Resolve it OAuth-first per authenticate-cma: CS_OAUTH_ACCESS_TOKEN, else the Contentstack MCP’s stored session. Never ask the user for a session authtoken. If nothing resolves, or a refresh fails with 400 invalid_refresh_token, hand them ! CONTENTSTACK_REGION=<code> npx @contentstack/mcp --auth (it needs a TTY and a browser, so it cannot be run for them) and wait. 403 error_code 316 is a valid credential aimed at another org: fix the org or the api_key, do not re-authenticate.

Expose Section Props

Context

Prerequisite: the canvas must render. This is a canvas operation. If the section or template canvas is blank, the canvas chain isn’t wired (route + Canvas URL path + the targeted environment’s per-locale Base URL). Run setup-section-preview first: it walks the whole chain, including the env Base URL.

Studio sections are reusable building blocks composed of one or more components. By default, every prop the section author bound or typed is locked: template authors can drop the section but cannot change anything inside it.

Exposing a prop lifts a single component prop out of that locked interior and surfaces it on the section’s right-panel Properties when the section is dropped onto a template. Template authors can then override the value as a literal or re-bind it to template data (e.g. entry.title).

Three rules:

• Per-instance, not per-name. If a section contains three Hero components, each Hero’s headline toggles independently. Exposing one does not expose the others.
• Exposed As must be unique within the section. Studio disables Save when two exposed props share the same label. Always qualify by position or role.
• Renaming the label is safe. Existing template overrides keep their values. Only the displayed label changes.

When the user is unsure whether they want Expose Props, use this decision table:

Reference: docs/sections/expose-section-props.md.

Task

1. Open the section in the section canvas. In Studio, switch to the Sections tab, find sectionName in the list, and open it. The section opens in its own canvas, distinct from a template canvas.

2. For each entry in propsToExpose, locate the component node. Click the node on the canvas, or pick it in the Layers panel. Confirm in the right panel that the selected node is the right component instance, not its parent container, and not a sibling of the same component type.

3. (Optional) Pre-toggle exposure from the Settings tab. With the node selected, open the right-panel Settings tab and toggle exposure for the props you’ll expose. This pre-marks them so the Save-time modal opens with those rows already ON. Skip this if you prefer to do everything in the Save modal.

4. Click Save on the section. The Expose Props modal opens, listing every candidate prop on every component in the section, grouped by component type.

5. For each candidate row, set three fields:

   • Expose: toggle ON for props in propsToExpose. Leave OFF for everything else. The section author’s value stays locked.
   • Component Prop: read-only internal prop name (e.g. text, headline, src, href). Use this to identify the row.
   • Exposed As: the label template authors see. Rewrite to disambiguate in the context of the whole section: “Top hero headline”, “Primary CTA label”, “Card thumbnail image”, not bare “headline” or “text”.

6. Resolve duplicate labels. If two exposed props end up with the same Exposed As, Studio disables Save. Qualify by position (“Top hero headline” / “Bottom hero headline”) or by role (“Primary CTA label” / “Secondary CTA label”).

7. Save the modal. The section is persisted with its exposed-prop manifest.

8. Verify in a template. Open any template, drag this section onto the canvas, select the section instance, and inspect the right-panel Properties. Every prop listed in propsToExpose must appear under its Exposed As label, pre-filled with the section’s internal value as the starting value. Props you left OFF must NOT appear anywhere on the template-side panel.

9. Confirm per-instance isolation. Drop the same section a second time on the same template. Override one exposed prop on instance A. Confirm that instance B and the section’s internal value are unchanged.

Inputs Needed From the User

In this order. If unclear, ask before proceeding.

1. sectionName: the section to edit
2. propsToExpose: concrete list of component → prop → friendly label triples. Push back if the user says “expose everything”. That defeats the purpose of a section.

Acceptance

This skill succeeds only when ALL of the following are true:

• The section’s Save completed without a duplicate-label error
• In the template canvas, the section instance’s right-panel shows exactly the props listed in propsToExpose, each under its Exposed As label
• Each exposed prop’s input control matches the prop’s type (string gets a text input, image gets an image picker, href gets a link picker)
• Editing an exposed prop on template instance A does not affect template instance B or the section’s internal value
• Re-binding an exposed prop via the data picker (e.g. to entry.title) works exactly like binding a fresh component prop
• Un-exposed props are not visible anywhere on the template-side panel

If any check fails, do not claim success. Surface the failure and stop.

Common Pitfalls

See Also

• docs/sections/expose-section-props.md: full reference
• setup-section-slots skill: for swappable component subtrees
• bind-linked-schema skill: for per-instance list data