chatgpt-app-builder_skill

Overview

This skill guides developers through creating, testing, and deploying ChatGPT apps using the Skybridge framework. It covers the full app lifecycle: idea discovery, UX-driven design, bootstrapping projects, implementing widgets and server handlers, debugging locally, and publishing to ChatGPT. The focus is practical: shared widget state between the human and the LLM, SPEC-driven design, and reliable deployment.

How this skill works

The skill inspects your project intent and SPEC, recommends templates or scaffolding, and walks you through implementing MCP server handlers and widget code in TypeScript. It explains how to persist widget state, surface that state to the LLM, trigger LLM prompts, integrate OAuth, and configure CSP and display modes. It also provides steps for running a dev server, connecting to ChatGPT, deploying via Alpic, and submitting to the directory.

When to use it

• You have an idea and need to produce a SPEC.md and UX flow before coding.
• You want to bootstrap a new ChatGPT app from Skybridge templates.
• You are implementing widget UI, server handlers, or data fetching logic.
• You need to sync widget state with the LLM or trigger LLM responses.
• You are debugging locally, running a dev server, or connecting to ChatGPT.
• You are preparing to deploy, configure CSP, add OAuth, or publish the app.

Best practices

• Keep SPEC.md up to date to capture requirements, UX decisions, and API shape.
• Treat the widget as a shared surface: design for both the human and the LLM.
• Design APIs and UX iteratively: validate flows in a dev server before polishing UI.
• Persist minimal widget state needed for continuity; expose clear state snapshots to the LLM.
• Use display modes and responsive styles to support inline, PiP, fullscreen, and modal experiences.
• Declare CSP and OAuth scopes early to avoid deployment regressions and review delays.

Example use cases

• Build a scheduling assistant that shows an interactive calendar widget and updates the LLM with chosen slots.
• Create a research tool that fetches, summarizes, and surfaces documents to both the user and the LLM.
• Implement an authenticated data explorer where users connect via OAuth and the LLM composes queries.
• Bootstrap a prototype from a template, iterate on UX/spec, then deploy to Alpic and publish to the ChatGPT Directory.
• Add a PiP viewer for media content and coordinate playback state between the user and the LLM.