Does this skill help with backend integration?

Yes, it guides you through defining the TypeScript data shape, updating the server configuration, and creating the tools necessary to feed data to the widget.

Which CSS framework does this skill use for widgets?

This skill utilizes Tailwind CSS via CDN, providing a modern, utility-first approach to styling that ensures your widgets are responsive and visually polished.

Can I test my widgets locally?

Absolutely. The skill includes a testing workflow using a dedicated preview URL and mock data to ensure your widget looks correct before deployment.

What specific widget types are available?

You can choose from six distinct patterns: Card Grids, Stats Dashboards, Data Tables, Bar Charts, Comparison Cards, and Timelines.

ChatGPT App Widget Builder

Name: ChatGPT App Widget Builder
Author: hollaugo

byhollaugo

•

设计工具

Streamlines the creation of interactive, Tailwind-powered UI widgets for ChatGPT Apps using pre-built professional templates.

The ChatGPT App Widget Builder skill empowers developers to rapidly enhance their AI applications with sophisticated, inline HTML widgets. By providing a library of polished, responsive patterns—including card grids, analytics dashboards, and data tables—it automates the complex task of styling and SDK integration. The skill handles everything from generating Tailwind CSS-based HTML and TypeScript interfaces to configuring server-side widget arrays, ensuring a seamless workflow for creating feature-rich user interfaces directly within the ChatGPT environment.

主要功能

0120 GitHub stars

02Pre-designed Tailwind CSS templates for grids, charts, and tables

03TypeScript interface generation for structured tool output

04Workflow guidance for mock data testing and local previews

05Automated widget configuration for ChatGPT App server environments

06Built-in patterns for responsive design and hover interactions

使用场景

01Displaying searchable product catalogs or task lists in responsive grids

02Visualizing analytics or KPIs using animated bar charts and stats cards

03Building interactive comparison tools for pricing plans and service options

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hollaugo/tutorials add-widget

For use in Claude.ai and ChatGPT

Download Skill