SkillsAdd

smithery/flaming-codes

chatgpt-app

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

Installation

$ npx skills add smithery/flaming-codes --skill chatgpt-app
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Shared topics
vercel-labs/agent-skills 326.5K installs
vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs
chatgpt-app-builder Similar name
mcp-use/mcp-use

Build, modify, debug, migrate, review, or verify TypeScript MCP servers and MCP Apps with mcp-u…

9.3K installs
chatgpt-apps Similar name
openai/skills

Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP s…

2.6K installs

Also in this package

Other skills from smithery/flaming-codes.

npx skills add smithery/flaming-codes
web-frontend 0 web-backend 0

Browse all from smithery/flaming-codes

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,046 B
  • docs SUMMARY.md 135 B

History

  1. First recorded snapshot · 0 installs

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 nodemodules/@openai/apps-sdk-ui; CSS imports use @source "../nodemodules/@openai/apps-sdk-ui"; as in src/index.css.

Icons

  • Import icons from the SDK Icon component:

``tsx 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:

``css @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.