87 lines
4.9 KiB
Markdown
87 lines
4.9 KiB
Markdown
# 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
|