# MCP Apps Merged Skill — Changelog

## Merge Date: 2026-02-03

### Added from Official ext-apps Skill

These sections/content were **new** from the official skill and did not exist in the custom skill:

| Addition | Location in Merged Doc |
|----------|----------------------|
| YAML frontmatter with trigger phrases | Top of file |
| Framework selection table (Vue/Svelte/Preact/Solid) | Quick Start Decision Tree |
| Project context section (adding to existing vs new) | Quick Start Decision Tree |
| Full framework templates table (6 frameworks) | Get Reference Code → Framework Templates |
| API Reference source files table | Get Reference Code → API Reference |
| Additional advanced examples (video-resource, sheet-music, threejs, transcript, basic-host) | Get Reference Code → Advanced Examples |
| `npm install` vs manual versions warning | Required Packages + MUST DO table |
| `tsx` vs `bun` compatibility note | Required Packages |
| `ontoolinputpartial` streaming section with use cases table and code patterns | New section: Streaming Partial Input |
| Visibility-based resource management (IntersectionObserver) | New section: Visibility-Based Resource Management |
| Fullscreen mode (`requestDisplayMode()`) with CSS patterns | New section: Fullscreen Mode |
| Safe area insets handling (`safeAreaInsets`) | New section: Safe Area Insets |
| `sendLog` for debug logging to host | Client-Side + Debugging Checklist |
| Testing with basic-host example | Testing section |
| Host styling split into Applying / Using subsections | Host CSS Variables |
| `line-height` CSS variable example | Host CSS Variables |

### Kept from Custom Battle-Tested Skill

Everything from the custom skill was preserved as the structural base:

| Content | Status |
|---------|--------|
| "What MCP Apps Actually Are" explanation | Kept verbatim |
| "How The Data Flows" numbered diagram | Kept verbatim |
| Quick Reference pattern | Kept verbatim |
| Required Packages table | Kept, enhanced with official notes |
| Project Structure tree | Kept verbatim |
| Complete Server Template (annotated) | Kept verbatim |
| Tool Registration quick reference | Kept verbatim |
| Resource Registration snippet | Kept verbatim |
| Tool Visibility Options | Kept (merged — both had same content) |
| Server-Side Action Tools (view vs action) | Kept verbatim |
| Complete HTML Template | Kept verbatim |
| Complete UI Logic template | Kept verbatim |
| Vanilla JS Full Lifecycle pattern | Kept, enhanced with `ontoolinputpartial` + safe area |
| React Pattern | Kept verbatim |
| Calling Server Tools snippet | Kept verbatim |
| Updating Model Context snippet | Kept verbatim |
| App Lifecycle Handlers table | Kept, added `ontoolinputpartial` row |
| Host CSS Variables section | Kept, merged with official's richer version |
| Build Configuration (vite, tsconfig, package.json) | Kept verbatim |
| **Module Scope Issue** (critical gotcha) | Kept verbatim |
| **Drag-and-Drop Pattern** (complete) | Kept verbatim |
| **Edit Modal Pattern** (complete) | Kept verbatim |
| CSS for Drag-and-Drop & Modals | Kept verbatim |
| Key Lessons Learned (6 items) | Kept verbatim |
| Data Handling Gotchas (array validation, escaping) | Kept verbatim |
| MUST DO table | Kept, added 4 rows from official |
| MUST NOT table | Kept, added 3 rows from official |
| Host-Specific Notes (Goose, Claude Desktop) | Kept verbatim |
| JSONRPC pipe testing commands | Kept verbatim |
| Debugging Checklist | Kept, added sendLog step |
| Common Errors table (10+ entries) | Kept, added 2 rows from official |
| Summary: The Golden Path | Kept, expanded with new steps |
| `git clone` reference code command | Kept verbatim |

### Reorganization

| Change | Rationale |
|--------|-----------|
| Moved "Get Reference Code" earlier (after Project Structure) | Better flow — see examples before diving into implementation |
| Merged framework templates + advanced examples into one "Get Reference Code" section | Eliminates duplicate reference code sections |
| Added dedicated sections for Streaming, Visibility, Fullscreen, Safe Areas | These were inline in the official skill; standalone sections are more scannable |
| Split Host CSS Variables into "Applying" and "Using" subsections | Clearer separation of setup vs usage |
| Enhanced MUST DO/MUST NOT tables with official skill's requirements | Single authoritative rules table |
| Added `sendLog` to both client-side section and debugging checklist | Available in two contexts where you'd need it |
| Expanded Golden Path summary from 6 to 10 steps | Covers all new features (streaming, fullscreen, visibility, styling) |

### Deduplication

Only literally identical content was deduplicated:
- Tool visibility options (identical in both) → kept once
- `git clone` command (identical) → kept once
- CSS variable examples (nearly identical) → merged into richer version with `line-height`
- Handler registration order warning (same in both) → kept custom's more detailed version