COMPLETE PLUGIN
View an example
Example installation for Web
Example session using the verified commands above.
EXAMPLE SESSION~/dev/project
/plugin install web-dev@b-open-io
Plugin(Web)Installed Web for Claude Code
Claude Code is ready to use.
by bOpen
[ PORTABLE SKILL ]
frontend-performance
This skill should be used when the user asks to "optimize my Next.js app", "why is this page slow", "reduce my bundle size", "improve Core Web Vitals", or "run a Lighthouse audit". Diagnoses and fixes Next.js frontend performance issues using Lighthouse, bundle analysis, and animation best practices — covering LCP, TBT, and CLS.
PART OF
Web →Install the complete plugin to include its agents, hooks, commands, and runtime context.
Runtime support:Claude pluginCodex pluginGrok BuildOpenCode + portable skills
- PUBLISHER
- b-open-io
- RELATIONSHIP
- authored
- VERSION
- 1.0.0
- BENCHMARK
- unknown
[ INSTALL ]
Install frontend-performance
Fastest path: hand this line to the coding agent doing the setup. It reads this page and installs the Web plugin, which ships this skill with everything it relies on.
PROMPTPASTE INTO YOUR AGENT
Click anywhere on the prompt to copy.
[ MANUAL SETUP ]
Choose a runtime, then follow its setup steps. This installs the complete Web plugin.
CLAUDE CODE
[ ADVANCED ] INSTALL ONLY THIS SKILL
The portable SKILL.md on its own, without the plugin’s hooks, agents, commands, and companion skills. Use it only when you intentionally want the narrower path.
Skills CLI
Grok Bot
[ PROVENANCE ]
Trace it to the source.
- DISTRIBUTED SOURCE
- modules/web-dev/skills/frontend-performance/SKILL.md ↗
- UPSTREAM SOURCE
- No separate upstream declared
- DISTRIBUTED DIGEST
- sha256:de5c5f42f21f9fba97c5643ed7965070a069ecf4249819e715f3fdb3e7212ca3
- LOCK HASH
- Not applicable
Companion skills
No required companion skills are declared.
Agents using this skill
Torque
Performance specialist for profiling, bundle analysis, Core Web Vitals, and image optimization. Use this agent when the user asks to "fix our LCP", "reduce bundle size", "profile this bottleneck", "make animations less janky", "optimize these images", or "run a full performance audit" — especially with a constraint to preserve the existing design. Not for visual redesign (use designer) or security review (use code-auditor).
Kris
Creative 3D web developer for Three.js and React Three Fiber, including diegetic and world-space UI. Use this agent when the user asks to "create a 3D scene", "build a Three.js demo", "write a shader", "add physics to a scene", "build a WebGL prototype", or "optimize 3D performance". Covers R3F, Drei, GLSL, TSL, and 3D asset pipelines. Not for 2D interface design (use designer).
[ SOCIAL SHARE ]
Share this skill.
Pass the canonical page to a teammate or keep it close for later.