SKILLEMALL.ai
GitHub ↗ RU Sign in

AC vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (the `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.

laguagu/claude-code-nextjs-skills Agent Skills author: laguagu MIT 9 files body ≈ 3 541 tokens Open the sourcegithub.com↗ analyzed 4 d ago

Guide for implementing smooth, native-feeling animations using React's View Transition API (the ViewTransition component, addTransitionType, and CSS view…

As a process C 63/100 · Has gaps — weak spots: result and completion, inputs and preconditions, running it twice

IntegrationSoftware developmenttype and topics are labelled automatically from the skill text
Runs in: Claude / Claude Code ChatGPT / Codex Gemini CLI Cursor GitHub Copilot / VS Code Qwen Code Kimi Code CLI Z.ai (GLM) DeepSeek (Deep Code) Mistral Vibe LangChain (deepagents) OpenClaw Goose OpenCode
JSON
Technical rating
A
96/100
safety, quality, tests
Safety 60%
100
Quality 40%
89
Run on models
none yet
Process rating
C
63/100
Has gaps
Result and completion w 14
0
Inputs and preconditions w 11
0
Progress reporting w 2
0
the three weakest of ten parameters · all ten

How to improve

    For the model run — optional
    • Your own cases (evals/evals.json, 4–6 real requests with expected answers): the full check would then run those instead of a model-drafted suite.
    • A spec.yaml with trigger phrases and assertions — a behaviour contract for CI; `skilltest init` writes a template.

    Guard findings · 0

    ✓ No critical or high findings

    Files scanned: 9. Evidence is masked. Grey chips explain why severity was lowered.

    Against the Agent Skills spec

    ✓ No remarks against the Agent Skills spec

    Process rating: all ten parameters 63/100

    • 0Result and completion. Does not say what the result is
    • 0Inputs and preconditions. Does not say what the process needs to start
    • 0Progress reporting. Says nothing while it works
    • 30Running it twice. 4 mutating operations with no state check
    • 60Tools and files. Uses tools (web) that frontmatter does not declare
    • 100Steps. 17 steps
    • 100When it triggers. States when to use and when not to
    • 100Failures and branches. 2 branches, has a failure section
    • 100Consistency. Name and required fields are in place
    • 100Execution cost. Instruction body is 3541 tokens
    • medium Safety rules and hard prohibitions inside a skill: they belong in the system prompt, here they protect nothing
    • low 13 top-level sections: this looks like several domains in one skill
    • low The response is described with custom markup (13 tags): a typed call is more reliable

    Everything here is measured from the skill text rather than judged by a model, so the numbers are checkable. A parameter weighs more when it is a more common reason for the process to stall.

    Quality signals

    • +5Description has no quoted example phrases that should trigger the skill
    • +4Description does not say when NOT to use the skill (false activations)
    • +3Output format is not stated: the model decides each time
    • +2Single-language instructions
    • +3Description length 666: enough signal without eating the budget
    • +4Structure: 32 headings
    • +3Step-by-step instructions: 17 items
    • +4Has examples (14 code blocks)
    • +4Reference files are cited in the instructions (5 of 5)
    • +1License stated

    Quality base 70; lint remarks subtract, signals add up to 100. Result: 89.