skills.rest
flaming-codes
flaming-codesCOMMUNITY
Explore all skills by this author →
Website𝕏@CodesFlamingGitHub

chatgpt-app

Guide Vite and React builds for MCP-friendly single-file chatgpt-app output.

18|Updated Aug 27, 2022
Search Tags:#typescript#frontend#react#single-file#vite#design-system#apps-sdk-ui
One-click install
npx skills add https://github.com/flaming-codes/crane-app --skill chatgpt-app
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chatgpt-app
Source: https://github.com/flaming-codes/crane-app/tree/main/.github/skills/chatgpt-app
Command: npx skills add https://github.com/flaming-codes/crane-app --skill chatgpt-app

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide a clear build guide for creating a chatgpt-app (Vite + React + @openai/apps-sdk-ui) with a MCP-friendly single-file output.

Core Features & Use Cases

  • Tech stack guidance: Vite + React + TypeScript with single-file bundle via vite-plugin-singlefile.
  • Design system guidance: using @openai/apps-sdk-ui; tokens and styling via CSS imports.
  • Practical integration: icons, components, and MCP-ready patterns for deterministic builds.

Quick Start

Start the chatgpt-app project in the repository and run the Vite dev server to preview the MCP-friendly single-file bundle.

Frequently Asked Questions about chatgpt-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a single-file React app with Vite for OpenAI's apps-sdk-ui?▼

To build a single-file React app with Vite, this Skill guides you through configuring Vite with React and TypeScript, integrating @openai/apps-sdk-ui components, and using vite-plugin-singlefile to output a MCP-friendly bundle.

What is a MCP-friendly single-file bundle and when do I need it?▼

A MCP-friendly single-file bundle packages your entire React application into one HTML file with inline assets. You need it when building MCP-enabled apps that require deterministic, reproducible builds without external file dependencies.

How do I integrate @openai/apps-sdk-ui design system tokens into my Vite project?▼

Integrating @openai/apps-sdk-ui design system tokens involves importing the SDK's CSS files directly into your Vite project. This Skill outlines practical patterns for applying styling tokens and UI components for consistent frontend design.

Can I use TypeScript with vite-plugin-singlefile for MCP-enabled apps?▼

Yes, TypeScript works with vite-plugin-singlefile for MCP-enabled apps. This Skill provides stack guidance for Vite + React + TypeScript, enforcing deterministic inline guidance and safe usage patterns to ensure reproducible builds.

What's the best way to structure a Vite React project for deterministic builds?▼

The best way to structure a Vite React project for deterministic builds is using inline guidance and safe integration patterns. This Skill outlines stack choices, design system usage, and component integration to ensure maintainable, reproducible code.

Why does my single-file Vite bundle break when importing external CSS?▼

Single-file Vite bundles can break with external CSS if assets are not properly inlined. This Skill addresses limitations by enforcing safe usage patterns and practical integration steps to ensure all styling and icons are packaged deterministically.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
EmasoftEmasoft

amvcp-share-pages

Deploy a self-contained HTML page to Vercel and return a public live URL.

Community
Intermediate
Saisagar7779Saisagar7779
4

full-stack

Coordinate backend and frontend changes for full-stack development projects.

Community
Advanced
yahav123147yahav123147

nextjs

Optimize Next.js 16 App Router caching, rendering, and routing performance.

Community
Advanced