How do I choose the right widget pattern for my app?

The skill includes a Selection Guide that maps specific user needs—such as confirming an action, comparing items, or editing a document—to the optimal widget pattern and display mode.

What is the OpenAI Apps SDK?

The OpenAI Apps SDK is a development toolkit that allows creators to build interactive visual components (widgets) that render directly within ChatGPT conversations.

Are the templates mobile-responsive?

Yes, the patterns are designed according to OpenAI's UI guidelines which prioritize responsive behavior across desktop and mobile ChatGPT clients.

Which display modes are supported by these patterns?

The patterns cover four primary modes: Inline (simple cards), Carousel (item comparison), Fullscreen (complex workflows like editors or maps), and Picture-in-Picture (persistent background activity).

Does this skill include styling for dark mode?

Yes, it includes CSS variable definitions for both light and dark modes to ensure your widgets look native within the ChatGPT interface regardless of user settings.

OpenAI App Widget Patterns

Name: OpenAI App Widget Patterns
Author: mberto10

bymberto10

0•

디자인 도구

Provides standardized UI patterns and implementation guidance for building interactive widgets within the OpenAI Apps SDK.

This skill offers a comprehensive catalog of proven visual component patterns specifically optimized for the OpenAI Apps SDK environment. It helps developers implement consistent and high-quality user interfaces for ChatGPT conversations, covering everything from simple inline cards and product carousels to complex fullscreen editors and Picture-in-Picture (PiP) experiences. By providing ready-to-use HTML/CSS templates and layout rules, it ensures that custom apps align with ChatGPT's native design language while streamlining the development of interactive AI features.

주요 기능

01Integrated styling system using ChatGPT’s semantic color variables and typography

02Production-ready HTML/CSS templates for status timelines, data cards, and ranked lists

03Automated pattern selection guidance based on specific user needs and workflows

04Support for all SDK display modes: Inline, Carousel, Fullscreen, and PiP

05Ready-made JavaScript snippets for requesting display mode transitions and map integrations

060 GitHub stars

사용 사례

01Designing an interactive product comparison carousel for an e-commerce ChatGPT app

02Implementing a multi-step onboarding wizard in fullscreen mode for complex data entry

03Creating real-time status tracking cards for delivery or process monitoring plugins

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mberto10/mberto-compound mcp-widget-patterns

For use in Claude.ai and ChatGPT

Download Skill