add-expert

remotion-dev/remotion

Add a new expert to the Remotion experts directory page

What is add-expert?

This skill adds a freelancer or expert to the Remotion experts listing. Use it when onboarding a new expert to the platform—it handles photo placement, data entry, and card generation.

Upload expert headshot photos to two required directories
Add expert metadata (name, social links, bio) to the experts data file
Generate and render the expert's profile card image
Validate the entry with automated card rendering

How to install add-expert

npx skills add https://github.com/remotion-dev/remotion --skill add-expert

Prerequisites

Access to the Remotion repository
Expert's headshot photo in PNG format (square dimensions)
Expert's contact and social media information (website, Twitter, GitHub, LinkedIn, email, or calendar link)
bun package manager installed for running render-cards

Claude Code

Cursor

Windsurf

Cline

How to use add-expert

1.Prepare a square PNG headshot photo of the expert
2.Place the photo in both `packages/docs/static/img/freelancers/<firstname>.png` and `packages/promo-pages/public/img/freelancers/<firstname>.png`
3.Open `packages/promo-pages/src/components/experts/experts-data.tsx` and add a new entry to the experts array with the expert's details (name, slug, social links, bio, start date)
4.Set unused social fields to null and the since date to today
5.Run `bun render-cards` in the `packages/docs` directory to generate the expert's profile card
6.Verify the output shows 'Rendered experts-<slug>' confirming successful card generation

Use cases

Good for

Onboarding a new Remotion expert or freelancer to the public directory
Adding a contractor's profile with links to their portfolio and social accounts
Generating the visual expert card that appears on the Remotion website
Updating the experts page when a new specialist joins the network

Who it's for

Remotion maintainers and administrators
Community managers adding experts to the directory
Project leads managing the experts listing

add-expert FAQ

What format and dimensions should the expert photo be?

The photo must be a square PNG headshot. It should be placed in both the docs and promo-pages directories with identical content.

What should the slug be?

The slug must be a lowercase, hyphenated version of the expert's name (e.g., 'john-doe' for John Doe).

Do all social media fields need to be filled?

No. Set any unused social fields (website, X/Twitter, GitHub, LinkedIn, email, videocall) to null.

What does the render-cards command do?

It generates a visual profile card image for the expert at `packages/docs/static/generated/experts-<slug>.png`. You should verify it says 'Rendered' (not 'Existed') to confirm a new card was created.

When should the since date be set?

Set the since date to today's date using `new Date('YYYY-MM-DD').getTime()` to mark when the expert was added to the directory.

Full instructions (SKILL.md)

Source of truth, from remotion-dev/remotion.

name: add-expert description: Add a new expert to the Remotion experts page

Steps

Add the expert's photo to both:
- packages/docs/static/img/freelancers/<firstname>.png
- packages/promo-pages/public/img/freelancers/<firstname>.png
The image should be a square headshot (PNG format). Both paths must have the same file.

Add an entry to the experts array in packages/promo-pages/src/components/experts/experts-data.tsx:

{
    slug: 'firstname-lastname',
    name: 'First Last',
    image: '/img/freelancers/<firstname>.png',
    website: 'https://example.com' | null,
    x: 'twitter_handle' | null,
    github: 'github_username' | null,
    linkedin: 'in/linkedin-slug/' | null,
    email: 'email@example.com' | null,
    videocall: 'https://cal.com/...' | null,
    since: new Date('YYYY-MM-DD').getTime(),
    description: (
        <div>
            A short description of the expert's work and specialties.
            Links to projects can be included with <a> tags.
        </div>
    ),
},

since should be set to today's date
slug must be lowercase, hyphenated version of the name
Set unused social fields to null
The entry goes at the end of the experts array (before the closing ])

Render the expert card by running in packages/docs:
```
bun render-cards
```
This generates packages/docs/static/generated/experts-<slug>.png. Verify it says "Rendered experts-<slug>" (not "Existed").