widget-design
Installation
SKILL.md
Widget Design Best Practices
Decision Framework
Platform Selection
Choose based on target client:
- GPT Apps: Target is ChatGPT. Requires
_meta.openaiwithwidgetAccessible: true. - MCP Apps: Target is any ext-apps client. Minimal config, works automatically.
Handler Type Selection
| Scenario | Handler | Reason |
|---|---|---|
| User interaction needed (buttons, inputs) | React (.tsx) |
State management with hooks |
| Display external widget library | Template literal | Just load scripts/styles |
| Dynamic content from tool params | React | Props flow naturally |
| Static HTML with no state | Template literal | Simpler, less overhead |
Related skills
More from xmcp-dev/skills
mcp-server-design
Guide for designing effective MCP servers with agent-friendly tools. Use when creating a new MCP server, designing MCP tools, or improving existing MCP server architecture.
45create-tool
Create a new xmcp tool with schema, metadata, and handler. Use when the user wants to add a new tool to their xmcp project.
35prompt-design
Design MCP prompts to expose reusable prompt templates. Use when creating parameterized prompts in xmcp.
30resource-design
Design MCP resources to expose content for LLM consumption. Use when creating static or dynamic resources in xmcp.
29