widget-design
✓Best practices for designing UI widgets in xmcp. Use when creating interactive widgets for GPT Apps or MCP Apps, choosing between React components and template literals, designing widget layouts, handling state and data fetching, or troubleshooting widget rendering issues.
Installation
SKILL.md
| 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 |
Rule of thumb: If unsure, start with React. Converting later is harder than starting simple.
Every async operation has three states. Handle all of them:
Best practices for designing UI widgets in xmcp. Use when creating interactive widgets for GPT Apps or MCP Apps, choosing between React components and template literals, designing widget layouts, handling state and data fetching, or troubleshooting widget rendering issues. Source: xmcp-dev/skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/xmcp-dev/skills --skill widget-design- Source
- xmcp-dev/skills
- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is widget-design?
Best practices for designing UI widgets in xmcp. Use when creating interactive widgets for GPT Apps or MCP Apps, choosing between React components and template literals, designing widget layouts, handling state and data fetching, or troubleshooting widget rendering issues. Source: xmcp-dev/skills.
How do I install widget-design?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/xmcp-dev/skills --skill widget-design Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/xmcp-dev/skills
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01