Setup agent extensions

Agents can be extended with additional capabilities to interact with tools, libraries, and external systems, enabling them to go beyond their core reasoning abilities. This page outlines the agent extensions we recommend for frontend development at Workleap.

Recommended extensions

Below is a non-exhaustive curated list of agent extensions we recommend for frontend development at Workleap. This list is expected to change over time as our practices, patterns, and technologies change. Avoid installing every extension, as too many can negatively affect performance. Select only those that are relevant to your project.

Agent skills

In-process extensions that run in the same runtime as the agent.

They are typically used to:

Avoid additional prompt, serialization, or protocol overhead
Minimize token consumption by not requiring round-trips to external services
Expose shared libraries and utilities directly to the agent (for example, logging or telemetry)

MCP

Out-of-process extensions that communicate with the agent over a protocol boundary.

They are typically used to:

Access external systems
Isolate execution environments
Share capabilities across multiple agents or runtimes

Comparison

Installing too many agent extensions can degrade agent performance. This phenomenon, commonly referred to as extension bloat, occurs because every enabled extension consumes a portion of the agent's context window, leaving less room for the actual task at hand.

How extensions consume context

Agent skills and MCP servers consume context differently:

Agent skills: Only skill metadata (name + description) is loaded into context at all times. The full SKILL.md body loads only when the skill is invoked. This is known as progressive disclosure.
MCP servers: Tool definitions (names, descriptions, JSON schemas for every parameter) are loaded into context. A single MCP server can expose dozens of tools, each consuming tokens.
Subagents: When skills are preloaded via a subagent's skills field, the full skill content is injected at startup, which is significantly heavier than the normal metadata-only behavior.

The skill metadata budget

Claude Code allocates a character budget for skill metadata. The budget scales dynamically at 2% of the context window, with a fallback of 16,000 characters. When the total metadata of all enabled skills exceeds this budget, some skills are silently excluded and the agent will not know they exist.

The SLASH_COMMAND_TOOL_CHAR_BUDGET environment variable can be used to override this limit, and the /context command can be used to check for warnings about excluded skills.

Each skill consumes roughly 109 characters of overhead plus the length of its description. With typical descriptions (~250-300 characters), the 16,000-character fallback allows approximately 40-45 skills before some start getting excluded. Shorter descriptions allow more skills; longer descriptions reduce the count.

👉 Run /context in Claude Code periodically to verify that none of your skills are being excluded.

When bloat starts to matter

Anthropic's guide to building skills recommends evaluating your setup when you have more than 20-50 skills enabled simultaneously. Beyond this range:

Skills may be silently excluded from the agent's view, depending on description length.
Decision quality drops as the agent must choose between more semantically similar options. Microsoft Research documented up to 85% performance reduction in large tool spaces, and found 775 tool name collisions across 1,470 MCP servers.
Conflicting guidance between skills with overlapping domains can produce inconsistent or unexpected behavior.
Response latency increases as the agent processes more context per turn.

Code generation extensions

Description | Agent skill | MCP --- | --- | --- Agent extensions for Squide. | workleap-squide | - | Agent extensions for web configs libraries. | workleap-web-configs | - | Agent extensions for telemetry libraries. | workleap-telemetry | - | Agent extensions for logging libraries. | workleap-logging | - | Agent extensions for React. | workleap-react-best-practices | - | Agent extensions for Hopper. | - | hopper.workleap.design/mcp | Agent extension for React Aria. | adobe/com/react-aria | - | Agent extension for Vitest. | antfu/skills/vitest | - | Agent extensions for end to end tests. | microsoft/playwright-cli + wshobson/agents/e2e-testing-patterns | - | Performance optimization based on Lighthouse performance audits. Focuses on loading speed, runtime efficiency, and resource optimization. | web-quality-skills/performance | - | Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience. | web-quality-skills/core-web-vitals | - | Modern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns. | web-quality-skills/best-practices | - | Comprehensive accessibility guidelines based on WCAG 2.1 and Lighthouse accessibility audits. | web-quality-skills/accessibility | - | Turborepo best practices. | vercel/turborepo | - |

Code review extensions

Description | Agent skill | MCP --- | --- | --- Agent extension for Squide. | workleap-squide | - | Agent extension for web configs libraries. | workleap-web-configs | - | Agent extension for telemetry libraries. | workleap-telemetry | - | Agent extension for logging libraries. | workleap-logging | - | Agent extensions for React. | workleap-react-best-practices | - | Agent extension for React Aria. | adobe/com/react-aria | - | Performance optimization based on Lighthouse performance audits. Focuses on loading speed, runtime efficiency, and resource optimization. | web-quality-skills/performance | - | Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience. | web-quality-skills/core-web-vitals | - | Modern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns. | web-quality-skills/best-practices | - | Comprehensive accessibility guidelines based on WCAG 2.1 and Lighthouse accessibility audits. | web-quality-skills/accessibility | - | Turborepo best practices. | vercel/turborepo | - | PNPM best practices. | antfu/skills/pnpm | - |

Debug & inspection extensions

Description | Agent skill | MCP --- | --- | --- Let agents control and inspect a live Chrome browser. Useful for automation, in-depth debugging, and performance analysis. It debug and inspect a page as a human. | - | chrome-devtools-mcp | Agent extensions for the agent-browser CLI. agent-browser drives a browser like a test runner/automation tool (scripted actions and snapshots). It consume 93% less tokens than Playwright. | vercel-labs/agent-browser | - | Help the agent query the LogRocket highlights API to retrieve user session information, behavior data, and answer questions about user activity. | - | @logrocket/mcp

Audit extensions

Description | Agent skill | MCP --- | --- | --- Comprehensive quality review based on Google Lighthouse audits. Covers performance, accessibility, SEO, and best practices. | web-quality-skills/web-quality-audit | - | Workleap React best practices. | workleap-react-best-practices | - | Workleap Chromatic best practices. | workleap-chromatic-best-practices | - | Turborepo best practices. | vercel/turborepo | - | PNPM best practices. | antfu/skills/pnpm | - | Explore and test a web application with the agent-browser CLI for bugs, UX issues, and other problems, producing a structured report with step-by-step screenshots and reproduction evidence. | vercel-labs/agent-browser/dogfood | - |

Others

Description | Agent skill | MCP --- | --- | --- Evaluate third-party agent skills for security risks before adoption. | workleap-skill-safety-review | - | Reduce skill token consumption (metadata bloat) without losing coverage.

Important: Must be invoked manually using /workleap-skill-optimizer. | workleap-skill-optimizer | - | Netlify CLI and deployment | netlify/context-and-tools/netlify-cli-and-deploy. | - |

👉 To propose a new agent extension, open an issue on GitHub.