PluginBench
Skill
Review
Audit score 70

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
Prerequisites
  • 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
Claude Code
Cursor
Windsurf
Cline

How to use biome-js

  1. 1.Create or edit biome.jsonc with $schema pointing to node_modules/@biomejs/biome/configuration_schema.json
  2. 2.Add extends array referencing shared configs (e.g., @sablier/devkit/biome) or root config (//)
  3. 3.Explicitly define files.includes pattern matching your project type (library, UI, with GraphQL, etc.)
  4. 4.Add overrides section for test files, generated code, or import restrictions as needed
  5. 5.For monorepos, repeat steps 1-3 in each workspace package's biome.jsonc
  6. 6.Configure .lintstagedrc.js to run biome check --write on staged files before commit

Use cases

Good for
  • 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
Who it's for
  • 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

When should I use extends vs overrides?

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).

What's the difference between biome check and biome ci?

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+.

Do I need to specify files.includes if I extend a config?

Yes. Even when extending a shared config, the consuming project must always provide its own files.includes pattern to match its file structure.

How do I handle conflicting rules between base and UI configs?

Extend both configs in order (base first, then ui), and use overrides to apply package-specific rules. Later overrides take precedence.

Should I use Biome or Prettier for formatting?

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 TypePattern
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

RuleDefaultRationale
noFloatingPromiseserrorFloating promises cause bugs
noUnusedImportsoffAllow during dev, enforce in pre-commit
noUnusedVariableserrorKeep code clean
useImportTypewarn (separatedType)Explicit type imports
useSortedKeysonConsistent object ordering
useSortedClasseswarn (UI)Tailwind class sorting
useFilenamingConventionkebab/camel/PascalFlexible naming
noVoidoffUseful for useEffect callbacks
useTemplateoffAllow 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 check and biome ci now support --only and --skip for targeted rule/action runs.
  • biome check --write now also applies formatting when applying fixes.
  • Config lookup now also supports hidden files: .biome.json and .biome.jsonc.
  • Config lookup now also supports user config directories (for example, $HOME/.config/biome on Linux/macOS equivalents).
  • New formatter option formatter.trailingNewline can 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.