Skills
.Work. You
Rest

MCP Widget Patterns

Community

Design effective OpenAI widgets

Software Engineering#design#ui#sdk#patterns#widget#openai
Authormberto10
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill helps developers design and implement effective widget patterns for OpenAI Apps SDK, ensuring a consistent and user-friendly experience.

Core Features & Use Cases

  • Widget Design Guidance: Provides best practices and examples for various widget display modes (Inline, Carousel, Fullscreen, Picture-in-Picture).
  • Pattern Catalog: Offers pre-designed patterns for common UI elements like cards, carousels, editors, and maps.
  • Styling Tokens: Details the CSS variables for colors, typography, spacing, and more to match ChatGPT's design language.
  • Use Case: A developer needs to create a widget to display search results. They can consult this skill to find the "Product Carousel" pattern and understand its implementation details and styling.

Quick Start

Use the MCP Widget Patterns skill to design an inline card for order confirmation.

Dependency Matrix

Required Modules

None required

Components

referencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: MCP Widget Patterns
Download link: https://github.com/mberto10/mberto-compound/archive/main.zip#mcp-widget-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.