Menu
Biome - Fast all-in-one toolchain for web projects (linter + formatter in Rust, 100x faster than ESLint)
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/bobmatnyc/claude-mpm --skill biomeThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| name | biome |
| description | Biome - Fast all-in-one toolchain for web projects (linter + formatter in Rust, 100x faster than ESLint) |
| version | 1.0.0 |
| category | toolchain |
| author | Claude MPM Team |
| license | MIT |
| progressive_disclosure | {"entry_point":{"summary":"Fast all-in-one linter and formatter (Rust-based replacement for ESLint + Prettier)","when_to_use":["When you need fast linting and formatting","When replacing ESLint + Prettier","When working with TypeScript/JavaScript","When you want zero-config setup"],"quick_start":["npm install --save-dev @biomejs/biome","npx @biomejs/biome init","npx @biomejs/biome check --write ."]}} |
| context_limit | 700 |
| tags | ["biome","linting","formatting","code-quality","tooling","typescript","javascript"] |
| requires_tools | [] |
Biome is a fast, all-in-one toolchain for web projects written in Rust. It replaces both ESLint and Prettier with a single tool that's 100x faster and provides zero-config defaults.
Key Features:
Installation:
npm install --save-dev @biomejs/biome
# Create biome.json configuration
npx @biomejs/biome init
# Check your project
npx @biomejs/biome check .
# Fix issues automatically
npx @biomejs/biome check --write .
# Format only
npx @biomejs/biome format --write .
# Lint only
npx @biomejs/biome lint .
{
"scripts": {
"check": "biome check .",
"check:write": "biome check --write .",
"format": "biome format --write .",
"lint": "biome lint .",
"lint:fix": "biome lint --write ."
}
}
{
The check command runs both linting and formatting:
# Check all files
biome check .
# Fix issues automatically
biome check --write .
# Unsafe fixes (may change behavior)
biome check --write --unsafe .
# Apply suggested fixes
biome check --write --unsafe --apply-suggested
# Check specific files
biome check src/**/*.ts
# CI mode (exit with error on issues)
biome ci .
Format code without linting:
# Format all files
biome format --write .
# Check formatting without changing files
biome format .
# Format specific files
biome format --write src/**/*.{ts,tsx,js,jsx}
# Format stdin
echo "const x={a:1}" | biome format --stdin-file-path=file.js
Lint code without formatting:
# Lint all files
biome lint .
# Fix linting issues
biome lint --write .
# Show rule names
biome lint --verbose .
# Apply unsafe fixes
biome lint --write --unsafe .
{
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 80,
"attributePosition": "auto"
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"jsxQuoteStyle": "double",
"quoteProperties": "asNeeded",
"trailingCommas": "all",
"semicolons": "asNeeded",
"arrowParentheses": "always",
"bracketSpacing": true,
"bracketSameLine": false
}
},
"json": {
"formatter": {
"trailingCommas": "none"
}
}
}
{
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"a11y": {
"recommended": true,
"noAutofocus": "error",
"useKeyWithClickEvents": "warn"
},
"complexity": {
"recommended": true,
"noForEach": "off",
"useLiteralKeys": "error"
},
"correctness": {
"recommended": true,
"noUnusedVariables": "error",
"useExhaustiveDependencies": "warn"
},
"performance": {
"recommended": true,
"noAccumulatingSpread": "warn"
},
"security": {
"recommended": true,
"noDangerouslySetInnerHtml": "error"
},
"style": {
"recommended": true,
"noNonNullAssertion": "warn",
"useConst": "error",
"useTemplate": "warn"
},
"suspicious": {
"recommended": true,
"noExplicitAny": "warn",
"noArrayIndexKey": "error"
}
}
}
}
{
"files": {
"ignore": [
"node_modules",
"dist",
"build",
".next",
"coverage",
"*.min.js",
"public/assets/**"
],
"ignoreUnknown": false,
"include": ["src/**/*.ts", "src/**/*.tsx"]
}
}
{
"overrides": [
{
"include": ["**/*.test.ts", "**/*.spec.ts"],
"linter": {
"rules": {
"suspicious": {
"noExplicitAny": "off"
}
}
}
},
{
"include": ["scripts/**/*.js"],
"formatter": {
"lineWidth": 120
}
}
]
}
# Install from VS Code marketplace
code --install-extension biomejs.biome
.vscode/settings.json){
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
}
},
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
}
},
"[typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true
},
"[json]": {
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true
},
"biome.lspBin": "./node_modules/@biomejs/biome/bin/biome"
}
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.defaultFormatter": "biomejs.biome",
"biome.rename": true,
"files.autoSave": "onFocusChange"
}
# Remove ESLint and Prettier
npm uninstall eslint prettier eslint-config-prettier \
eslint-plugin-react eslint-plugin-import \
@typescript-eslint/parser @typescript-eslint/eslint-plugin
# Remove configuration files
rm .eslintrc.js .eslintrc.json .prettierrc .prettierignore
Use Biome's migration tool:
# Migrate from Prettier config
biome migrate prettier --write
# Migrate from ESLint config
biome migrate eslint --write
Prettier → Biome Formatter:
// .prettierrc (old)
{
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100
}
// biome.json (new)
{
"formatter": {
"lineWidth": 100
},
"javascript": {
"formatter": {
"semicolons": "asNeeded",
"quoteStyle": "single",
"trailingCommas": "all"
}
}
}
ESLint → Biome Linter:
// .eslintrc.json (old)
{
"rules": {
"no-unused-vars": "error",
"prefer-const": "warn"
}
}
// biome.json (new)
{
"linter": {
"rules": {
"correctness": {
"noUnusedVariables": "error"
},
"style": {
"useConst": "warn"
}
}
}
}
{
"scripts": {
"lint": "biome lint .",
"lint:fix": "biome lint --write .",
"format": "biome format --write .",
"check": "biome check --write ."
}
}
# Install dependencies
npm install --save-dev husky lint-staged
npx husky init
.husky/pre-commit:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
package.json:
{
"lint-staged": {
"*.{js,ts,jsx,tsx,json}": [
"biome check --write --no-errors-on-unmatched"
]
}
}
lefthook.yml:
pre-commit:
commands:
lint:
glob: "*.{js,ts,jsx,tsx,json}"
run: biome check --write --no-errors-on-unmatched {staged_files}
.git/hooks/pre-commit:
#!/bin/bash
# Get staged files
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(js|ts|jsx|tsx|json)$')
if [ -n "$STAGED_FILES" ]; then
echo "Running Biome on staged files..."
npx @biomejs/biome check --write --no-errors-on-unmatched $STAGED_FILES
# Add formatted files back to staging
git add $STAGED_FILES
fi
name: Biome CI
on:
push:
branches: [main, develop]
pull_request:
branches: [main]
jobs:
biome:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run Biome CI
run: npx @biomejs/biome ci .
- name: Check formatting
run: npx @biomejs/biome format .
- name: Lint
run: npx @biomejs/biome lint .
biome:
image: node:20-alpine
stage: test
script:
- npm ci
- npx @biomejs/biome ci .
cache:
paths:
- node_modules/
only:
- merge_requests
- main
version: 2.1
jobs:
biome:
docker:
- image: cimg/node:20.11
steps:
- checkout
- restore_cache:
keys:
- deps-{{ checksum "package-lock.json" }}
- run: npm ci
- save_cache:
paths:
- node_modules
key: deps-{{ checksum "package-lock.json" }}
- run: npx @biomejs/biome ci .
workflows:
test:
jobs:
- biome
Biome includes built-in import sorting:
# Organize imports
biome check --write --organize-imports-enabled=true .
Configuration:
{
"organizeImports": {
"enabled": true
}
}
Example:
// Before
import { useState } from 'react';
import axios from 'axios';
import { Button } from './components/Button';
import type { User } from './types';
import './styles.css';
// After (sorted)
import type { User } from './types';
import axios from 'axios';
import { useState } from 'react';
import { Button } from './components/Button';
import './styles.css';
Biome has first-class TypeScript support:
{
"linter": {
"rules": {
"suspicious": {
"noExplicitAny": "warn",
"noUnsafeDeclarationMerging": "error"
},
"correctness": {
"noUnusedVariables": "error"
},
"style": {
"useImportType": "error",
"useExportType": "error"
}
}
}
}
Type-aware linting:
// Biome detects unused variables
const unused = 123; // ❌ Error
// Enforces type imports
import { User } from './types'; // ❌ Error
import type { User } from './types'; // ✅ Correct
// Detects unsafe type assertions
const num = "123" as any as number; // ⚠️ Warning
Biome works great in monorepos:
my-monorepo/
├── biome.json (root config)
├── packages/
│ ├── web/
│ │ └── biome.json (extends root)
│ ├── api/
│ │ └── biome.json
│ └── shared/
│ └── biome.json
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"extends": [],
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
{
"extends": ["../../biome.json"],
"formatter": {
"lineWidth": 100
},
"linter": {
"rules": {
"style": {
"noNonNullAssertion": "off"
}
}
}
}
{
"scripts": {
"check": "biome check .",
"check:packages": "biome check packages/*",
"format": "biome format --write .",
"lint": "biome lint packages/*"
}
}
| Tool | Time (10,000 files) |
|---|---|
| ESLint + Prettier | ~60s |
| Biome | ~0.6s |
100x faster on average workloads.
Biome includes intelligent caching:
# First run (no cache)
biome check . # 1.2s
# Second run (with cache)
biome check . # 0.1s
# Clear cache
rm -rf node_modules/.cache/biome
Biome uses all CPU cores by default:
# Limit CPU cores
biome check --max-diagnostics=50 .
# Verbose output
biome check --verbose .
{
"linter": {
"rules": {
"a11y": {
"recommended": true,
"useButtonType": "error",
"useKeyWithClickEvents": "error"
},
"correctness": {
"useExhaustiveDependencies": "warn",
"useHookAtTopLevel": "error"
},
"suspicious": {
"noArrayIndexKey": "error"
}
}
},
"javascript": {
"formatter": {
"jsxQuoteStyle": "double"
}
}
}
{
"files": {
"ignore": [".next", "out", "node_modules"]
},
"overrides": [
{
"include": ["app/**/*.tsx", "pages/**/*.tsx"],
"linter": {
"rules": {
"a11y": {
"recommended": true
}
}
}
}
]
}
{
"linter": {
"rules": {
"security": {
"recommended": true,
"noGlobalEval": "error"
},
"correctness": {
"noUnusedVariables": "error"
}
}
},
"javascript": {
"formatter": {
"semicolons": "always"
}
}
}
biome check instead of separate format/lint commands--write flag for automatic fixesbiome ci) in continuous integration# Check if formatter is enabled
biome rage
# Verify file is not ignored
biome check --verbose src/file.ts
# Check VS Code extension logs
# View → Output → Biome
# Disable Prettier in VS Code settings
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"
}
# Remove Prettier dependencies
npm uninstall prettier
# Check cache location
biome rage
# Clear cache
rm -rf node_modules/.cache/biome
# Reduce max diagnostics
biome check --max-diagnostics=20 .
// Ensure correct category
{
"linter": {
"rules": {
"correctness": { // Category name matters
"noUnusedVariables": "error"
}
}
}
}
Patterns from active projects:
ai-code-review/biome.json: files.includes targets src/**/*.ts and excludes tests, lineWidth: 100, single quotes, semicolons always, and noExplicitAny: warn.itinerizer-ts/biome.json: files.ignore includes node_modules, dist, .claude, and data directories; organizeImports.enabled = true.matsuoka-com and diogenes use similar formatting defaults (2-space indent, lineWidth 100).Common scripts:
{
"lint": "biome check src/ --diagnostic-level=error",
"lint:fix": "biome check src/ --write",
"format": "biome format src/ --write"
}