A

add-expert

by @remotion-devv
4.3(120)

This skill automates the process of adding new experts to the Remotion experts page. It handles image uploads, structured data entry (such as name, social links, and description), and the automatic generation of expert cards, ensuring content consistency and reducing manual errors. With this skill, users can efficiently update the expert list without needing deep knowledge of the codebase, thereby accelerating content publishing and website maintenance.

content-managementautomationdocumentationwebsite-updateGitHub
Installation
npx skills add https://github.com/remotion-dev/remotion --skill add-expert
compare_arrows

Before / After Comparison

1 组
Before

Before this skill, developers had to manually upload expert images to specific directories, edit TSX files to add structured data, and manually run commands to generate expert cards. This process was tedious and prone to issues like incorrect paths or inconsistent data formats, consuming significant time.

After

This skill automates the entire expert information entry process. Developers only need to provide the necessary information, and this Skill automatically handles image placement, data formatting, and card generation, significantly reducing manual operations and potential errors, greatly improving efficiency and accuracy.

SKILL.md

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:

    {
        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 ])
  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").

User Reviews (0)

Write a Review

Effect
Usability
Docs
Compatibility

No reviews yet

Statistics

Installs2.4K
Rating4.3 / 5.0
Version
Updated2026年10月17日
Comparisons1

User Rating

4.3(120)
5
37%
4
43%
3
13%
2
5%
1
2%

Rate this Skill

0.0

Compatible Platforms

🤖claude-code

Timeline

Created2026年6月13日
Last Updated2026年10月17日
🎁 Agent Knowledge Cards
Survey