Add Event to OpenAPI Events

VerifiedSafe

Create a new event or speaker entry for the OpenAPI events site by creating a YAML file and converting images to WebP.

Sby Skills Guide Bot
ContentBeginner
7/23/2026
Claude Code
#yaml-data#webp-images#events-site#static-site#data-entry

Recommended for

Automated summary

Creates the data/<slug>/event.yml data file for a new event (or conference, masterclass, talk) on the OpenAPI events site, first converting its images into repo-hosted WebP files.

Strengths

  • Documents the full YAML schema for required and optional fields (agenda, talks, sponsors, SEO meta) along with consistency rules such as slug matching the folder name and permalink being /events/ + slug
  • Enforces local image hosting through WebP conversion, either batched from source-images/<slug>/ or one file at a time with --kind cover/avatar, instead of remote URLs
  • Includes an explicit verification step (npm run typecheck then npm run build) and explains how to pin listing order via data/events.order.yml

Limitations

  • Tightly coupled to this specific repository's layout and npm scripts (convert-image, npm run img), so it is not portable as-is
  • Assumes the user supplies the cover image and each speaker photo up front, otherwise the agent has to ask for them
  • Real validity of the file is only confirmed by typecheck/build, with no dedicated schema validation beforehand
When to use it

Use it when adding a new event or speaker to the OpenAPI events site from details and images the user provides.

When not to use it

Avoid it for an events site that does not use this data/<slug>/event.yml structure and this repo's npm scripts.

Security analysis

Safe
Quality score88/100

The skill is purely editorial documentation for a specific repo's event-data workflow. It instructs the agent to run existing project npm scripts (npm run img / typecheck / build) and to fetch user-supplied image URLs into the repo, which are legitimate, transparent operations — no destructive commands, no credential/secret access, no obfuscated or exfiltrating payloads, and no attempts to disable safety controls. The only mild consideration is that it invokes npm scripts and network image downloads, which is normal build tooling for this repository.

No concerns found

How this analysis is made

Examples

Add a conference
Add a new conference to the events site: 'API Days Tokyo', October 14 — 15, 2026 at Tokyo International Forum, Japan, 09:00–17:00, type Conference, status upcoming. Cover image is at https://example.com/tokyo.jpg and the speaker is Jane Doe, Staff Engineer at Acme, photo /tmp/jane.jpg.
Add a masterclass with local images
Create a masterclass entry for our online 'API Design Fundamentals' workshop on March 3, 2026. Raw files are already in source-images/api-design-fundamentals/ with cover.png and speaker photos named after each speaker — run the batch image conversion and generate the event.yml.
Add a speaker to an existing event
Add a new speaker, Marie Curie, Principal Engineer at Radium Labs, to the existing api-days-tokyo event. Her photo is at /tmp/marie.jpg — convert it to WebP and update the event.yml speakers list.

name: add-event description: Add a new event (or speaker) to the OpenAPI events site by creating data/<slug>/event.yml, with speaker avatars and the event image converted to repo-hosted WebP. Use when asked to add/create a new event, conference, masterclass, or talk to the site, or to add a speaker to an existing event.

Add an event to the OpenAPI events site

Each event is its own file: data/<event-slug>/event.yml (one event per file, discovered and bundled at build time, typed by EventItem in lib/events.ts). Adding an event = creating that file and hosting its images locally via the convert-image skill.

Steps

  1. Gather the details from the user (title, dates, location, type, times, description, speakers, image). Ask for anything missing — especially the event image and each speaker photo (local path or URL).

  2. Convert every image to a repo-hosted WebP with the convert-image skill / npm run img. Images are stored per event under public/img/events/<event-slug>/. Do not put remote URLs (unsplash/pravatar) into new entries — host them locally.

    Preferred — batch the inbox. Have the user drop raw files into source-images/<event-slug>/ (gitignored): the event image named cover.*, each speaker file named after the speaker (jane-doe.jpg), optional gallery/ subfolder. Then:

    npm run img -- --event <event-slug> --all
    

    Or one image at a time (path or URL):

    npm run img -- "<url-or-path>" --event <event-slug> --kind cover
    npm run img -- "<url-or-path>" --event <event-slug> --kind avatar --name jane-doe
    

    Use the printed /img/events/<event-slug>/... paths as the field values.

  3. Create data/<event-slug>/event.yml with the schema below (a single YAML mapping — no leading -, since it's one event per file).

  4. Ordering (optional). Events are listed by date by default (upcoming soonest-first, past most-recent-first). To pin a specific order, add the slug to data/events.order.yml — that file is the primary order source; anything not listed falls back to date order.

  5. Verify: npm run typecheck then npm run build (must emit out/ cleanly).

Schema — data/<slug>/event.yml

Required fields:

title: 'API Days Tokyo' # display name
slug: api-days-tokyo # MUST equal the folder name; used in the URL
event_date: 'October 14 — 15, 2026' # human string; em dash (—) for ranges
location: 'Tokyo International Forum, Japan'
type: 'Event' # 'Event' | 'Conference' | 'Masterclass'
status: 'upcoming' # 'active' (featured) | 'upcoming' | 'finished'
image: '/img/events/api-days-tokyo/cover.webp' # repo-hosted WebP from step 2
time_start: '09:00'
time_end: '17:00'
description: 'One-line summary of the event.'
permalink: '/events/api-days-tokyo' # must be '/events/' + slug
speakers: # [] if none (e.g. past events)
  - name: Jane Doe
    position: 'Staff Engineer | Acme'
    photo: '/img/events/api-days-tokyo/speakers/jane-doe.webp' # from step 2
tags: [event] # lowercase of type, e.g. [conference]

Optional detail-page fields (omit if not known yet):

metaTitle: 'API Days Tokyo' # SEO title override
metaDescription: 'Join us at API Days Tokyo'
sponsors:
  - name: boomi
agenda: # event-page schedule: date -> category -> sessions
  'October 14':
    'Opening and keynote':
      - title: 'Welcome'
        time: '09:00 — 09:25'
        permalink: /events/talks/tokyo-welcome # optional, links to a talk below
        speakers:
          - name: Jane Doe
            position: 'Staff Engineer | Acme'
            photo: '/img/events/api-days-tokyo/speakers/jane-doe.webp'
            tag: OAI # optional badge
talks: # individual talk pages at /events/talks/<slug>
  - slug: tokyo-welcome
    title: 'Welcome'
    description: 'Full talk description.'
    time: 'October 14, 09:00 — 09:25'
    category: 'Opening and keynote'
    speakers:
      - name: Jane Doe
        position: 'Staff Engineer | Acme'
        photo: '/img/events/api-days-tokyo/speakers/jane-doe.webp'
    schedule: # sidebar day schedule on the talk page
      - { time: '09:00', title: 'Welcome', permalink: /events/talks/tokyo-welcome }

talks[] do not repeat the event title/date — those are derived from the parent.

Field rules

  • slug — unique kebab-case, equal to the folder name; permalink must be /events/<slug>. For yearly past editions, suffix the year (e.g. api-days-tokyo-2025).
  • status — active renders as the featured card; upcoming is a normal upcoming card; finished shows on the past-events page.
  • type / tags — tags is the lowercased type in a list: Event→[event], Conference→[conference], Masterclass→[masterclass].
  • speakers — [] when none. Each needs name, position, local photo.
  • event_date — uses an em dash — (not hyphen) for ranges; match existing rows.

Adding a speaker to an existing event

Convert the avatar into that event's folder (npm run img -- "<url-or-path>" --event <event-slug> --kind avatar --name <speaker-slug>), then add an entry to that event's speakers: list in data/<event-slug>/event.yml with the printed /img/events/<event-slug>/speakers/... path. No new file.

After adding

Confirm it validates (npm run typecheck / npm run build) and tell the user the event URL (/events/<slug>). Both deploy targets pick it up: the GitHub Pages build and the Cloudflare Worker build both bundle every event.yml.

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/add-event-to-openapi-events-mrx3xwpe/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/add-event-to-openapi-events-mrx3xwpe' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/add-event-to-openapi-events-mrx3xwpe/download' --output '.skill-downloads/add-event-to-openapi-events-mrx3xwpe/SKILL.md.part' && mv '.skill-downloads/add-event-to-openapi-events-mrx3xwpe/SKILL.md.part' '.skill-downloads/add-event-to-openapi-events-mrx3xwpe/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/add-event-to-openapi-events-mrx3xwpe/SKILL.md' && test -s '.skill-downloads/add-event-to-openapi-events-mrx3xwpe/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/add-event' && cp -R '.skill-downloads/add-event-to-openapi-events-mrx3xwpe' '.claude/skills/add-event'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/add-event-to-openapi-events-mrx3xwpe'

openskills read 'add-event-to-openapi-events-mrx3xwpe'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/add-event-to-openapi-events-mrx3xwpe/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills