build-web-apps

v0.1.2

Build web apps with frontend asset design, browser testing, UI components, payments, and database guidance.

Codex4 skills

by OpenAIMIT5kupdated 3 weeks ago

Source

$ git clone https://github.com/openai/plugins

Clone the source, then follow the repository's marketplace instructions for your runtime. The plugin root is plugins/build-web-apps/ inside the repository.

Layout

plugins/build-web-apps/

├── .codex-plugin/plugin.json
├── skills/frontend-app-builder/SKILL.md
├── skills/frontend-testing-debugging/SKILL.md
├── skills/react-best-practices/SKILL.md
└── skills/stripe-best-practices/SKILL.md

Skills4

frontend-app-builderskills/frontend-app-builder/SKILL.md

Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful implementation, and browser testing.

frontend-testing-debuggingskills/frontend-testing-debugging/SKILL.md

Use when testing, debugging, or making targeted improvements to rendered frontend apps through the Build Web Apps or web dev plugin: local dev servers, UI regressions, interaction bugs, console errors, responsive layout, and visual QA. Check whether the Browser plugin is available and use it first when it is; otherwise use regular Playwright with the recorded reason.

react-best-practicesskills/react-best-practices/SKILL.md

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

stripe-best-practicesskills/stripe-best-practices/SKILL.md

Guides Stripe integration decisions — API selection (Checkout Sessions vs PaymentIntents), Connect platform setup (Accounts v2, controller properties), billing/subscriptions, Treasury financial accounts, integration surfaces (Checkout, Payment Element), and migrating from deprecated Stripe APIs. Use when building, modifying, or reviewing any Stripe integration — including accepting payments, building marketplaces, integrating Stripe, processing payments, setting up subscriptions, or creating connected accounts.

Manifests1

plugins/build-web-apps/.codex-plugin/plugin.json

{
  "name": "build-web-apps",
  "version": "0.1.2",
  "description": "Build web apps with frontend asset design, browser testing, UI components, payments, and database guidance.",
  "author": {
    "name": "OpenAI",
    "email": "support@openai.com",
    "url": "https://openai.com/"
  },
  "homepage": "https://openai.com/",
  "repository": "https://github.com/openai/plugins",
  "license": "MIT",
  "keywords": [
    "build-web-apps",
    "build",
    "product-apps",
    "frontend",
    "image-generation",
    "browser-testing",
    "frontend-debugging",
    "stripe",
    "supabase",
    "shadcn",
    "full-stack",
    "frontend-qa"
  ],
  "skills": "./skills/",
  "interface": {
    "displayName": "Build Web Apps",
    "shortDescription": "Build frontend-focused web apps with generated assets, browser testing, payments, and databases",
    "longDescription": "Use Build Web Apps to create frontend application surfaces with Codex-generated visual assets, verify them with the Browser plugin and built-in app browser, compose shadcn/ui, wire Stripe payments, and design or tune Supabase/Postgres data flows.",
    "developerName": "OpenAI",
    "category": "Developer Tools",
    "capabilities": [
      "Interactive",
      "Read",
      "Write"
    ],
    "websiteURL": "https://openai.com/",
    "privacyPolicyURL": "https://openai.com/policies/privacy-policy/",
    "termsOfServiceURL": "https://openai.com/policies/terms-of-use/",
    "defaultPrompt": [
      "Design a new landing page for my new SaaS product."
    ],
    "brandColor": "#111111",
    "composerIcon": "./assets/build-web-apps-small.svg",
    "logo": "./assets/app-icon.png",
    "screenshots": []
  }
}