workleap

Workleap's shared web configuration packages (@workleap/eslint-configs, @workleap/typescript-configs, @workleap/rsbuild-configs, @workleap/rslib-configs, @workleap/stylelint-configs, @workleap/browserslist-config). Use when setting up, customizing, extending, or troubleshooting shared web tooling configs in a Workleap project — including ESLint, TypeScript, Rsbuild, Rslib, Stylelint, Browserslist, and monorepo (Turborepo) strategies. Activate even if only one tool is mentioned, as the packages are designed to work together.

Workleap's Chromatic best practices for snapshot cost control and CI optimization. Use when auditing, setting up, or fixing Chromatic configurations — including TurboSnap-disabling patterns, CI workflows, chromatic.config.json, and monorepo setups. Also activate when reviewing PRs that touch Storybook or Chromatic-related files.

React performance optimization guidelines for Single Page Applications (SPA) at Workleap. Use when writing, reviewing, or refactoring React SPA code. Covers async waterfall elimination, bundle size reduction, re-render optimization, rendering efficiency, JS micro-optimizations, and advanced patterns. Activate even for small component changes — performance regressions compound silently. Does not cover SSR, Next.js, or server components.

Optimize agent skills to reduce context bloat while preserving answer coverage. Use when a skill's body exceeds ~250 lines, duplicates its references, has a verbose description, or triggers false positives. Also activate proactively when reviewing any skill with both a body and reference files.

Evaluate third-party agent skills for security risks before adoption or update. Use when installing, updating, or auditing skills from any source (skills.sh, ClawHub, public registries, PRs). Also activate when building allowlists, investigating suspicious behavior, or answering "is this skill safe?"

Rsbuild best practices for config, CLI workflow, type checking, bundle optimization, assets, and debugging. Use when writing, reviewing, or troubleshooting Rsbuild projects.

Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.

Squide (@squide/firefly) — Workleap's React modular application shell. Use when: (1) Working with FireflyRuntime, initializeFirefly, AppRouter, or FireflyProvider (2) Creating or modifying Squide host applications or modules (3) Registering routes, navigation items, or MSW request handlers (4) Squide integrations with TanStack Query, i18next, LaunchDarkly, Honeycomb, MSW, or Storybook (5) Deferred registrations or conditional navigation items (6) Global data fetching: usePublicDataQueries, useProtectedDataQueries (7) Squide hooks for event bus, environment variables, feature flags, logging, or bootstrapping state (8) Error boundaries or modular architecture in Squide applications

Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.

Guide for @workleap/logging, a structured logging library for Workleap frontend TypeScript applications. Use this skill when: (1) Setting up or configuring @workleap/logging loggers (BrowserConsoleLogger, CompositeLogger) (2) Using @workleap/logging API: log levels, chained segments, scopes, styled output (3) Composing or filtering @workleap/logging loggers for multi-destination logging (4) Integrating @workleap/logging with LogRocket via CompositeLogger (5) Reviewing PRs or troubleshooting @workleap/logging usage

React performance optimization guidelines for Single Page Applications (SPA) at Workleap. Use when writing, reviewing, or refactoring React SPA code to ensure optimal performance patterns. Triggers on tasks involving React components, state management, bundle optimization, re-render prevention, rendering performance, or JavaScript performance improvements. Covers async waterfall elimination, bundle size reduction, re-render optimization, rendering efficiency, JS micro-optimizations, and advanced React patterns. Does NOT cover server-side rendering (SSR), Next.js, or server components.

Guide for @workleap/telemetry, Workleap's unified telemetry connecting Honeycomb, LogRocket, and Mixpanel with automatic correlation IDs. Use this skill when: (1) Initializing wl-telemetry in a frontend application (2) Correlation values (Telemetry Id, Device Id) and cross-tool data correlation (3) Honeycomb tracing, OpenTelemetry spans, and performance monitoring (4) LogRocket session replay, user identification, and privacy controls (5) Mixpanel analytics, event tracking, and cross-product tracking (6) Configuring wl-telemetry diagnostic loggers (LogRocketLogger) (7) Storybook/test setup with Noop telemetry clients (8) Reviewing or troubleshooting telemetry instrumentation

Workleap's shared web configuration packages (@workleap/eslint-configs, typescript-configs, rsbuild-configs, rslib-configs, stylelint-configs, browserslist-config). Use when: (1) Setting up or customizing shared web tooling configs in a Workleap project (2) Configuring ESLint by project type (web app, React library, TS library, monorepo) (3) Configuring TypeScript by project type (web-application, library, monorepo-workspace) (4) Configuring Rsbuild or Rslib bundling (dev, build, Storybook) (5) Configuring Stylelint, Browserslist, or monorepo (Turborepo) vs polyrepo strategies (6) Extending or customizing shared configs, troubleshooting ESM/ESNext constraints

Update this monorepo's npm dependencies to their latest versions and validate the update locally before it goes to a PR. Use when the user asks to: (1) "update the dependencies", "bump deps", "update outdated deps", or run `update-outdated-deps` (2) validate a dependency update locally (build, lint, run the sample apps in a browser) (3) reproduce/debug the weekly "Update dependencies" workflow on their machine This is the LOCAL, interactive counterpart to the CI automation in `.github/prompts/update-dependencies.md`. It does NOT open a PR — it updates, rebuilds from a clean slate, lints, and verifies all three sample apps in a real browser using the developer's `.env.local` credentials.

Guide for @workleap/telemetry — Workleap's unified telemetry package connecting Honeycomb (tracing), LogRocket (session replay), and Mixpanel (analytics) with automatic correlation IDs. Use when initializing @workleap/telemetry, instrumenting Honeycomb traces/spans, configuring LogRocket replay or privacy, tracking Mixpanel events, setting up Noop clients for Storybook/tests, or troubleshooting telemetry correlation. Also activate when someone mentions observability, session replay, or analytics in a Workleap frontend context.

Workleap's shared web configuration packages (@workleap/eslint-configs, @workleap/typescript-configs, @workleap/rsbuild-configs, @workleap/rslib-configs, @workleap/stylelint-configs, @workleap/browserslist-config). Use when: (1) Setting up or customizing shared web tooling configs in a Workleap project (2) Configuring ESLint by project type (web app, React library, TS library, monorepo) (3) Configuring TypeScript by project type (web-application, library, monorepo-workspace) (4) Configuring Rsbuild or Rslib bundling (dev, build, Storybook) (5) Configuring Stylelint, Browserslist, or monorepo (Turborepo) vs polyrepo strategies (6) Extending or customizing shared configs, troubleshooting ESM/ESNext constraints

Guide for Workleap's logging library (@workleap/logging) that provides structured, composable logging for frontend TypeScript applications. Use this skill when: (1) Setting up logging in a Workleap frontend application (2) Creating or configuring loggers (BrowserConsoleLogger, CompositeLogger) (3) Understanding log levels (debug, information, warning, error, critical) (4) Building complex log entries with chained segments (withText, withObject, withError) (5) Using logging scopes to group related log entries (6) Styling log output in browser console (7) Composing multiple loggers to send logs to different destinations (8) Filtering logs by severity level (9) Integrating logging with LogRocket or other telemetry tools (10) Reviewing logging-related changes in pull requests (11) Questions about logging best practices specific to wl-logging

Guide for Workleap's telemetry solution (@workleap/telemetry) that unifies Honeycomb, LogRocket, and Mixpanel with consistent correlation IDs. Use this skill when: (1) Initializing wl-telemetry in a frontend application (2) Working with correlation values (Telemetry Id, Device Id) and their lifecycle (3) Using Honeycomb for distributed tracing and performance analysis (4) Creating and enriching Honeycomb traces/spans using OpenTelemetry (5) Using LogRocket for session replay and frontend debugging (6) Using Mixpanel for product analytics and event tracking (7) Understanding Honeycomb, LogRocket, and Mixpanel roles in wl-telemetry (8) Correlating data across Honeycomb, LogRocket, and Mixpanel (9) Configuring loggers for wl-telemetry diagnostics (10) Using Noop telemetry clients to disable/mock telemetry (11) Reviewing PRs that add or modify telemetry instrumentation (12) Troubleshooting missing or inconsistent telemetry across tools

Guide for Workleap's telemetry solution (@workleap/telemetry) that unifies Honeycomb, LogRocket, and Mixpanel with consistent correlation IDs. Use this skill when: (1) Initializing wl-telemetry in a frontend application (2) Working with correlation values (Telemetry Id, Device Id) and their lifecycle (3) Using Honeycomb for distributed tracing and performance analysis (4) Creating and enriching Honeycomb traces/spans using OpenTelemetry (5) Using LogRocket for session replay and frontend debugging (6) Exposing telemetry identifiers to LogRocket for cross-tool debugging (7) Using Mixpanel for product analytics and event tracking (8) Attaching telemetry/device IDs to Mixpanel events (9) Understanding Honeycomb, LogRocket, and Mixpanel roles in wl-telemetry (10) Correlating data across Honeycomb, LogRocket, and Mixpanel (11) Configuring loggers for wl-telemetry diagnostics (12) Using wl-telemetry safely in Storybook or non-production environments (13) Using Noop telemetry clients to disable/mock telemetry (14)

Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.

Squide is a React modular application shell for Workleap web applications. Use this skill when: (1) Creating or modifying Squide host applications or modules (2) Registering routes, navigation items, or MSW request handlers (3) Working with FireflyRuntime, initializeFirefly, or AppRouter (4) Setting up integrations: TanStack Query, i18next, LaunchDarkly, Honeycomb, MSW, Storybook (5) Implementing deferred registrations or conditional navigation items (6) Fetching global public/protected data with usePublicDataQueries/useProtectedDataQueries (7) Using Squide hooks: useNavigationItems, useRenderedNavigationItems, useIsBootstrapping, useLogger, useEventBusListener, useEventBusDispatcher, useEnvironmentVariable, useFeatureFlag (8) Implementing error boundaries in modular applications (9) Questions about modular architecture patterns in React applications

Guide for Workleap's shared web configuration packages: @workleap/eslint-configs, @workleap/typescript-configs, @workleap/rsbuild-configs, @workleap/rslib-configs, @workleap/stylelint-configs, and @workleap/browserslist-config. Use this skill when: (1) Setting up or modifying shared web tooling configs in a Workleap project (2) ESLint config with @workleap/eslint-configs (defineWebApplicationConfig, defineReactLibraryConfig, defineTypeScriptLibraryConfig, defineMonorepoWorkspaceConfig) (3) TypeScript config with @workleap/typescript-configs (web-application, library, monorepo-workspace) (4) Rsbuild config with @workleap/rsbuild-configs (defineDevConfig, defineBuildConfig, defineStorybookConfig) (5) Rslib config with @workleap/rslib-configs for libraries (6) Stylelint and Browserslist shared configs (7) Extending configs or monorepo (Turborepo) vs polyrepo strategies (8) Troubleshooting wl-web-configs, ESM/ESNext constraints, or Storybook with Rsbuild/Rslib

Reflect on a developer correction and update skills or CLAUDE.md so the same mistake isn't made twice. Trigger whenever the user says you made a mistake, that code needs reworking, that an approach was wrong, or pushes back on a pattern you used. Before continuing the fix, decide whether existing guidance should be updated or a new skill is needed.

Add, update, delete, or deprecate design tokens (core, semantic, or component) in the Workleap Hopper design system (wl-hopper repo). Use whenever the user wants to introduce, modify, rename, change a reference of, remove, or phase out a design token — colors, spacing, shape/border-radius, typography/fonts, elevation, motions, or any per-component token like Button, Tag, Badge, etc. Trigger whenever the user mentions tokens, design tokens, semantic tokens, component tokens, asks to add/change a CSS variable like `--hop-*`, asks to tweak a value in any `*.tokens.json` file, or shares a Figma variables / token-table screenshot. Also trigger when the user says things like "make the danger color stronger", "add a new spacing value", "the ShareGate Button font is wrong", "introduce a rounded-xm token", "deprecate this color", "delete the old palette tokens", or "here's the token table from Figma" — these are all token operations even when the user doesn't say the word "token".

Guide for @workleap/logging, a structured logging library for Workleap frontend TypeScript applications. Use this skill when: (1) Setting up or configuring @workleap/logging loggers (BrowserConsoleLogger, CompositeLogger) (2) Using @workleap/logging API: log levels, chained segments, scopes, styled output (3) Composing or filtering loggers for multi-destination logging (LogRocket, telemetry) (4) Working with Squide's useLogger hook alongside @workleap/logging (5) Reviewing PRs or troubleshooting logging code in Workleap TypeScript projects This skill also applies when the user discusses frontend logging, console logging, or structured logging in a Workleap context without naming the package directly.