Claude-skill-registry chatgpt-app

Guidance for building the chatgpt-app (Vite + React + @openai/apps-sdk-ui) with the MCP-friendly single-file output.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/chatgpt-app" ~/.claude/skills/majiayu000-claude-skill-registry-chatgpt-app && rm -rf "$T"

manifest: skills/data/chatgpt-app/SKILL.md

ChatGPT App Skill

This skill covers work in

/chatgpt-app

, the Vite + React TypeScript app that ships a single-file (inline HTML/CSS/JS) bundle consumed by the MCP server.

Tech Stack & Build

Vite + React 19 + TypeScript.
Tailwind CSS v4 for utilities; base CSS imports
```
@openai/apps-sdk-ui/css
```
.

Single-file build via

vite-plugin-singlefile

and

html-minifier-terser

(see

package.json

scripts).

Design System

All design and components come from @openai/apps-sdk-ui.
Official reference: https://openai.github.io/apps-sdk-ui/?path=/docs/overview-introduction--docs
Deep dives: prefer the deepwiki-mcp (if available) to consult available components, tokens, styles, icons, and colors before guessing.

Design tokens are exposed in

node_modules/@openai/apps-sdk-ui

; CSS imports use

@source "../node_modules/@openai/apps-sdk-ui";

as in

src/index.css

Icons

Import icons from the SDK Icon component:

import { IconName } from "@openai/apps-sdk-ui/components/Icon";

Use SDK-documented icon names; check the docs or deepwiki-mcp for the catalog.

Styling & Tokens

Base CSS (

src/index.css

) pulls tokens and fonts:

@import "tailwindcss";
@import "@openai/apps-sdk-ui/css";
@source "../node_modules/@openai/apps-sdk-ui";
:root {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
}

Prefer SDK tokens/variables (
```
--font-sans
```
,
```
--color-text
```
,
```
--color-surface
```
, etc.) and SDK components over custom styles.

Practices

Reach for SDK components first; only add bespoke styles when the SDK lacks a suitable primitive.
Keep the bundle single-file safe: avoid external asset references that won’t inline cleanly.
When uncertain about component props, tokens, or icons, consult the Apps SDK UI docs and deepwiki-mcp instead of guessing.