Add Expert
Add a new Remotion expert profile with photos, experts-data entry, and generated expert cards in the Remotion monorepo docs and promo pages.
Overview
Add Expert is an agent skill for the Build phase that adds a new profile to the Remotion experts page with images, experts-data.tsx metadata, and generated expert cards.
Install
npx skills add https://github.com/remotion-dev/remotion --skill add-expertWhat is this skill?
- Three-step flow: headshot PNG in two static paths, experts-data.tsx entry, bun render-cards
- Square PNG headshots synced to docs and promo-pages freelancer image folders
- experts array schema: slug, socials, since timestamp, JSX description with optional links
- slug rules: lowercase hyphenated name; unused social fields set to null
- render-cards in packages/docs generates static/generated expert card output
- 3 numbered implementation steps in the skill
- Expert headshot must exist in 2 matching static image paths
Adoption & trust: 1k installs on skills.sh; 49.4k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need to list a new Remotion expert but the repo requires duplicate assets, a strict TSX data entry, and a render-cards step that is easy to get wrong by memory.
Who is it for?
Remotion repo maintainers adding vetted experts to the public freelancers/experts page.
Skip if: Builders who do not work in the Remotion monorepo or who need a generic CMS-only team page with no code changes.
When should I use this skill?
Adding a new expert to the Remotion experts page in the Remotion monorepo.
What do I get? / Deliverables
A complete experts-data entry, matching PNGs in both image paths, and regenerated static expert cards ready for the docs site.
- Updated experts entry in packages/promo-pages/src/components/experts/experts-data.tsx
- Generated expert card under packages/docs/static/generated/
Recommended Skills
Journey fit
This skill lives in Build because it modifies the Remotion documentation and marketing site source, not distribution or analytics workflows. Docs subphase is the right shelf for maintaining the experts page content, static assets, and generated card artifacts inside packages/docs and promo-pages.
How it compares
Use instead of hand-editing only the markdown docs without updating promo-pages assets and running render-cards.
Common Questions / FAQ
Who is add-expert for?
Remotion contributors and solo maintainers of the Remotion docs/promo-pages who add official expert listings with the repo’s prescribed file layout.
When should I use add-expert?
Use it in Build (docs) right after approving a new expert profile, before publishing docs that link to the experts index.
Is add-expert safe to install?
It only describes filesystem and bun commands inside a trusted fork; review the Security Audits panel on this page before running render scripts in CI or locally.
SKILL.md
READMESKILL.md - Add Expert
## 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@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").