Use with agents

Information about Web Configs libraries can be shared with different agents using agent skills.

Install agent skills

Two best practices skills are available through skills.sh:

Name	Description
workleap-chromatic-best-practices	An agent skill that guides developers on applying Workleap's documented Chromatic best practices.
workleap-react-best-practices	An agent skill that guides developers in applying Workleap’s documented React best practices. It is inspired by vercel-react-best-practices, but adapted for a SPA that does not rely on the Vercel ecosystem.

Open a terminal and install the agent skills by running the following commands:

pnpx skills add https://github.com/workleap/wl-web-configs --skill workleap-chromatic-best-practices

pnpx skills add https://github.com/workleap/wl-web-configs --skill workleap-react-best-practices

At installation, the skills.sh CLI will prompt you to choose whether to install the skill globally or within a project. We recommend installing it locally so it is available for code review tools such as Copilot or Claude Code.

Use the skills bundled with the packages

Starting with PNPM 12.11, packages can ship agent skills. Each active Web Configs package bundles a skill covering that package only, versioned and released with the package itself:

Package	Skill	Since
`@workleap/browserslist-config`	`workleap-browserslist-config`	`3.1.0`
`@workleap/rsbuild-configs`	`workleap-rsbuild-configs`	`5.1.0`
`@workleap/rslib-configs`	`workleap-rslib-configs`	`2.1.0`
`@workleap/stylelint-configs`	`workleap-stylelint-configs`	`2.2.0`
`@workleap/typescript-configs`	`workleap-typescript-configs`	`5.1.0`

PNPM never links a package's skills without approval. After installing the packages, PNPM lists the skills awaiting approval. Open a terminal at the root of the project and approve them by running the following command:

pnpm approve

The approvals are saved under the permissions setting of the pnpm-workspace.yaml file. They can also be added manually:

pnpm-workspace.yaml
permissions:
  "@workleap/rsbuild-configs":
    skills: true
  "@workleap/typescript-configs":
    skills: true

On the next install, PNPM links the approved skills into the agent skills folders that already exist at the root of the workspace, such as .claude/skills, .cursor/skills, .agents/skills or .github/skills, under names like pnpm-@workleap+rsbuild-configs-workleap-rsbuild-configs. The links are ignored by Git and are updated whenever the packages are updated. Use the skills.dirs setting to choose the folders explicitly.

If the workleap-web-configs skill was previously installed with skills.sh, remove it once the package skills are linked, as it covers the same configurations:

pnpx skills remove workleap-web-configs

If the skill was installed globally, add the --global option:

pnpx skills remove workleap-web-configs --global

PNPM only links the skills of a project's direct dependencies. When several projects of a workspace depend on different versions of a package, the skill of the highest version is linked.

Try it 🚀

Once the skills are installed, start an agent and ask it to set up a project or audit an existing Chromatic setup:

I've installed @workleap/typescript-configs and @workleap/rsbuild-configs in my React + TypeScript web application. Configure TypeScript and Rsbuild using these shared configs.

Audit the Chromatic setup in my project and propose improvements based on Workleap's Chromatic best practices.

Use with agents

Install agent skills

Use the skills bundled with the packages

Try it 🚀

See also