home / skills / remotion-dev / remotion / add-expert

add-expert skill

safe

/.claude/skills/add-expert

This skill helps you add a new expert to the Remotion experts page by updating images, metadata, and generated cards.

npx playbooks add skill remotion-dev/remotion --skill add-expert

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.5 KB

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

## Steps

1. **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.

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

   ```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 protected]' | 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 `]`)

3. **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").

Overview

This skill adds a new expert to the Remotion experts page by adding the expert photo, creating a data entry, and generating the rendered expert card. It guides the required file placements, data fields, and the render step so the expert appears correctly across docs and promo pages.

How this skill works

You add a square PNG headshot into two repo locations, then append a structured object to the experts array with contact and metadata fields. Finally, you run a render command to generate the visual card image and verify the render output. The process enforces filename and slug conventions and uses today’s date for the 'since' field.

When to use it

Onboarding a new freelancer or expert featured on the Remotion experts page.
Updating or adding a profile with a new photo, bio, or contact links.
Preparing a new expert listing for marketing or documentation pages.
When contributing to the repo and needing the generated card image to appear in docs.

Best practices

Use a square PNG headshot saved at both required paths and ensure identical filenames.
Create a lowercase, hyphenated slug from the full name (firstname-lastname).
Set unused social/contact fields explicitly to null instead of omitting them.
Set since to new Date('YYYY-MM-DD').getTime() using today’s date.
Place the new object at the end of the experts array, before the closing bracket.
After adding the entry, run bun render-cards in packages/docs and confirm the output shows 'Rendered experts-<slug>'

Example use cases

Adding Jane Doe as a new expert with website and Twitter handle filled in.
Adding an expert who only accepts videocalls: set videocall URL and null other socials.
Updating an existing expert’s image by replacing both image files and re-running the render step.
Adding a profile with project links inside the description using anchor tags.

FAQ

What image format and size is required?

Provide a square PNG headshot and save it under both specified paths with the same filename.

How do I format the 'since' field?

Use new Date('YYYY-MM-DD').getTime() with today's date to set when the expert was added.