marketplace-scaffold作成者: vercel
Scaffolds a new Sitecore Marketplace app using the official SDK. Use when the user wants to create a new marketplace app, start a new Sitecore project, or…
npx skills add https://github.com/vercel-labs/sitecore-skills --skill marketplace-scaffoldScaffold a New Sitecore Marketplace App
You are helping the user scaffold a new Sitecore Marketplace app using the official Sitecore Marketplace SDK (v0.4).
Step 1: Gather Requirements
Ask the user the following questions (skip any they've already answered):
- App name — What should the app be called? (default: from $ARGUMENTS if provided)
- Architecture — Client-side only or full-stack?
- Client-side: UI runs entirely in the iframe, communicates via SDK client. Simpler, no server needed.
- Full-stack: Includes Next.js API routes/server actions for server-side SDK access. Required for Auth0, server-side mutations, or proxying external APIs.
- Authentication — Built-in (default) or Auth0?
- Built-in: Zero-config, SDK handles auth automatically. Sufficient for most apps.
- Auth0: Required for server-side API access, external service integration, or custom auth flows. Requires Auth0 tenant setup.
- Optional packages — Which additional SDK packages?
- XM Cloud (
xmc): Access Sites, Pages, Authoring, Content Transfer, Search, and Agent APIs - AI Skills (
ai): Access Brand Review API for AI-powered content analysis
- XM Cloud (
Step 2: Run the Scaffold Command
Based on answers, construct and run the appropriate command:
# Client-side only (built-in auth)
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-client.json
# Client-side + XMC
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-client.json https://marketplace-sdk.sitecorecloud.io/r/xmc.json
# Client-side + AI
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-client.json https://marketplace-sdk.sitecorecloud.io/r/ai.json
# Client-side + XMC + AI
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-client.json https://marketplace-sdk.sitecorecloud.io/r/xmc.json https://marketplace-sdk.sitecorecloud.io/r/ai.json
# Full-stack (Auth0) — adds server-side SDK support
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-auth0.json
# Full-stack + XMC
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-auth0.json https://marketplace-sdk.sitecorecloud.io/r/xmc.json
# Full-stack + AI
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-auth0.json https://marketplace-sdk.sitecorecloud.io/r/ai.json
# Full-stack + XMC + AI
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/app-auth0.json https://marketplace-sdk.sitecorecloud.io/r/xmc.json https://marketplace-sdk.sitecorecloud.io/r/ai.json
Important: If the user doesn't have a Next.js project yet, scaffold one first:
npx create-next-app@latest <app-name> --typescript --tailwind --eslint --app --src-dir
cd <app-name>
Step 3: Post-Scaffold Setup
After scaffolding completes:
-
Create
.env.local— See env-template.md for the template. Fill in based on architecture choice. -
Configure CSP headers — Add iframe embedding headers to
next.config.ts:
const nextConfig: NextConfig = {
async headers() {
return [
{
source: "/(.*)",
headers: [
{
key: "Content-Security-Policy",
value: "frame-ancestors 'self' https://*.sitecorecloud.io",
},
],
},
];
},
};
- Install Blok theme (if not already present):
npx shadcn@latest add https://marketplace-sdk.sitecorecloud.io/r/blok-theme.json
- Verify setup — Run the dev server and confirm no errors:
npm run dev
Step 4: Explain Next Steps
After successful scaffold, suggest:
- Use
/marketplace-add-extensionto add extension point routes (custom fields, dashboard widgets, etc.) - Use
/marketplace-sdk-referenceto look up SDK APIs - Use
/marketplace-build-componentto build UI with the Blok design system - Use
/marketplace-deploywhen ready to deploy
Reference Files
- Architecture Guide — Decision matrix for client-side vs full-stack
- Environment Template — .env.local templates per architecture
vercelのその他のスキル
agent-friendly-apis
by vercel
Companion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.
filesystem-agents
by vercel
You are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.
add-provider-package
by vercel
Guide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.
csv
by vercel
Analyze and transform CSV data using bash tools
ai
by vercel
Python `ai` module — models, agents, hooks, middleware, MCP, structured output
cron-jobs
by vercel
Vercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.
frontend-design
by vercel
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…
vercel-react-best-practices
by vercel
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…