phase CLI
phase scans code for avoidable browser work in animation, rendering and loading and installs a skill so an agent can optimize it.
- 105 ★ on the repository
- Last commit
Minimal access
Why this level
- The scanner reads source code and prints a report; it does not change project code.
Install
- Works in
Manual install
npx skills add vercel-labs/phase --skill phaseThe command from the Agent skill section of the README. The scanner is included, no separate install needed.
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The scanner reads source code and prints a report; it does not change project code.
This is third-party code. Review the repository files before installing.
What it does
phase is a browser performance toolkit from Vercel Labs (alpha). `npx phase scan` deterministically looks in code for patterns that make the browser do avoidable work: `--diff origin/main --fail-on critical` catches new critical findings in CI, and `npx phase explain setstate-in-raf` explains a found case and its fix. The `phase` skill installs with `npx skills add vercel-labs/phase --skill phase` and gives an agent runtime API references, performance rules and an audit procedure. It picks the cheapest approach for the task and can build an animation, optimize an existing one and audit a page or component set, then format the result as an HTML report for the team. The scanner ships inside the skill so no separate install is needed, and a findings baseline keeps existing issues from failing new pull requests.
Who it is for. Frontend developers building animations and heavy interfaces who want to catch avoidable browser work in code before release.
Good fit when
- An animation stutters and the cause must be found in code.
- CI must fail on new critical performance findings.
- A page or route needs a check and an HTML report for the team.
- A component library needs an assessment for typical rendering mistakes.
Not a fit when
- Measured performance in a real browser is needed rather than static analysis.
- The project is not JavaScript or TypeScript.
- A stable API without changes is required.
Example request
Audit the /dashboard route with the phase skill and prepare an HTML report with animation findings and fixes.Limitations
The project is marked alpha: the API changes quickly and breaking changes are likely. The scanner is deterministic but every match still needs human review since it finds patterns in code and does not measure a real page. Node.js is needed (`npx` is used). The MIT license is stated in the CLI package. The skill can also be installed manually by copying `skills/phase/` to the project's `.agents/skills/phase/` and referencing `SKILL.md` from `AGENTS.md`.
How to disable. Delete the `.agents/skills/phase` folder from the project or remove the skill through the skill manager, and drop the `phase scan` steps from CI.
FAQ
How do I install the skill?
Run `npx skills add vercel-labs/phase --skill phase`. Manually, copy `skills/phase/` to `.agents/skills/phase/`.
How do I run the scanner?
With `npx phase scan src components` or `npx phase scan --diff origin/main --fail-on critical` for CI.
How do I explain a finding?
With `npx phase explain <rule>`, for example `setstate-in-raf`.
What about existing findings?
Commit a baseline so they do not fail new pull requests.
Is the tool stable?
No, the project is in alpha: the API changes and breaking changes are likely.
Discussion
No questions or reviews yet.
Related
CLI toolsVisant skills for Claude Code: anti-AI-slop UI audit, design, motion and copy decisions, video editing and website showreels
A skill rebuilds a UI from a site, screenshot or screen recording and scores the copy on layout, style, pixels and motion.
A skill for building premium scroll-driven websites on a real design standard: typography, rhythm, depth, motion and in-browser verification
A skill that speeds up a website: measure, regression guards, a loop of small edits and paired comparison.
56 JavaScript snippets for web performance: the agent runs them through skills, MCP or CLI and reasons over the result
A skill methodology for reproducing websites, from a static page to heavy WebGL, built on real source code rather than agent-hallucinated code
README in short
The scanner finds patterns of avoidable browser work and the skill gives an agent the audit procedure. A Vercel Labs project in alpha.