docs(skill): add CSP location and CORS pitfalls to common mistakes

[antonpk1]

Add three new items to the 'Common Mistakes to Avoid' section in the create-mcp-app skill:

• update simple-examples (add "raw" no-sdk example) #9 CSP _meta in wrong location - Must be in contents array (readCallback), NOT in registerResource config
• remove non-public artifactory URLs from lock file #10 Localhost in CSP blocked - CSP validation blocks localhost/private IPs; use tunnels for local dev
• Fix broken link in README #11 CORS vs CSP confusion - Explains the difference and how to compute stable ui.domain for CORS allowlists

[pkg-pr-new]

Open in StackBlitz

@modelcontextprotocol/ext-apps

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/ext-apps@407

@modelcontextprotocol/server-arcade

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-arcade@407

@modelcontextprotocol/server-basic-react

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-basic-react@407

@modelcontextprotocol/server-basic-vanillajs

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-basic-vanillajs@407

@modelcontextprotocol/server-budget-allocator

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-budget-allocator@407

@modelcontextprotocol/server-cohort-heatmap

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-cohort-heatmap@407

@modelcontextprotocol/server-customer-segmentation

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-customer-segmentation@407

@modelcontextprotocol/server-map

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-map@407

@modelcontextprotocol/server-pdf

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-pdf@407

@modelcontextprotocol/server-scenario-modeler

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-scenario-modeler@407

@modelcontextprotocol/server-shadertoy

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-shadertoy@407

@modelcontextprotocol/server-sheet-music

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-sheet-music@407

@modelcontextprotocol/server-system-monitor

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-system-monitor@407

@modelcontextprotocol/server-threejs

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-threejs@407

@modelcontextprotocol/server-transcript

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-transcript@407

@modelcontextprotocol/server-video-resource

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-video-resource@407

@modelcontextprotocol/server-wiki-explorer

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-wiki-explorer@407

commit: 5aa4c6c

[jonathanhefner]

I've added some more guidance for these in docs/patterns.md and in the API docs:

ext-apps/docs/patterns.md

Line 299 in ec0f217

## Configuring CSP and CORS

ext-apps/src/spec.types.ts

Lines 545 to 550 in ec0f217

	* > [!IMPORTANT]
	* > MCP App HTML runs in a sandboxed iframe with no same-origin server.
	* > **All** origins must be declared—including where your bundled JS/CSS is
	* > served from (`localhost` in dev, your CDN in production).
	*/
	export interface McpUiResourceCsp {

ext-apps/src/server/index.ts

Line 273 in ec0f217

* @example With CSP configuration for external domains

ext-apps/src/server/index.ts

Line 302 in ec0f217

* @example With stable origin for external API CORS allowlists

I've also opened #416 to refactor the skill to lean more on docs/patterns.md and to include the following "Common Mistakes":

2. Missing CSP configuration - MCP Apps HTML is served as an MCP resource with no same-origin server; ALL network requests—even to localhost—require a CSP configuration
3. CSP or CORS config in wrong _meta object - _meta.ui.csp and _meta.ui.domain go in the contents[] objects returned by registerAppResource()'s read callback, not in registerAppResource()'s config object

If you have some troublesome prompts, I can try them with the new version of the skill and iterate.