Repository navigation
Update cloudinary-next skill for next-cloudinary v7 - #28
Conversation
|
Hi @strausr, just a note on the failing "Every SKILL.md is discovered" check. It isn't related to the changes here. The check runs |
… note, player major versions
|
Thanks for the review, @strausr! I've applied all four suggestions in the latest commit. Would you mind taking another look when you have a moment? |
strausr
left a comment
There was a problem hiding this comment.
@PaulBoye-py Looks great!
|
@strausr, @jackieros I've merged main (including #26) and bumped cloudinary-next to 1.2.0, since #26 already released 1.1.0. The merge was clean, and check-version-block.sh and check-versions.sh both pass. Thank you. |
Summary
Updates the
cloudinary-nextskill for next-cloudinary v7, while keeping projects on v6 supported. The skill now checks which next-cloudinary and Next.js versions a project uses before writing code, follows v7 by default, and switches to v6 guidance when the project is on v6.next-cloudinary 7.0.0 is now on npm's
latesttag, so a plainnpm install next-cloudinaryinstalls v7.Why
next-cloudinary v7 requires Next.js 16, React 18.2 or 19, and Node.js 22, and changes a few things agents generate code for (
'use client'is built in,onUploadis removed, anexportsmap is added, Video Player v4). The same skill has to serve both v6 and v7 projects.While testing, two existing problems turned up that affect both versions:
params.slugdirectly. On Next.js 16paramsis a Promise, so the image was generated with empty text, without any build error.useRef<unknown>(null)forplayerRefdoesn't type-check when passed toCldVideoPlayer.The skill also said
CldImageworks in Server Components. That is only true in v7: in v6, rendering it from a Server Component fails withuseState is not a function.Changes
SKILL.md: a version check as the first workflow step; the'use client'rules rewritten (v7: components can render in Server Components unless functions are passed; v6: every component needs a Client Component);onUploadmarked as removed in v7; the two new references added to the map. Version bumped to 1.1.0.references/v6.md: requirements and the short list of v6 differences (Server Components, CSS path, video player version,onUpload,seed, deep imports,paramson Next.js 14).references/migrating-to-v7.md: when a project can upgrade (and when it should stay on v6), what the upgrade gives, what to search for and change, and the steps.project-setup.md, checklist): the major version is picked from the project's Next.js version (next-cloudinary@6on Next.js 15 or earlier). An existing project keeps its major version unless the user wants to upgrade.video-player.md): Video Player v4 notes (Studio posters, custom CSS, the 7.0aspectRatioposter limitation and its workaround), the CSS paths for each version, typed refs, andonDataLoad.await paramsfor Next.js 15 and 16. The default size is corrected to 1200×627 (the skill said 1200×630; v6 and v7 both generate 1200×627).playerReftyped with theCloudinaryVideoPlayertype exported by next-cloudinary.ERESOLVEinstall error, "Functions cannot be passed directly to Client Components", the v6useStateerror, the short CSS path on v6,ERR_PACKAGE_PATH_NOT_EXPORTED, theaspectRatioposter, Studio posters and the v6 remount issue. Outdated entries updated.fillBackgroundseedand the allowedassetTypevalues, the decision tree, and the import rules.Testing
Every behaviour the skill describes was checked against the published packages, each in a separate Next.js build. The Server Component, CSS path, deep import and
playerRefchecks were run on 6.19.3 and 7.0.0. The other checks were run on 7.0.0-beta.17, whose published code is identical to 7.0.0 apart from the version number.playerReftype, and thecolors/fontFace/logoprops with Video Player v4The updated skill was then installed in six test projects, and Claude Code was given the same tasks in each (a video page with a play event, an OG image page, an upload page). Each project was then built and checked in a browser:
next-cloudinary@6and explained whyonUpload, a deep import andanalytics: false; flaggedaspectRatioand the custom player CSSnext-cloudinary7.0.0 and followed v7 guidanceThe first five runs were done before the 7.0.0 release, so the v7 projects used 7.0.0-beta.17. The last run used 7.0.0.
In all six,
npm run buildpassed, the OG image URL contained the slug as a text overlay, "playing" was logged on playback, and the upload widget opened. All six runs used Claude Code. The skill wasn't tested with other AI coding agents.Repo checks:
check-discovery.sh,check-links.shandcheck-versions.shpass.Related PRs
SKILL.md. It merges cleanly with this branch.main. Itscloudinary-nextfiles are the same as on currentmain, so it doesn't overlap with these changes.Follow-ups
aspectRatioposter limitation is planned to be fixed in next-cloudinary 7.1. The skill text will need updating then.