Skip to main content
skill CX Codex

rslib-best-practices — Claude Code skill: what it does & setup

Provides guidelines for building JavaScript and TypeScript libraries with Rslib. Useful when configuring outputs, declaration files, and dependency bundling.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add rstackjs/agent-skills --skill rslib-best-practices -a claude-code
Open on GitHub

What rslib-best-practices does

The skill provides guidelines for configuring Rslib projects built on Rspack. It guides the model to use rslib.config.ts with defineConfig and prioritize Rslib-specific options under lib.*. Component libraries prefer bundleless output with output.target set to 'web'. Utility packages for Node.js use bundled mode. It also enforces pure ESM with "type": "module" in package.json alongside strict mapping of the exports field to generated JavaScript and type files.

Dependency handling follows clear boundaries. Packages listed in dependencies and peerDependencies are externalized automatically during bundling, so bundled code belongs in devDependencies. Type definitions rely on lib.dts. To speed up type emission with the experimental lib.dts.tsgo flag, you must install @typescript/native-preview beforehand, because the feature will not run without it.

For troubleshooting, the instructions suggest running rslib inspect or setting DEBUG=rsbuild. Resolved configs should always be confirmed inside dist/.rsbuild rather than assumed. The rules also point to Rstest with @rstest/adapter-rslib for testing and Rspress for component documentation.

What it helps with

  • configure library builds inside rslib.config.ts
  • map exports in package.json to actual build outputs and declaration files
  • isolate external dependencies from bundled dependencies
  • accelerate declaration file generation using experimental tsgo
  • inspect resolved Rspack configurations with rslib inspect

Example prompts for the agent

  • Help me configure rslib.config.ts for a component library using bundleless mode.
  • Verify that my package.json exports match the generated ESM files and declarations.
  • Check why external dependencies are getting bundled into my Rslib build.

How to install rslib-best-practices

1Skills CLI (Vercel)

npx skills add rstackjs/agent-skills --skill rslib-best-practices -a claude-code

2Manually: put the files in place

~/.claude/skills/rslib-best-practices/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/rslib-best-practices/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about rslib-best-practices

How do I install rslib-best-practices in Claude Code?

Run npx skills add rstackjs/agent-skills --skill rslib-best-practices -a claude-code. The command registers the skill directly for your Claude Code sessions.

What does the rslib-best-practices skill do?

It instructs the agent on proper Rslib library architecture: choosing bundle vs bundleless modes, managing dependencies, generating d.ts files, and debugging through DEBUG=rsbuild.

What is required to enable fast type generation with tsgo?

You must install the @typescript/native-preview package. The experimental lib.dts.tsgo option relies directly on this preview package.

Source text

SKILL.md · MIT
---
name: rslib-best-practices
description: Configure, review, or troubleshoot Rslib library builds, output formats, declarations, dependency handling, and integrations.
---

# Rslib best practices

Apply these rules when writing or reviewing Rslib library projects.

## Configuration

- Use `rslib.config.ts` and `defineConfig`
- Check Rslib-specific configurations first (e.g., `lib.*`), and also leverage Rsbuild configurations (e.g., `source.*`, `output.*`, `tools.*`) as needed
- For deep-level or advanced configuration needs, use `tools.rspack` or `tools.bundlerChain` to access Rspack's native configurations
- In TypeScript projects, prefer `tsconfig.json` path aliases

## CLI

- Use `rslib` to build
- Use `rslib --watch` to build in watch mode for local development
- Use `rslib inspect` to inspect final Rslib/Rsbuild/Rspack configs

## Output

- Prefer to build pure-ESM package with `"type": "module"` in `package.json`
- Prefer to use bundleless mode with `output.target` set to `'web'` when building component libraries
- Prefer to use bundle mode when building Node.js utility libraries
- Ensure `exports` field in `package.json` is correctly configured and matches the actual JavaScript output and declaration files output of different formats (ESM, CJS, etc.)

## Declaration files

- Prefer to enable declaration file generation with `lib.dts: true` or detailed configurations
- For faster type generation, enable `lib.dts.tsgo` experimental feature with `@typescript/native-preview` installed

## Dependencies

- Prefer to place dependencies to be bundled in `devDependencies` in bundle mode and dependencies in `dependencies` and `peerDependencies` will be automatically externalized (not bundled) by default
- Verify the build output and dependency specifiers in `package.json` carefully to ensure no missing dependency errors occur when consumers install and use this package

## Build optimization

- Keep syntax target in `lib.syntax` aligned with real compatibility requirements to enable better optimizations
- Avoid format-specific APIs in source code for better compatibility with different output formats
- Prefer lightweight dependencies to reduce bundle size

## Toolchain integration

- Prefer to use Rstest with `@rstest/adapter-rslib` for writing tests
- Prefer to use Rspress for writing library documentation, with `@rspress/plugin-preview` and `@rspress/plugin-api-docgen` for component previews and API docs

## Debugging

- Run with `DEBUG=rsbuild` when diagnosing config resolution or plugin behavior
- Read generated files in `dist/.rsbuild` to confirm final Rsbuild/Rspack config, not assumed config

## Documentation

- For the latest Rslib docs, read https://rslib.rs/llms.txt

© rstackjs · MIT · rstackjs/agent-skills

Similar skills

Everything for Frontend and UI →

From the same set10

rsbuild-best-practices Provides rules for configuring, reviewing, and troubleshooting Rsbuild applications. Helps agents inspect builds, handle assets, and profile performance. CX Codex +1 2,700installs rstest-best-practices Rules for setting up and writing Rstest tests: environments, mocks, snapshots, coverage and CI. Useful when a package moves to Rstest or its tests have drifted apart. CX Codex +1 1,400installs rspack-best-practices Ruleset for configuring, troubleshooting, and profiling Rspack builds. Helps coding agents apply native loaders and optimize bundle performance. CX Codex +1 669installs rspress-best-practices A skill that gives the agent rules for Rspress v2 sites: config, navigation, MDX, assets, search and deployment. Useful once the docs exist and the agent edits them. CX Codex +1 538installs rspack-v2-upgrade Walks a Rspack 1.x project through the v2 upgrade: dependencies, config, build checks. Useful when a major bump is too fiddly to do by hand. CX Codex +1 515installs rspress-description-generator A skill that fills in the description frontmatter field on Rspress pages that lack one. Useful when the docs site has grown and meta descriptions are missing in places. CX Codex +1 498installs rsbuild-v2-upgrade Walks a Rsbuild 1.x project through the v2 migration: dependencies, config, breaking options. Useful when a major bump would otherwise eat an evening. CX Codex +1 476installs migrate-to-rstest Migrates Jest, Vitest, or Playwright Test suites to Rstest while keeping test discovery, assertions, mocks, snapshots, and coverage intact. For moving a runner without rewriting scenarios. CX Codex +1 420installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor