Guides setting up the Optimizely CMS JavaScript SDK: install packages, configure environment variables, create config file, and verify CLI connection.
How this skill is triggered — by the user, by Claude, or both
Slash command
/optimizely-cms-skills:optimizely-setupThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Guide the user through setting up the Optimizely CMS JavaScript SDK in their project.
Guide the user through setting up the Optimizely CMS JavaScript SDK in their project.
Check for lock files to determine the package manager:
if [ -f "pnpm-lock.yaml" ]; then
echo "pnpm"
elif [ -f "yarn.lock" ]; then
echo "yarn"
elif [ -f "package-lock.json" ]; then
echo "npm"
else
echo "npm"
fi
Based on the detected package manager, install the required packages:
pnpm add @optimizely/cms-sdk && pnpm add -D @optimizely/cms-cliyarn add @optimizely/cms-sdk && yarn add -D @optimizely/cms-clinpm install @optimizely/cms-sdk && npm install -D @optimizely/cms-cliCreate .env file if it doesn't exist, with minimal required Optimizely environment variables:
# Base URL of your CMS instance
# Example: https://example.cms.optimizely.com/
OPTIMIZELY_CMS_URL=
# CLI client credentials for syncing manifest data
# Create in: CMS instance > Settings > API Keys > Create API key
OPTIMIZELY_CMS_CLIENT_ID=
OPTIMIZELY_CMS_CLIENT_SECRET=
# Content Graph authentication key
# Found in: CMS instance > Settings > API Keys
OPTIMIZELY_GRAPH_SINGLE_KEY=
Important: Remind the user to:
Environment-specific configuration:
OPTIMIZELY_CMS_URL is required.OPTIMIZELY_CMS_URL and add these instead:
OPTIMIZELY_CMS_API_URL=https://api.cmstest.optimizely.comOPTIMIZELY_GRAPH_GATEWAY=https://staging.cg.optimizely.com/First, ask the user if they want to set up property groups to organize their content type fields in the CMS editor.
Property groups help organize related content type properties together (e.g., SEO fields, metadata, layout settings). They're optional but useful for keeping the CMS editor organized.
If the user wants property groups, create optimizely.config.mjs with example groups:
import { buildConfig } from '@optimizely/cms-sdk';
export default buildConfig({
components: ['./src/components/**/*.tsx'],
propertyGroups: [
{
key: 'seo',
displayName: 'SEO',
sortOrder: 1,
},
{
key: 'meta',
displayName: 'Metadata',
sortOrder: 2,
},
],
});
If they don't need property groups, create the basic configuration:
import { buildConfig } from '@optimizely/cms-sdk';
export default buildConfig({
components: ['./src/components/**/*.tsx'],
});
Adjust the components path based on the project structure (check if src/ exists, otherwise use appropriate path like ./components/**/*.tsx or ./app/components/**/*.tsx).
Check if .gitignore exists and contains .env. If not, add it:
if ! grep -q "^\.env$" .gitignore 2>/dev/null; then
echo ".env" >> .gitignore
fi
Guide user to test the connection:
npx @optimizely/cms-cli login
If authentication fails, the user may be using a test environment or missing required variables. Guide them to:
OPTIMIZELY_CMS_API_URL=https://api.cmstest.optimizely.comOPTIMIZELY_GRAPH_GATEWAY=https://staging.cg.optimizely.com/When the user requests to "add all missing environment variables" or "add all possible variables", or when troubleshooting connection issues, reference this complete list of available environment variables:
# Base URL of your CMS instance
# Example: https://example.cms.optimizely.com/
OPTIMIZELY_CMS_URL=
# Content Graph endpoint
# Production (default): https://cg.optimizely.com/content/v2
# Test environment: https://staging.cg.optimizely.com/
OPTIMIZELY_GRAPH_GATEWAY=
# Content Graph authentication key
# Found in: CMS instance > Settings > API Keys
OPTIMIZELY_GRAPH_SINGLE_KEY=
# CLI client credentials for syncing manifest data
# Create in: CMS instance > Settings > API Keys > Create API key
OPTIMIZELY_CMS_CLIENT_ID=
OPTIMIZELY_CMS_CLIENT_SECRET=
# Feature Experimentation credentials (optional)
OPTIMIZELY_FX_SDK_KEY=
OPTIMIZELY_FX_ACCESS_TOKEN=
# Host of your application (optional)
APPLICATION_HOST=
# Base URL for CMS REST API endpoints
# Use instead of OPTIMIZELY_CMS_URL for test environments
# Test environment: https://api.cmstest.optimizely.com
OPTIMIZELY_CMS_API_URL=
# Required when CLI connects to local CMS with self-signed certificates
# NODE_TLS_REJECT_UNAUTHORIZED="0"
Variable purposes:
Required for all environments:
OPTIMIZELY_CMS_CLIENT_ID/SECRET - Credentials for CLI to sync content type definitionsOPTIMIZELY_GRAPH_SINGLE_KEY - Authentication for fetching content via Content GraphProduction environment:
OPTIMIZELY_CMS_URL - Your CMS instance URL (e.g., https://example.cms.optimizely.com/)OPTIMIZELY_GRAPH_GATEWAY - Optional, defaults to https://cg.optimizely.com/content/v2Test environment (cmstest):
OPTIMIZELY_CMS_API_URL - Required instead of OPTIMIZELY_CMS_URL, set to https://api.cmstest.optimizely.comOPTIMIZELY_GRAPH_GATEWAY - Required, set to https://staging.cg.optimizely.com/Optional variables:
OPTIMIZELY_FX_SDK_KEY/ACCESS_TOKEN - Feature Experimentation integrationAPPLICATION_HOST - Your application's public URLNODE_TLS_REJECT_UNAUTHORIZED - Disable SSL validation for local development (security risk)After setup, inform the user they can:
npx @optimizely/cms-cli pushnpx claudepluginhub episerver/content-js-sdk --plugin optimizely-cms-skillsSets up and troubleshoots live preview for Optimizely CMS in React applications, including framework detection and route creation.
Adds and configures Contentful in an existing Next.js project. Covers SDK install, env vars, production/preview clients, content fetching in App Router or Pages Router, and Draft Mode preview flows.
Installs webflow-api SDK and configures Webflow authentication with API tokens or OAuth 2.0. Use for initializing client in Node.js/TypeScript projects.