Claude Skills
CollectionsCompareWorkflowsNominate
Sign inSign up
© 2026 Curated Agent Skills·Learn more about Agent Skills
Back to repository

biome

verified

Use when setting up linting and formatting for TypeScript/JavaScript projects. Provides Biome configuration patterns, rule explanations, and best practices.

View on GitHub

Marketplace

dev-tools-plugin

sizukutamago/dev-tools-plugin

Plugin

dev-tools-plugin

productivity

Repository

sizukutamago/dev-tools-plugin

skills/biome/SKILL.md

Last Verified

February 5, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/sizukutamago/dev-tools-plugin/blob/main/skills/biome/SKILL.md -a claude-code --skill biome

Installation paths:

Claude
.claude/skills/biome/
Powered by add-skill CLI

Instructions

# Biome Linting & Formatting

TypeScript/JavaScript プロジェクトの Linting・Formatting 設定ガイドライン。

## 前提条件

- `biome` CLI がインストール済み(`bun add -D @biomejs/biome` または `npm install -D @biomejs/biome`)
- TypeScript/JavaScript プロジェクト

## ワークフロー

1. **設定ファイル作成**: プロジェクトルートに `biome.json` を作成
2. **ルール適用**: 下記の推奨設定をベースにカスタマイズ
3. **実行**: `bunx biome check --write .` でフォーマット+リント修正
4. **CI 連携**: `bunx biome check .` で検証(--write なし)

## 推奨設定

### ベース設定

```json
{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": { "noExcessiveCognitiveComplexity": "warn" },
      "correctness": { "noUnusedVariables": "warn", "noUnusedImports": "warn" },
      "style": { "useConst": "error", "noNonNullAssertion": "warn" },
      "suspicious": { "noExplicitAny": "warn" }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "tab",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "always",
      "trailingCommas": "all"
    }
  },
  "files": {
    "ignore": ["node_modules", "dist", "*.lockb", ".git"]
  }
}
```

## ルール解説

### complexity/noExcessiveCognitiveComplexity

関数の認知的複雑度を制限。深いネストや条件分岐が多い関数を検出。

<Bad>
```typescript
function processData(data: Data) {
  if (data.type === 'A') {
    if (data.subtype === '1') {
      if (data.value > 10) {
        if (data.active) {
          // 深いネスト = 高い認知的複雑度
        }
      }
    }
  }
}
```
</Bad>

<Good>
```typescript
function processData(data: Data) {
  if (!isValidData(data)) return;

  const handler = getHandler(data.type, data.subtype);
  return handler(data);
}

function isValidData(data: Data): boolean {
  return data.value > 10 && data.active;
}
```
早期リターンと関数分割で複雑度を下げる
</Good>

### correctness/noUnusedVariables & noUnusedImports

使用されていない変数・インポートを検出。

```typescript
// ❌ 未使用インポート
import { unused } from './module';

/

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
3047 chars