Suede AI Skills Directory
web-artifacts-builder vs vercel-react-view-transitions
A comparison selected for React and Next.js. Compare the task description and license first, then use the score breakdown to inspect their published files.
Quality snapshot: 2026-10-22. Install counts: skills.sh, 2026-11-08. This pair was selected from shared topics and recorded installs; it is not a claim about joint search volume.
At a glance
| Evidence | web-artifacts-builder (anthropics/skills) | vercel-react-view-transitions (vercel-labs/agent-skills) |
|---|---|---|
| Listing | web-artifacts-builder | vercel-react-view-transitions |
| Task | Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. | Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries. |
| Quality score | 87/100 · B | 68/100 · D |
| License | Apache-2.0 | MIT |
| Cost lane | free-open-source | free-open-source |
| Recorded installs | 117,122 | 183,612 |
| Report | Score report | Score report |
Where the scores differ
| Component | web-artifacts-builder | vercel-react-view-transitions |
|---|---|---|
| Structural checks | 56 / 56 | 48 / 56 |
| Description length | 5 / 5 | 3 / 5 |
| Boundary clause | 4 / 4 | 0 / 4 |
| Example request | 0 / 3 | 0 / 3 |
| Instruction depth | 4 / 7 | 7 / 7 |
| Reference files | 0 / 3 | 3 / 3 |
| Bundled scripts | 2 / 2 | 0 / 2 |
| Recent maintenance | 9 / 9 | 6 / 9 |
| Curated-list citations | 7 / 7 | 1 / 7 |
| Tool permissions declared | 0 / 2 | 0 / 2 |
| Compatibility declared | 0 / 2 | 0 / 2 |
web-artifacts-builder has the higher structural-quality score by 19 points. Use the task descriptions above to judge fit. These scores do not measure runtime performance or security.
Inspect before installing
web-artifacts-builder and vercel-react-view-transitions link to their publishers, licenses and installation routes. Read the source before giving either skill access to your project.