AgentSkillsCN

workleap-web-configs

Workleap 共享 Web 配置包的使用指南:@workleap/eslint-configs、@workleap/typescript-configs、@workleap/rsbuild-configs、@workleap/rslib-configs、@workleap/stylelint-configs,以及 @workleap/browserslist-config。 适用场景如下: (1) 在 Workleap 项目中配置或修改共享的 Web 工具配置; (2) 使用 @workleap/eslint-configs 配置 ESLint(defineWebApplicationConfig、defineReactLibraryConfig、defineTypeScriptLibraryConfig、defineMonorepoWorkspaceConfig); (3) 使用 @workleap/typescript-configs 配置 TypeScript(web-application、library、monorepo-workspace); (4) 使用 @workleap/rsbuild-configs 配置 Rsbuild(defineDevConfig、defineBuildConfig、defineStorybookConfig); (5) 使用 @workleap/rslib-configs 为库项目配置 Rslib; (6) 配置 Stylelint 与 Browserslist 共享配置; (7) 探索配置扩展,或在单体仓库(Turborepo)与多体仓库(Polyrepo)之间权衡利弊; (8) 排查 wl-web-configs、ESM/ESNext 限制,或在 Rsbuild/Rslib 上运行 Storybook 的常见问题。

SKILL.md
--- frontmatter
name: workleap-web-configs
description: |
  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

wl-web-configs

Workleap's shared configuration library for web tooling. Provides pre-configured packages for ESLint, TypeScript, Rsbuild, Rslib, Stylelint, and Browserslist.

Philosophy

  • No lock-in: Default configurations can always be extended or overridden
  • By project type: Configurations are composed internally and offered per project type for simplicity
  • ESM/ESNext by default: Targets modern JavaScript environments
  • Distributed via NPM: Easy to adopt new features by bumping package versions

Supported Tools (Active)

ToolPackagePurpose
Browserslist@workleap/browserslist-configBrowser targets for apps
ESLint@workleap/eslint-configsCode linting
Stylelint@workleap/stylelint-configsCSS linting
TypeScript@workleap/typescript-configsType checking (linting only)
Rsbuild@workleap/rsbuild-configsWeb application bundling
Rslib@workleap/rslib-configsLibrary bundling

In maintenance mode (do not recommend): PostCSS, SWC, webpack, tsup

Quick Reference

Which Configuration to Use?

Project TypeESLintTypeScriptBundler
Web app with ReactdefineWebApplicationConfigweb-application.json@workleap/rsbuild-configs
React librarydefineReactLibraryConfiglibrary.json@workleap/rslib-configs
TypeScript library (no React)defineTypeScriptLibraryConfiglibrary.json@workleap/rslib-configs
Monorepo workspace rootdefineMonorepoWorkspaceConfigmonorepo-workspace.jsonN/A

Browserslist (Apps Only)

bash
pnpm add -D @workleap/browserslist-config browserslist
text
# .browserslistrc
extends @workleap/browserslist-config

Only for projects emitting application bundles. Libraries should NOT include Browserslist.

To add custom browser targets while still using the shared config:

text
# .browserslistrc
extends @workleap/browserslist-config
IE 11
last 2 OperaMobile 12.1 versions

Detailed Documentation

For comprehensive setup guides and options, read the appropriate reference file:

Common Patterns

Customizing Default Rules

All define* functions accept a second argument for customization:

ts
// ESLint example
export default defineWebApplicationConfig(import.meta.dirname, {
    core: { "no-var": "off" },
    typescript: { "@stylistic/quote-props": "off" }
});
json
// TypeScript example - tsconfig.json
{
    "extends": ["@workleap/typescript-configs/web-application.json"],
    "compilerOptions": { "strict": false },
    "exclude": ["dist", "node_modules"]
}

Configuration Transformers (Advanced)

For full control over Rsbuild/Rslib configs:

ts
import { defineDevConfig, type RsbuildConfigTransformer } from "@workleap/rsbuild-configs";

const customTransformer: RsbuildConfigTransformer = (config) => {
    config.tools = config.tools ?? {};
    // modify config
    return config;
};

export default defineDevConfig({
    transformers: [customTransformer]
});

Critical Rules

  1. Never invent APIs: Only suggest documented options and patterns
  2. Respect maintenance mode: Do not recommend PostCSS, SWC, webpack, or tsup configs
  3. ESM by default: All configs target ESM/ESNext unless migrating legacy code
  4. Browserslist for apps only: Libraries should not include Browserslist config
  5. TypeScript for linting: The shared TypeScript configs focus on linting; bundlers handle transpilation