mcpField
O
openai-skills

openai-skills

github.com/podoDesign & UI29158 installsUpdated 1d ago
Repository

About openai-skills

openai-skills is OpenAI's official collection of skills for frontend design, presentations, image creation and editing, and Figma integration.

Key features

  1. 01Frontend design skills for landing pages and web apps
  2. 02Creates and edits decks with PptxGenJS
  3. 03Generates and edits images with the OpenAI Image API
  4. 04Includes six Figma integration skills

Use cases

  1. 01Design a landing page or app UI
  2. 02Create or edit PowerPoint decks
  3. 03Generate or edit images
  4. 04Use Figma integration skills

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill openai-skills

After installing, type/openai-skillsin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

openai-skills

Catalogue stub — full package: openai/skills

Decision tree

Run this before using OpenAI-specific skill workflows:

  1. Is an OpenAI skill already installed? Check: ~/.design-agent-skills/skills/frontend-skill/SKILL.md exists (representative skill).

    • Yes → invoke the specific skill by name and proceed
    • No → go to step 2

  2. Do you have shell access?

    • Yes → install the specific skill below, then invoke it
    • No → show the install command; in Claude Code, send it as a chat message starting with ! — add -g for global install or omit for project-only

Install command

# Visually strong landing pages and app UIs
npx skills add openai/frontend-skill

# Create/edit .pptx decks with PptxGenJS
npx skills add openai/slides

# Generate/edit images using OpenAI Image API
npx skills add openai/imagegen

# Figma skills (mirror figma/ official suite)
npx skills add openai/figma
npx skills add openai/figma-implement-design
npx skills add openai/figma-generate-design
npx skills add openai/figma-generate-library
npx skills add openai/figma-code-connect-components
npx skills add openai/figma-create-design-system-rules

Invoke after install

  • frontend-skill — "visually strong landing page", "app UI", "frontend design"
  • slides — "create PowerPoint", "make slides", "PPTX"
  • imagegen — "generate image", "edit image", "OpenAI image"
  • Figma skills — same triggers as figma-official-skills above

What it does

OpenAI's official skill collection: frontend design for high-quality landing pages and web apps, PowerPoint generation using PptxGenJS, image creation and editing via the OpenAI Image API, and 6 Figma integration skills mirroring the official Figma suite.

Comments

Markdown supported