Back to Skills

Openai Agents

OpenAI Agents SDK for JavaScript/TypeScript (text + voice agents). Use for multi-agent workflows, tools, guardrails, or encountering Zod errors, MCP failures, infinite loops, tool call issues.

typescriptjavascriptaiagent
By secondsky
17928Updated 1 day agoTypeScriptMIT

Skill Content

# OpenAI Agents SDK Skill

Complete skill for building AI applications with OpenAI Agents SDK (JavaScript/TypeScript), covering text agents, realtime voice agents, multi-agent workflows, and production deployment patterns.

---

## Quick Start

### Installation

```bash
bun add @openai/agents zod@3
bun add @openai/agents-realtime  # For voice agents
```

Set environment variable:

```bash
export OPENAI_API_KEY="your-api-key"
```

### Basic Text Agent

```typescript
import { Agent, run, tool } from '@openai/agents';
import { z } from 'zod';

const agent = new Agent({
  name: 'Assistant',
  instructions: 'You are helpful.',
  tools: [tool({
    name: 'get_weather',
    parameters: z.object({ city: z.string() }),
    execute: async ({ city }) => `Weather in ${city}: sunny`,
  })],
  model: 'gpt-4o-mini',
});

const result = await run(agent, 'What is the weather in SF?');
```

### Voice Agent & Multi-Agent

```typescript
// Voice agent
const voiceAgent = new RealtimeAgent({
  voice: 'alloy',
  model: 'gpt-4o-realtime-preview',
});

// Browser session
const session = new RealtimeSession(voiceAgent, {
  apiKey: sessionApiKey, // From backend!
  transport: 'webrtc',
});

// Multi-agent handoffs
const triageAgent = Agent.create({
  handoffs: [billingAgent, techAgent],
});
```

**17 Templates**: `templates/` directory has production-ready examples for all patterns.

---

## Top 3 Critical Errors

### 1. Zod Schema Type Errors

**Error**: Type errors with tool parameters even when structurally compatible.

**Workaround**: Define schemas inline.

```typescript
// āŒ Can cause type errors
parameters: mySchema

// āœ… Works reliably
parameters: z.object({ field: z.string() })
```

**Source**: [GitHub #188](https://github.com/openai/openai-agents-js/issues/188)

### 2. MCP Tracing Errors

**Error**: "No existing trace found" with MCP servers.

**Workaround**:
```typescript
import { initializeTracing } from '@openai/agents/tracing';
await initializeTracing();
```

**Source**: [GitHub #580](https://github.com/openai/openai-agents-js/issues/580)

### 3. MaxTurnsExceededError

**Error**: Agent loops infinitely.

**Solution**: Increase maxTurns or improve instructions:

```typescript
const result = await run(agent, input, {
  maxTurns: 20,
});

// Or improve instructions
instructions: `After using tools, provide a final answer.
Do not loop endlessly.`
```

**All 9 Errors**: Load `references/common-errors.md` for complete error catalog with workarounds.

---

## When to Load References

Load reference files when working on specific aspects of agent development:

### Agent Patterns (`references/agent-patterns.md`)
Load when:
- Designing multi-agent orchestration strategies
- Choosing between LLM-based vs code-based orchestration
- Implementing parallel agent execution
- Creating agents-as-tools patterns
- Need to understand when to use which orchestration pattern

### Common Errors (`references/common-errors.md`)
Load when:
- Debugging agent issues beyond the top 3 errors above
- Implementing comprehensive error handling
- Encountering: GuardrailExecutionError, ToolCallError, Schema Mismatch, Ollama integration, webSearchTool failures, Agent Builder export bugs
- Building production error recovery patterns

### Realtime Transports (`references/realtime-transports.md`)
Load when:
- Choosing between WebRTC vs WebSocket for voice agents
- Optimizing voice agent latency
- Debugging voice connection issues
- Understanding network/firewall requirements for voice
- Implementing custom audio sources/sinks

### Cloudflare Integration (`references/cloudflare-integration.md`)
Load when:
- Deploying agents to Cloudflare Workers
- Understanding Workers limitations (CPU, memory, no voice)
- Implementing streaming in Workers
- Debugging Workers-specific issues
- Optimizing for Workers performance and costs

### Official Links (`references/official-links.md`)
Load when:
- Need official documentation links
- Looking for examples or community resources
- Checking latest SDK versions
- Finding pricing information
- Need migration guides

---

## Core Concepts Summary

**Agents**: LLMs equipped with instructions and tools.

**Tools**: Functions with Zod schemas that agents can call automatically.

**Handoffs**: Multi-agent delegation where agents route tasks to specialists.

**Guardrails**: Input/output validation for safety (content filtering, PII detection).

**Structured Outputs**: Type-safe responses using Zod schemas.

**Streaming**: Real-time event streaming for progressive responses.

**Human-in-the-Loop**: Require approval for specific tool executions (`requiresApproval: true`).

For detailed examples, see templates in `templates/text-agents/` and `templates/realtime-agents/`.

---

## Text Agents Quick Reference

```typescript
// Basic
const result = await run(agent, 'Your question');

// Streaming
const stream = await run(agent, input, { stream: true });

// Structured output
const agent = new Agent({
  outputType: z.object({ sentiment: z.enum([...]), confidence: z.number() }),
});
```

**Templates**: `templates/text-agents/` (8 templates)

---

## Realtime Voice Agents Quick Reference

```typescript
const voiceAgent = new RealtimeAgent({
  voice: 'alloy', // alloy, echo, fable, onyx, nova, shimmer
  model: 'gpt-4o-realtime-preview',
});

const session = new RealtimeSession(voiceAgent, {
  apiKey: sessionApiKey,
  transport: 'webrtc', // or 'websocket'
});
```

**Voice handoff constraints**: Cannot change voice/model during handoff.

**Templates**: `templates/realtime-agents/` (3 templates) | **Details**: `references/realtime-transports.md`

---

## Framework Integration Quick Reference

### Cloudflare Workers (Experimental)

```typescript
export default {
  async fetch(request: Request, env: Env) {
    const { message } = await request.json();
    process.env.OPENAI_API_KEY = env.OPENAI_API_KEY;

    const agent = new Agent({
      name: 'Assistant',
      instructions: 'Be helpful and concise',
      model: 'gpt-4o-mini',
    });

    const result = await run(agent, message, { maxTurns: 5 });

    return new Response(JSON.stringify({
      response: result.finalOutput,
      tokens: result.usage.totalTokens,
    }));
  },
};
```

**Limitations**: No realtime voice, CPU time limits (30s max), memory constraints (128MB).

**Templates**: `templates/cloudflare-workers/` (2 templates)

**Details**: Load `references/cloudflare-integration.md` for complete Workers guide.

### Next.js App Router

```typescript
// app/api/agent/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { Agent, run } from '@openai/agents';

export async function POST(request: NextRequest) {
  const { message } = await request.json();
  const agent = new Agent({ /* ... */ });
  const result = await run(agent, message);
  return NextResponse.json({ response: result.finalOutput });
}
```

**Templates**: `templates/nextjs/` (2 templates)

---

## Guardrails & Human-in-the-Loop

```typescript
// Input/output guardrails
const agent = new Agent({
  inputGuardrails: [homeworkDetectorGuardrail],
  outputGuardrails: [piiFilterGuardrail],
});

// Human approval
const tool = tool({
  requiresApproval: true,
  execute: async ({ amount }) => `Refunded $${amount}`,
});

// Handle approval loop
while (result.interruption?.type === 'tool_approval') {
  result = (await promptUser(result.interruption))
    ? await result.state.approve(result.interruption)
    : await result.state.reject(result.interruption);
}
```

**Templates**: `templates/text-agents/agent-guardrails-*.ts`, `agent-human-approval.ts`

---

## Orchestration Patterns Summary

**LLM-Based**: Agent decides routing autonomously. Use for adaptive workflows.

**Code-Based**: Explicit control flow. Use for predictable, deterministic workflows.

**Parallel**: Run multiple agents concurrently. Use for independent tasks.

**Agents as Tools**: Wrap agents as tools for manager LLM. Use for specialist delegation.

**Details**: Load `references/agent-patterns.md` for comprehensive orchestration strategies with examples.

**Template**: `templates/text-agents/agent-parallel.ts`

---

## Debugging & Tracing

```typescript
process.env.DEBUG = '@openai/agents:*';

const result = await run(agent, input);
console.log('Tokens:', result.usage.totalTokens, 'Turns:', result.history.length);
```

**Template**: `templates/shared/tracing-setup.ts`

---

## Production Checklist

- [ ] Set `OPENAI_API_KEY` as environment secret
- [ ] Implement error handling for all agent calls
- [ ] Add guardrails for safety-critical applications
- [ ] Set reasonable `maxTurns` to prevent runaway costs
- [ ] Use `gpt-4o-mini` where possible for cost efficiency
- [ ] Implement rate limiting
- [ ] Log token usage for cost monitoring
- [ ] Test handoff flows thoroughly
- [ ] Never expose API keys to browsers (use session tokens)
- [ ] Enable tracing/observability for debugging

---

## When to Use This Skill

āœ… **Use when**:
- Building multi-agent workflows
- Creating voice AI applications
- Implementing tool-calling patterns
- Requiring input/output validation (guardrails)
- Needing human approval gates
- Orchestrating complex AI tasks
- Deploying to Cloudflare Workers or Next.js

āŒ **Don't use when**:
- Simple OpenAI API calls (use `openai-api` skill instead)
- Non-OpenAI models exclusively
- Production voice at massive scale (consider LiveKit Agents)

---

## Token Efficiency

**Estimated Savings**: ~60%

| Task | Without Skill | With Skill | Savings |
|------|---------------|------------|---------|
| Multi-agent setup | ~12k tokens | ~5k tokens | 58% |
| Voice agent | ~10k tokens | ~4k tokens | 60% |
| Error debugging | ~8k tokens | ~3k tokens | 63% |
| **Average** | **~10k** | **~4k** | **~60%** |

**Errors Prevented**: 9 documented issues = 100% error prevention

---

## Templates Index

**Text Agents** (8):
1. `agent-basic.ts` - Simple agent with tools
2. `agent-handoffs.ts` - Multi-agent triage
3. `agent-structured-output.ts` - Zod schemas
4. `agent-streaming.ts` - Real-time events
5. `agent-guardrails-input.ts` - Input validation
6. `agent-guardrails-output.ts` - Output filtering
7. `agent-human-approval.ts` - HITL pattern
8. `agent-parallel.ts` - Concurrent execution

**Realtime Agents** (3):
9. `realtime-agent-basic.ts` - Voice setup
10. `realtime-session-browser.tsx` - React client
11. `realtime-handoffs.ts` - Voice delegation

**Framework Integration** (4):
12. `worker-text-agent.ts` - Cloudflare Workers
13. `worker-agent-hono.ts` - Hono framework
14. `api-agent-route.ts` - Next.js API
15. `api-realtime-route.ts` - Next.js voice

**Utilities** (2):
16. `error-handling.ts` - Comprehensive errors
17. `tracing-setup.ts` - Debugging

---

## References

1. `agent-patterns.md` - Orchestration strategies (LLM vs code, parallel, agents-as-tools)
2. `common-errors.md` - All 9 errors with workarounds and sources
3. `realtime-transports.md` - WebRTC vs WebSocket comparison, latency, debugging
4. `cloudflare-integration.md` - Workers setup, limitations, performance, costs
5. `official-links.md` - Documentation, GitHub, npm, community resources

---

## Official Resources

- **Docs**: https://openai.github.io/openai-agents-js/
- **GitHub**: https://github.com/openai/openai-agents-js
- **npm**: https://www.npmjs.com/package/@openai/agents
- **Issues**: https://github.com/openai/openai-agents-js/issues

---

**Version**: SDK v0.3.3
**Last Verified**: 2025-11-21
**Skill Author**: Claude Skills Maintainers
**Production Tested**: Yes

How to use

  1. Copy the skill content above
  2. Create a .claude/skills directory in your project
  3. Save as .claude/skills/claude-skills-openai-agents.md
  4. Use /claude-skills-openai-agents in Claude Code to invoke this skill

Claude Code Skills Collection

170 production-ready skills for Claude Code CLI

Version 3.3.1 | Last Updated: 2026-05-14

<div align="center">

šŸ”Œ Platform Support

This repository uses Claude Plugin Patterns — natively supported by:

PlatformStatusNotes
Claude Codeāœ… NativeFull marketplace support
Factory Droidāœ… NativeFull marketplace support
</div> **For all other Platforms like opencode, codex and others, you can use https://github.com/enulus/OpenPackage **

A curated collection of battle-tested skills for building modern web applications with Cloudflare, AI integrations, React, Tailwind, and more.

PS: if skills.sh warns about any skill: Their scan process is a outdated LLM which flags newest versions pins (like in ZOD) as non existent and by that potentially malicous.


Quick Start

Marketplace Installation (Recommended)

# Add the marketplace
/plugin marketplace add https://github.com/secondsky/claude-skills

# Install individual skills as needed
/plugin install cloudflare-d1@claude-skills
/plugin install tailwind-v4-shadcn@claude-skills
/plugin install ai-sdk-core@claude-skills

See MARKETPLACE.md for complete catalog of all 170 skills.

Bulk Installation (Contributors)

# Clone the repository
git clone https://github.com/secondsky/claude-skills.git
cd claude-skills

# Install all 170 skills at once
./scripts/install-all.sh

# Or install individual skills
./scripts/install-skill.sh cloudflare-d1

Repository Structure

This repository contains 170 production-tested skills for Claude Code, each focused on a specific technology or capability.

Individual Skills: Each skill is a standalone unit with:

  • SKILL.md - Core knowledge and guidance
  • Templates - Working code examples
  • References - Extended documentation
  • Scripts - Helper utilities

Installation Options:

  1. Individual - Install only the skills you need via marketplace
  2. Bulk - Install all 170 skills using ./scripts/install-all.sh

Available Skills (170 Individual Skills)

Each skill is individually installable. Install only the skills you need.

Full Catalog: See MARKETPLACE.md for detailed listings.

Categories

CategorySkillsExamples
tooling29turborepo, plan-interview, code-review
frontend26nuxt-v4, nuxt-v5, tailwind-v4-shadcn, tanstack-query, nuxt-studio, maz-ui, threejs
cloudflare21cloudflare-d1, cloudflare-workers-ai, cloudflare-agents
ai20openai-agents, claude-api, ai-sdk-core
api16api-design-principles, graphql-implementation
web10hono-routing, firecrawl-scraper, web-performance
mobile7swift-best-practices, react-native-app, react-native-skills
database6drizzle-orm-d1, neon-vercel-postgres, supabase-postgres-best-practices
security6csrf-protection, access-control-rbac
auth4better-auth
testing4vitest-testing, playwright-testing
design4design-review, design-system-creation
woocommerce4woocommerce-backend-dev
cms4hugo, sveltia-cms, wordpress-plugin-core
architecture3microservices-patterns, architecture-patterns
data3sql-query-optimization, recommendation-engine
seo2seo-optimizer, seo-keyword-cluster-builder
documentation1technical-specification

How It Works

Auto-Discovery

Claude Code automatically checks ~/.claude/skills/ for relevant skills before planning tasks:

User: "Set up a Cloudflare Worker with D1 database"
           ↓
Claude: [Checks skills automatically]
           ↓
Claude: "Found cloudflare-d1 skills.
         These prevent 12 documented errors. Use them?"
           ↓
User: "Yes"
           ↓
Result: Production-ready setup, zero errors, ~65% token savings

Note: Due to token limits, not all skills may be visible at once. See āš ļø Important: Token Limits below.

Skill Structure

Each skill includes:

skills/[skill-name]/
ā”œā”€ā”€ SKILL.md              # Complete documentation
ā”œā”€ā”€ .claude-plugin/
│   └── plugin.json       # Plugin metadata
ā”œā”€ā”€ templates/            # Ready-to-copy templates
ā”œā”€ā”€ scripts/              # Automation scripts
└── references/           # Extended documentation

Recent Additions

May 2026

Supply Chain Security (cross-cutting):

  • dependency-upgrade expanded with Socket CLI integration — proactive malicious package detection, typosquatting alerts, and CI/CD security gates. New 418-line reference guide, 2 GitHub Actions templates, and expanded supply chain security comparison (3 tools)
  • 31 skills now include "Secure Installation" guidance — contextually-tailored security sections across all high-risk skill categories (scaffolding, MCP/agent SDKs, multi-provider installs, Docker, CI/CD). Covers 8 Bun skills, 5 Nuxt skills, 6 Cloudflare skills, 4 AI/agent skills, and 8 frontend/tooling skills
  • Supply chain security is now a first-class cross-cutting concern woven into the skill collection — not a standalone topic

February - April 2026

Full-Stack Frameworks:

  • nuxt-v5 (v1.0.0) - Full Nuxt 5 support with 4 skills (core, data, server, production), 3 diagnostic agents, and interactive setup wizard
  • supabase-postgres-best-practices - 30 Postgres optimization rules from Supabase across 8 categories
  • threejs (v1.0.0) - 3D web graphics: scenes, geometries, shaders, animations, post-processing

Infrastructure:

  • JSON schema validation - Automated plugin.json validation with CI support
  • GitHub issue templates - Skill-specific issue templates for bug reports, feature requests, and submissions

Plugin Enhancements:

  • mutation-testing - Added Bun native runner support
  • dependency-upgrade - Added supply chain security content

December 2025 - January 2026

Frontend Expansion:

  • nuxt-studio (v1.0.0) - Visual CMS for Nuxt Content with live preview, OAuth auth, and R2 storage integration
  • maz-ui (v1.0.0) - 50+ Vue/Nuxt components with theming, i18n, form generation, and 14 composables

Developer Workflow:

  • plan-interview (v2.0.0) - Adaptive interview-driven spec generation with autonomous quality review
  • turborepo (v2.8.0) - Updated to official Vercel skill with enhanced monorepo build optimization

Mobile Development:

  • react-native-skills (v1.0.0) - React Native & Expo best practices with performance optimization patterns

Enhanced Authentication:

  • better-auth (v2.2.0) - Expanded to 18 framework integrations with 30+ authentication plugins

āš ļø Important: Token Limits

Skill Visibility Constraint

Claude Code has a 15,000 character limit for the total size of skill descriptions in the system prompt. This limit also applies to commands and agents.

What this means:

  • Not all 170 skills may be visible in Claude's context at once
  • Skills are loaded based on relevance and available token budget
  • You can verify how many skills Claude currently sees by asking: "How many skills do you see in your system prompt?"

Checking Visible Skills

To verify which skills are currently loaded:

# Ask Claude Code directly
"Check what skills/plugins you see in your system prompt"

Claude will report something like: "85 of 170 skills visible due to token limits"

Workaround: Increase Token Budget

You can double the headroom for skill descriptions by setting an environment variable:

# Increase limit to 30,000 characters
export SLASH_COMMAND_TOOL_CHAR_BUDGET=30000

# Then launch Claude Code
claude

This gives you approximately 2x more skill visibility in the system prompt.

Note: This is a temporary workaround. The Claude Code team is working on better solutions for skill discovery and loading.


Token Efficiency

MetricManual SetupWith SkillsSavings
Average Tokens12,000-15,0004,000-5,000~65%
Typical Errors2-4 per service0 (prevented)100%
Setup Time2-4 hours15-45 minutes~80%

Across all 170 skills: 400+ documented errors prevented.


Contributing

Prerequisites for Contributors

Install the official plugin development toolkit:

/plugin install plugin-dev@claude-code-marketplace

This provides:

  • /plugin-dev:create-plugin command (8-phase guided workflow)
  • 7 comprehensive skills (hooks, MCP, structure, agents, commands, skills)
  • 2 specialized agents (agent-creator, plugin-validator)

Quick Steps

  1. Create skill directory in plugins/
  2. Add SKILL.md with YAML frontmatter
  3. Run ./scripts/sync-plugins.sh
  4. Submit pull request

See CONTRIBUTING.md and PLUGIN_DEV_BEST_PRACTICES.md for detailed guidelines.


Documentation

DocumentPurpose
START_HERE.mdStart here! Quick navigation guide
PLUGIN_DEV_BEST_PRACTICES.mdRepository-specific best practices (marketplace, budget, quality)
MARKETPLACE.mdFull skill catalog and installation guide
MARKETPLACE_MANAGEMENT.mdTechnical infrastructure (plugin.json, scripts, validation)
CLAUDE.mdProject context and development standards
CONTRIBUTING.mdContribution guidelines

Links


Built with ā¤ļø by Claude Skills Maintainers

View source on GitHub