[ PORTABLE SKILL ]
frontend-performance
This skill should be used when the user wants to optimize Next.js frontend performance using Lighthouse, bundle analysis, and animation best practices. Use when diagnosing slow pages, optimizing bundle size, or improving Core Web Vitals (LCP, TBT, CLS).
PART OF
bopen-tools →Complete plugin installation is recommended so this skill keeps its agents, hooks, commands, and runtime context.
Runtime support:Claude pluginCodex pluginPortable skills
- PUBLISHER
- b-open-io
- RELATIONSHIP
- authored
- VERSION
- 1.0.0
- BENCHMARK
- unknown
[ RECOMMENDED INSTALL ]
Install bopen-tools
The complete plugin is the supported path. It preserves everything the publisher designed to work alongside this skill.
Codex
VERIFIED[ ADVANCED · INDIVIDUAL SKILL ]
Install only this skill
Use this narrower path only when you intentionally want the portable SKILL.md without the plugin’s surrounding capabilities.
Skills CLI
VERIFIED- Installs only the portable skill; it omits plugin hooks, agents, commands, apps/MCP configuration, and unlisted companion skills.
[ PROVENANCE ]
Trace it to the source.
- DISTRIBUTED SOURCE
- skills/frontend-performance/SKILL.md ↗
- UPSTREAM SOURCE
- No separate upstream declared
- DISTRIBUTED DIGEST
- sha256:f500ca911252f74d202e9cd9722ef0500640303fd86db8ce688bd764ebed39a2
- LOCK HASH
- Not applicable
Companion skills
No required companion skills are declared.
Agents using this skill
Leaf
Map and geospatial specialist expert in MapLibre GL JS, Mapbox GL JS, Leaflet, CesiumJS, deck.gl, OpenLayers, Google Maps, ArcGIS, D3-geo, Turf.js, Protomaps/PMTiles, react-map-gl, Kepler.gl, MapTiler, HERE Maps, TomTom, Apple MapKit JS, Pigeon Maps, vector tiles, GeoJSON clustering, 3D globe rendering, large-scale data visualization, map theming, and geographic data analysis. Use this agent when the user needs to build, style, optimize, or debug interactive maps, choose a mapping platform, swap map frameworks, implement marker clustering, add heatmaps, render 3D globes, visualize large geospatial datasets, perform geospatial analysis, or work with tile providers. Examples: <example>Context: User wants to switch from Leaflet to MapLibre GL JS. user: "Swap Leaflet for MapLibre" assistant: "I'll use the cartographer agent to migrate your Leaflet map to MapLibre GL JS." </example> <example>Context: User wants markers to cluster at low zoom levels. user: "Add marker clustering to the map" assistant: "I'll use the cartographer agent to implement GeoJSON source clustering in your map." </example> <example>Context: User wants the map to respect system dark/light preference. user: "Make the map theme-aware" assistant: "I'll use the cartographer agent to wire prefers-color-scheme into your map's style switching." </example> <example>Context: Tile layers aren't rendering and user isn't sure why. user: "Debug why map tiles aren't loading" assistant: "I'll use the cartographer agent to diagnose your tile loading issue." </example> <example>Context: User is choosing a mapping platform or tile provider. user: "Which mapping library should I use?" assistant: "I'll use the cartographer agent — Leaf knows every platform's tradeoffs." </example> <example>Context: User wants a density visualization. user: "Add a heatmap layer" assistant: "I'll use the cartographer agent to add a heatmap layer to your map." </example> <example>Context: Performance is degrading with many markers. user: "Optimize map rendering for 1000+ markers" assistant: "I'll use the cartographer agent to tune clustering and rendering for large datasets." </example> <example>Context: User needs a 3D globe or digital twin visualization. user: "Build a 3D globe with CesiumJS" assistant: "I'll use the cartographer agent to set up CesiumJS with 3D Tiles and terrain." </example> <example>Context: User has millions of data points to render on a map. user: "Visualize 2 million GPS points on a map" assistant: "I'll use the cartographer agent to set up deck.gl with MapLibre for GPU-accelerated rendering." </example> <example>Context: User needs geospatial calculations. user: "Calculate the buffer zone around these polygons" assistant: "I'll use the cartographer agent to implement geospatial analysis with Turf.js." </example> <example>Context: User wants to self-host tiles cheaply. user: "Host our own map tiles without a tile server" assistant: "I'll use the cartographer agent to set up Protomaps PMTiles on S3/R2." </example>
Kris
Creative 3D web developer building Three.js and React Three Fiber experiences. 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", "make an interactive 3D experience", "build a WebGL prototype", "create a 3D portfolio", "optimize 3D performance", or needs help with R3F, Drei, GLSL, TSL, post-processing, or 3D asset pipelines.
Torque
Performance optimization specialist focused on CLI tools, profiling, bundle analysis, and runtime optimization. Expert in modern optimization techniques for agentic environments with automation-friendly tools. Leverages React Compiler and composition patterns for frontend performance. Use this agent when the user wants to improve runtime performance, reduce bundle size, fix Core Web Vitals, profile bottlenecks, optimize animations without changing UI, optimize images for web, generate thumbnails, or run a full website performance audit. Examples: <example> Context: User has a slow Next.js landing page with poor Lighthouse scores. user: "Our LCP is 4.2s and TBT is 800ms. Fix it without touching the design." assistant: "I'll use the optimizer agent to profile the bundle, identify blocking scripts, and apply targeted fixes while preserving all visuals." <commentary> Performance problem with an explicit constraint to preserve design — optimizer is the right agent. </commentary> </example> <example> Context: User wants faster animations without visual regression. user: "The hero section animations are janky on mobile but I don't want them to look different." assistant: "I'll use the optimizer agent to audit the animation implementation and switch to compositor-only properties." <commentary> Animation performance with a hard constraint on preserving the feel — optimizer handles this, not designer. </commentary> </example> <example> Context: User wants bundle size reduced. user: "Our JS bundle is 2.4MB. Can we cut it down?" assistant: "I'll use the optimizer agent to run bundle analysis and identify the largest contributors." <commentary> Bundle optimization task — optimizer's core domain. </commentary> </example> <example> Context: User wants images optimized for production. user: "Our images directory is 80MB and pages load slowly." assistant: "I'll use the optimizer agent to compress images, generate appropriate thumbnails, and ensure next/image is configured correctly." <commentary> Image optimization — Torque handles this with the optimize-images skill and sips/sharp tooling. </commentary> </example> <example> Context: User wants a full site performance assessment. user: "Run a full performance audit on our site." assistant: "I'll use the optimizer agent to run Lighthouse, analyze network requests, check image sizes, and audit the bundle." <commentary> Full site audit — Torque's website assessment workflow covers Lighthouse, images, bundle, and Core Web Vitals. </commentary> </example>
Related skills
ALL BOPEN-TOOLS SKILLS →bopen-tools
advisor
Active when a Claude Code or Codex main session needs an independent, read-only second opinion at a commitment boundary. Use before substantive work on a hard task, when stuck or changing approach, at a final review gate, or when the user says "consult the advisor", "get a second opinion", "ask codex", "ask Fable", "ask a bigger model", or wants an advisor set up. Supports Claude-native advisor behavior, Codex-as-advisor, and a Codex-main to Claude Fable CLI channel. The advisor returns guidance; the main session retains execution and decision ownership.
authored0.0.2
bopen-tools
agent-auditor
Comprehensive audit skill for agents and skills across the plugin ecosystem. This skill should be used when the user asks to "audit agents", "review skill quality", "check skill health", "validate plugin skills", "audit our agents", "run a skill audit", or when performing periodic maintenance on agents and skills. Also use after creating or modifying multiple skills to verify ecosystem consistency.
authored0.1.2
bopen-tools
agent-decommissioning
This skill should be used when the user asks to "retire an agent", "decommission an agent", "remove an agent from the team", "shut down a bot", "remove a bot", "sunset an agent", or "take an agent offline permanently". This is a joint workflow between Satchmo (agent-builder) and Johnny (clawnet-bot:clawnet-mechanic). Satchmo handles plugin/code removal; Johnny handles infrastructure teardown (ClawNet bot, sandbox, BAP identity).
authored1.0.0
bopen-tools
agent-onboarding
Complete end-to-end checklist for adding a new agent to the bOpen team. Use when creating a new agent, onboarding a new team member, or need to remember the full agent deployment pipeline — design, write, avatar, plugin, Paperclip registration, roster, and optional ClawNet bot deployment.
authored1.1.1
bopen-tools
benchmark-skills
Use this skill when creating evals or assertions for a skill, running the skill benchmark harness, measuring skill effectiveness vs baseline, or writing evals.json files alongside skills. Invoke whenever someone asks to test, benchmark, or evaluate a skill's quality.
authored2.0.1
bopen-tools
charting
Full-stack data visualization and charting intelligence. This skill should be used when the user asks to "create a chart", "visualize this data", "build a dashboard", "plot this", "graph these metrics", "show me a chart of", "make a bar chart", "create a line graph", "build a heatmap", or needs help choosing the right chart type, selecting a charting library, or engineering the data pipeline from raw database state to rendered visualization. Covers chart selection, data transformation, library choice by scale, performance optimization, and accessibility.
authored1.0.0