Agent skill

Rspack Best Practices

Rspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling.

MITAuto-check passedDevelopment

Install Rspack Best Practices

skills CLI

$ npx skills add artusjs/spec --skill rspack-best-practices -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install artusjs/spec rspack-best-practices --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/artusjs/spec.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/rspack-best-practices .claude/skills/rspack-best-practices && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "rspack-best-practices" agent skill from https://github.com/artusjs/spec/tree/master/.agents/skills/rspack-best-practices into .claude/skills/rspack-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rspack-best-practices", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/artusjs/spec/tree/master/.agents/skills/rspack-best-practices

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add artusjs/spec --skill rspack-best-practices -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install artusjs/spec rspack-best-practices --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/artusjs/spec.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/rspack-best-practices .agents/skills/rspack-best-practices && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "rspack-best-practices" agent skill from https://github.com/artusjs/spec/tree/master/.agents/skills/rspack-best-practices into .agents/skills/rspack-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rspack-best-practices", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add artusjs/spec --skill rspack-best-practices -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install artusjs/spec rspack-best-practices --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/artusjs/spec.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/rspack-best-practices .cursor/skills/rspack-best-practices && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "rspack-best-practices" agent skill from https://github.com/artusjs/spec/tree/master/.agents/skills/rspack-best-practices into .cursor/skills/rspack-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rspack-best-practices", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/artusjs/spec.git --path .agents/skills/rspack-best-practices

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add artusjs/spec --skill rspack-best-practices -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install artusjs/spec rspack-best-practices --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/artusjs/spec.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/rspack-best-practices .gemini/skills/rspack-best-practices && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "rspack-best-practices" agent skill from https://github.com/artusjs/spec/tree/master/.agents/skills/rspack-best-practices into .gemini/skills/rspack-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rspack-best-practices", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install artusjs/spec rspack-best-practices

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add artusjs/spec --skill rspack-best-practices -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/artusjs/spec.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/rspack-best-practices .github/skills/rspack-best-practices && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "rspack-best-practices" agent skill from https://github.com/artusjs/spec/tree/master/.agents/skills/rspack-best-practices into .github/skills/rspack-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rspack-best-practices", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add artusjs/spec --skill rspack-best-practices -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install artusjs/spec rspack-best-practices --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/artusjs/spec.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/rspack-best-practices .opencode/skills/rspack-best-practices && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "rspack-best-practices" agent skill from https://github.com/artusjs/spec/tree/master/.agents/skills/rspack-best-practices into .opencode/skills/rspack-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rspack-best-practices", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: rspack-best-practices
GitHub stars: 156
Token cost: ~634 tokens
SKILL.md length: 262 words
Files: 1
Skills in repo: 1
Repo updated: Jul 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Rspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling.

Troubleshooting Rspack projects
SKILL.md covers Configuration, CLI, Type checking and CSS, plus 5 more sections
Calls tsc
Tasks that involve Type safety

What it does

Rspack Best Practices is an agent skill from artusjs/spec. Rspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling. Use when writing, reviewing, or troubleshooting Rspack projects.

Its SKILL.md is about 630 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Type safety. The licence is MIT.

When your agent uses it

Troubleshooting Rspack projects
Tasks that involve Type safety

Example prompts

“/rspack-best-practices”

What it can do on your machine

Read from SKILL.md and the folder at commit adaadb2. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- tsc
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- rspack.rs
- v1.rspack.rs
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Rspack Best Practices loads about 634 tokens when it runs. Until then it costs about 49 tokens; SKILL.md has 262 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~49
When it runs · the whole SKILL.md, loaded when a task matches: ~634

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from artusjs/spec at commit adaadb2, republished under its MIT licence (© artusjs). 262 words, ~634 tokens.

Download SKILL.mdSave it as .claude/skills/rspack-best-practices/SKILL.md (or your agent's skills folder).

name: rspack-best-practices
description: Rspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling. Use when writing, reviewing, or troubleshooting Rspack projects.

Rspack Best Practices

Apply these rules when writing or reviewing Rspack projects.

Configuration

Use rspack.config.ts and defineConfig
Define explicit entry values for multi-page applications
Keep one main config and branch by process.env.NODE_ENV only when needed
Keep rule conditions narrow and explicit (test, include, exclude, resourceQuery)
Prefer built-in Rspack plugins/loaders over community JS alternatives when equivalent features exist

CLI

If @rspack/cli is installed:

Use rspack dev for local development
Use rspack build for production build
Use rspack preview only for local production preview

Type checking

Use ts-checker-rspack-plugin for integrated dev/build type checks
Or run tsc --noEmit/vue-tsc --noEmit as an explicit script step

CSS

Choose one strategy:

Built-in CSS (type: 'css' | 'css/auto' | 'css/module') for modern setups
css-loader + CssExtractRspackPlugin for webpack migration compatibility
style-loader for pure style-in-JS runtime injection scenarios

Optional:

Use builtin:lightningcss-loader when goals are syntax downgrade + vendor prefixing
Use sass-loader/less-loader for preprocessing Sass/Less files
Use @tailwindcss/webpack for Tailwind CSS integration

Bundle size optimization

Prefer dynamic import() for non-critical code paths
Prefer lightweight libraries where possible
Keep target aligned with real compatibility requirements

Asset management

Import source-managed assets from project source directories, not from public
Reference public files by absolute URL path
Prefer asset modules (asset, asset/resource, asset/inline, asset/source) over legacy file-loader/url-loader/raw-loader

Profiling

Use Node CPU profiling (--cpu-prof) when JavaScript-side overhead is suspected
Use RSPACK_PROFILE=OVERVIEW and analyze trace output for compiler-phase bottlenecks
Replace known slow stacks first (babel-loader, PostCSS, terser) with Rspack built-ins when feasible

Security

Do not publish .map files to public servers/CDNs when production source maps are enabled

Documentation

For the latest (v2) docs, read http://rspack.rs/llms.txt
For Rspack v1 docs, read http://v1.rspack.rs/llms.txt

Files

Just SKILL.md in .agents/skills/rspack-best-practices of artusjs/spec.

Open the folder on GitHubat commit adaadb2

Compare with similar skills

Rspack Best Practices next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Rspack Best Practices compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Rspack Best Practices this skillartusjs/spec	156	—	~634	Automated safety check: Pass	MIT	3 mo ago
Types Enforce TStimmo001/system-bridge	357	—	~689	Automated safety check: Pass	Apache-2.0	today
Wagmi Feature Developmentwevm/wagmi	6.8k	—	~3.8k	Automated safety check: Pass	MIT	8 days ago
OpenObserve ESLint and TypeScript Fixesopenobserve/openobserve	22k	—	~5.1k	Automated safety check: Pass	AGPL-3.0	today
Zodjasonjgardner/blockbench-mcp-plugin	500	3 repos	~1.4k	Automated safety check: Pass	GPL-3.0	8 days ago
Valgocohesivestack/valgo	508	—	~2.4k	Automated safety check: Pass	MIT	1 mo ago

Similar skills

Types Enforce TS
timmo001/system-bridge
TypeScript type-safety guidance. An agent skill from timmo001/system-bridge.
357 GitHub stars~689 tokensUpdated today
DevelopmentAuto-check passed
Wagmi Feature Development
wevm/wagmi
Walks through adding a Wagmi feature across its layers: a Viem-based core action, TanStack Query options, and React and Vue bindings.
6.8k GitHub stars~3.8k tokensUpdated 8 days ago
DevelopmentAuto-check passed
OpenObserve ESLint and TypeScript Fixes
openobserve/openobserve
A playbook for fixing ESLint and TypeScript errors in the OpenObserve web frontend, with rule-by-rule guidance and typing conventions.
22k GitHub stars~5.1k tokensUpdated today
DevelopmentAuto-check passed
Zod
jasonjgardner/blockbench-mcp-plugin
Zod schema validation best practices for type safety, parsing, and error handling.
500 GitHub starsUsed in 3 repos~1.4k tokens
DevelopmentAuto-check passed
Valgo
cohesivestack/valgo
Add, refactor, debug, review, explain, or migrate type-safe validation in consumer Go applications using github.com/cohesivestack/valgo.
508 GitHub stars~2.4k tokensUpdated 1 mo ago
DevelopmentAuto-check passed
Implement Widget Frontend
cryptomilk/hass-eink-dashboard
Add TypeScript types in ha.d.ts and editor schema in eink-dashboard-editor.ts for a new or updated widget type; also handles deprecating an old type (remove from picker, keep schema, add @deprecated…
116 GitHub stars~3.3k tokensUpdated 3 days ago
DevelopmentAuto-check passed

Questions about Rspack Best Practices

What does Rspack Best Practices do?

Rspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling. Rspack Best Practices is an agent skill from artusjs/spec. Rspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling.

When should I use Rspack Best Practices?

Rspack Best Practices fits situations like: troubleshooting Rspack projects; tasks that involve Type safety.

How do I install Rspack Best Practices in Claude Code?

Run `npx skills add artusjs/spec --skill rspack-best-practices -a claude-code`. Or copy the skill folder (.agents/skills/rspack-best-practices in artusjs/spec) into .claude/skills/rspack-best-practices in your project. Claude Code loads it when a task matches its description.

How do I install Rspack Best Practices in Codex?

Run `npx skills add artusjs/spec --skill rspack-best-practices -a codex`. Or copy the skill folder (.agents/skills/rspack-best-practices in artusjs/spec) into .agents/skills/rspack-best-practices in your project. Codex loads it when a task matches its description.

Can I use Rspack Best Practices in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add artusjs/spec --skill rspack-best-practices -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/rspack-best-practices, .gemini/skills/rspack-best-practices, .github/skills/rspack-best-practices and .opencode/skills/rspack-best-practices in your project.

What does Rspack Best Practices need to run?

Going by SKILL.md and its folder, Rspack Best Practices needs the command-line tools its instructions call (tsc).

Does Rspack Best Practices access the network?

SKILL.md names 2 domains. As links in the text: rspack.rs and v1.rspack.rs. This is read from the text; nothing was executed.

Is Rspack Best Practices safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Rspack Best Practices use?

Rspack Best Practices is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Rspack Best Practices use?

About 634 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Rspack Best Practices?

Skills that share tags, products or a category with Rspack Best Practices: Types Enforce TS (timmo001/system-bridge, 357 stars), Wagmi Feature Development (wevm/wagmi, 6.8k stars), OpenObserve ESLint and TypeScript Fixes (openobserve/openobserve, 22k stars) and Zod (jasonjgardner/blockbench-mcp-plugin, 500 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Rspack Best Practices?

artusjs (a GitHub organization) maintains it in artusjs/spec, which has 156 GitHub stars. The repository was last updated on July 7, 2026.

Source: artusjs/spec on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Rspack Best Practices

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Rspack Best Practices

Configuration

CLI

Type checking

CSS

Bundle size optimization

Asset management

Profiling

Security

Documentation

Files

Compare with similar skills

Similar skills

Types Enforce TS

Wagmi Feature Development

OpenObserve ESLint and TypeScript Fixes

Zod

Valgo

Implement Widget Frontend

Related

Questions about Rspack Best Practices