biome-js
paulrberg/agent-skills
Configure and extend BiomeJS linting and formatting with shared configs and monorepo patterns.
What is biome-js?
BiomeJS Skill provides guidance for setting up Biome configuration files, extending shared configs via npm packages, and managing linting/formatting rules across projects and monorepos. Use it when configuring biome.jsonc, setting up linting overrides, integrating with lint-staged, or troubleshooting Biome errors.
- Extend shared Biome configs from npm packages with proper file includes patterns
- Configure monorepo workspace inheritance using root config references
- Set up common overrides for test files, generated code, and import restrictions
- Integrate Biome with git hooks via lint-staged for pre-commit checks
- Provide UI-specific configuration for Tailwind CSS and CSS Modules projects
- Reference key linting rules with rationale and default severity levels
How to install biome-js
npx skills add https://github.com/paulrberg/agent-skills --skill biome-js- Biome installed in your project (npm/bun/yarn)
- biome.jsonc configuration file in your project root or package directory
- For shared configs: npm package exporting Biome configuration presets
How to use biome-js
- 1.Create or edit biome.jsonc with $schema pointing to node_modules/@biomejs/biome/configuration_schema.json
- 2.Add extends array referencing shared configs (e.g., @sablier/devkit/biome) or root config (//)
- 3.Explicitly define files.includes pattern matching your project type (library, UI, with GraphQL, etc.)
- 4.Add overrides section for test files, generated code, or import restrictions as needed
- 5.For monorepos, repeat steps 1-3 in each workspace package's biome.jsonc
- 6.Configure .lintstagedrc.js to run biome check --write on staged files before commit
Use cases
- Extending a base Biome config in a library or UI project to inherit linting standards
- Adding package-specific overrides in a monorepo workspace while inheriting root configuration
- Relaxing strict linting rules for test files to allow non-null assertions and explicit any types
- Disabling formatting expansion for generated or ABI files to preserve compact output
- Enforcing barrel imports for specific modules using noRestrictedImports rules
- TypeScript/JavaScript developers configuring project linting standards
- Monorepo maintainers setting up consistent Biome configs across packages
- Frontend teams using Tailwind CSS needing class sorting and CSS parsing
- DevOps/tooling engineers integrating Biome into CI/CD and git hook workflows
biome-js FAQ
Use extends to inherit a base configuration from an npm package or root config. Use overrides to apply different rules to specific file patterns within the same project (e.g., relaxed rules for tests).
biome check is for local development and supports --write to auto-fix issues. biome ci is for CI pipelines and exits with error if issues are found; both support --only and --skip in v2.4+.
Yes. Even when extending a shared config, the consuming project must always provide its own files.includes pattern to match its file structure.
Extend both configs in order (base first, then ui), and use overrides to apply package-specific rules. Later overrides take precedence.
Use Biome for JS/TS/JSON/CSS. Use Prettier for Markdown, YAML, and other formats Biome doesn't support.
Full instructions (SKILL.md)
Source of truth, from paulrberg/agent-skills.
disable-model-invocation: false name: biome-js user-invocable: false description: This skill should be used when the user asks to "configure Biome", "extend biome config", "set up BiomeJS", "add biome overrides", "biome lint-staged", "fix biome errors", or mentions biome.jsonc, Biome linting, or Biome formatting configuration.
BiomeJS Skill
Quick guidance for BiomeJS configuration based on Sablier project patterns.
Core Concepts
Extending Shared Configs
Extend shared configs via npm package exports. The consuming project must always provide its own files.includes:
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"extends": ["@sablier/devkit/biome"],
"files": {
"includes": ["**/*.{js,json,jsonc,ts}", "!node_modules/**/*"]
}
}
For UI projects, extend both base and ui configs:
{
"extends": ["@sablier/devkit/biome/base", "@sablier/devkit/biome/ui"],
"files": {
"includes": ["**/*.{css,js,jsx,json,jsonc,ts,tsx}"]
}
}
Monorepo Inheritance
In monorepos, workspace configs inherit from root using "//":
// packages/my-package/biome.jsonc
{
"extends": ["//"],
"overrides": [
// package-specific overrides
]
}
File Includes Pattern
Always specify files.includes explicitly. Common patterns:
| Project Type | Pattern |
|---|---|
| Library | **/*.{js,json,jsonc,ts} |
| UI/Frontend | **/*.{css,js,jsx,json,jsonc,ts,tsx} |
| With GraphQL | **/*.{css,graphql,js,jsx,json,jsonc,ts,tsx} |
Exclusions: !node_modules/**/*, !**/generated, !dist
Common Overrides
Test Files
Relax strict rules in test files:
{
"overrides": [
{
"includes": ["**/tests/**/*.ts", "**/*.test.ts"],
"linter": {
"rules": {
"style": {
"noNonNullAssertion": "off"
},
"suspicious": {
"noExplicitAny": "off"
}
}
}
}
]
}
Generated/ABI Files
Disable sorting and compact formatting for generated code:
{
"overrides": [
{
"includes": ["**/abi/**/*.ts", "**/generated/**/*.ts"],
"assist": {
"actions": {
"source": {
"useSortedKeys": "off"
}
}
},
"javascript": {
"formatter": {
"expand": "never"
}
}
}
]
}
Import Restrictions
Enforce barrel imports for specific modules:
{
"overrides": [
{
"includes": ["src/**/*.{ts,tsx}"],
"linter": {
"rules": {
"correctness": {
"noRestrictedImports": {
"level": "error",
"options": {
"paths": {
"@/core": "Import from @/core (barrel) instead of subpaths"
}
}
}
}
}
}
}
]
}
Key Rules Reference
| Rule | Default | Rationale |
|---|---|---|
noFloatingPromises | error | Floating promises cause bugs |
noUnusedImports | off | Allow during dev, enforce in pre-commit |
noUnusedVariables | error | Keep code clean |
useImportType | warn (separatedType) | Explicit type imports |
useSortedKeys | on | Consistent object ordering |
useSortedClasses | warn (UI) | Tailwind class sorting |
useFilenamingConvention | kebab/camel/Pascal | Flexible naming |
noVoid | off | Useful for useEffect callbacks |
useTemplate | off | Allow string concatenation |
Git Hooks Integration
Lint-Staged Configuration
Standard pattern for pre-commit hooks:
// .lintstagedrc.js
module.exports = {
"*.{json,jsonc,ts,tsx}": "bun biome check --write",
"*.{md,yml,yaml}": "bun prettier --cache --write",
"*.{ts,tsx}": "bun biome check --write --only=correctness/noUnusedImports",
};
The separate noUnusedImports pass enforces import cleanup only at commit time, not during development.
UI-Specific Configuration
For frontend projects with Tailwind CSS:
{
"css": {
"parser": {
"tailwindDirectives": true
}
},
"assist": {
"actions": {
"source": {
"useSortedAttributes": "on"
}
}
},
"linter": {
"rules": {
"nursery": {
"useSortedClasses": {
"fix": "safe",
"level": "warn",
"options": {
"attributes": ["classList"],
"functions": ["clsx", "cva", "cn", "tv", "tw"]
}
}
}
}
}
}
Biome v2.4.0+ auto-enables CSS Modules parsing for *.module.css, so explicit
"cssModules": true is usually unnecessary unless your project needs non-standard behavior.
Biome v2.4+ Notes
biome checkandbiome cinow support--onlyand--skipfor targeted rule/action runs.biome check --writenow also applies formatting when applying fixes.- Config lookup now also supports hidden files:
.biome.jsonand.biome.jsonc. - Config lookup now also supports user config directories (for example,
$HOME/.config/biomeon Linux/macOS equivalents). - New formatter option
formatter.trailingNewlinecan disable trailing newline insertion. - HTML formatter behavior changed significantly in
v2.4.0; expect larger diffs in HTML/Vue/Svelte/Astro if formatter support is enabled.
Troubleshooting
Common Issues
"No files matched": Check files.includes patterns match your file structure.
Conflicting rules: Overrides are applied in order; later overrides take precedence.
Schema errors: Use local schema reference for IDE support:
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json"
Biome vs Prettier
Biome handles JS/TS/JSON/CSS formatting. Use Prettier for:
- Markdown (
.md,.mdx) - YAML (
.yml,.yaml)
Additional Resources
Examples
Working examples in ./examples/:
./examples/base-config.jsonc- Minimal library configuration./examples/ui-config.jsonc- Frontend project with Tailwind./examples/lint-staged.js- Pre-commit hook configuration
Full Documentation
For advanced features, migrations, or complete rule reference, consult the official Biome documentation via Context7 MCP:
Use context7 to fetch Biome documentation for [specific topic]
The official docs at biomejs.dev should be consulted as a last resort for features not covered here.
Related skills
More from paulrberg/agent-skills and the wider catalog.

bump-deps
Batch npm/pnpm/yarn/bun dependency updates with structured planning and validation.

bump-release
Cut releases with version bumps, changelogs, commits, and tags for single packages or monorepos.

cli-gh
GitHub CLI automation for repository reads, workflows, search, codespaces, and releases.

code-polish
Polish and review changed code with risk-profiled simplification and defect detection.

code-review
Find high-impact defects in code reviews, PRs, and diffs with evidence-based severity ranking.

code-simplify
Simplify and refactor code while preserving behavior, clarity, and maintainability.