跳到正文
DEV Community· Yoshiyuki Watanabe·· 4 小時前AI 評分55

Anthropic 的 claude-code-setup 為幾乎沒有 Claude Code 設定的程式碼庫推薦 Hooks 和技能

Let Anthropic's claude-code-setup Recommend Hooks and Skills for a Repo with Almost No Claude Code Config

AI 導讀

作者在自建的 netflix-intro-skipper Chrome 擴充功能上測試 Anthropic 官方 claude-code-setup，外掛分析程式碼庫並提出 Claude Code 自動化建議。它根據測試套件、版本同步腳本及過往修復紀錄，推薦測試 Hook、release 技能和審查子智能體；外掛只提供建議，不會建立或修改檔案。

正文

Introduction

I tried Anthropic's official plugin claude-code-setup on netflix-intro-skipper, a Chrome extension I built myself.

Claude Code Setup | Claude by Anthropic

Analyze codebases and recommend tailored Claude Code automations such as hooks, skills, MCP servers, and subagents.

favicon claude.com

This article walks through installing the plugin and the recommendations it actually produced.

What is Claude Code Setup?

claude-code-setup is a plugin that analyzes your codebase and recommends Claude Code automation settings that fit the project. It is provided by Anthropic and is shown as Anthropic-verified on the marketplace.

  • The recommendation categories are Hooks, Subagents, Skills, MCP Servers, and Plugins
  • It is read-only and never creates or modifies files
  • It usually limits recommendations to 1-2 per category, and increases that to 3-5 when you ask for a specific category
  • It reads files such as package.json and the directory structure to determine the tech stack

The Target Project

The target is netflix-intro-skipper, introduced above.

Netflix Intro Skipper

Netflix のイントロを自動的にスキップする Chrome 拡張機能です。

🎯 機能

  • ✅ Netflix の「イントロをスキップ」ボタンを自動検出・クリック
  • ✅ 自動スキップ機能のオン/オフ切り替え
  • ✅ 世界各国の Netflix ドメインに対応
  • ✅ 軽量で非侵入的な設計
  • ✅ 多言語対応（日本語、英語、その他）
  • ✅ セッション管理で複数動画に対応
  • ✅ 堅牢なエラーハンドリング

🚀 インストール方法

注意: このツールは個人利用のために作成されたもので、現時点では Chrome ウェブストアで公開する予定はありません。以下の手順で手動インストールしてください。

  1. このプロジェクトのファイルをダウンロード
  2. Chrome を開き、chrome://extensions/ にアクセス
  3. 右上の「デベロッパーモード」を有効にする
  4. 「パッケージ化されていない拡張機能を読み込む」をクリック
  5. 拡張機能のディレクトリを選択
  6. 拡張機能がインストールされ、使用準備完了

📖 使用方法

  1. Netflix にアクセスして動画の視聴を開始
  2. イントロが表示されると、拡張機能が自動的にスキップ
  3. 拡張機能のポップアップで自動スキップのオン/オフを切り替え可能
  4. 設定はブラウザセッション間で保存されます

🛠️ 開発

開発者向け（コードを修正・テストする場合）

拡張機能のコードを修正したり、テストを実行したい場合のみ以下が必要です：

環境セットアップ

# 依存関係をインストール（開発・テスト用）
npm install

# すべてのテストを実行
npm test

# 特定のテストを実行
npm test -- integration.test.js

# テストをウォッチモードで実行
npm run test:watch

# テストカバレッジを確認
npm run test:coverage

開発ワークフロー

  1. ソースコード: src/ フォルダ内のファイルを編集
  2. テスト: tests/ フォルダ内でテストを作成・実行
  3. アイコン: assets/icons/ でアイコンファイルを管理
  4. 拡張機能テスト: Chrome で chrome://extensions/ から再読み込み

リリースバージョン管理

リリースバージョンを更新したい場合は以下のコマンドを実行するとpackage.jsonとmanifest.jsonのversionが更新されます

# パッチバージョンアップ（バグ修正: 1.0.1 → 1.0.2）
npm run version:patch

# マイナーバージョンアップ（新機能: 1.0.1 → 1.1.0）
npm run version:minor

# メジャーバージョンアップ（破壊的変更: 1.0.1 → 2.0.0）
npm run version:major

Dry Run（事前確認）:

# 実行前に何が行われるかを確認
npm run version:dry-run:patch
npm run version:dry-run:minor
npm run version:dry-run:major

実行例:

$ npm run version:patch
> netflix-intro-skipper@1.0.1 version:patch

…

  • It supports Manifest V3 and automatically skips Netflix intros
  • It is plain JavaScript with no build step
  • Tests use Jest and fast-check, with 13 test files
  • There is no CLAUDE.md, and .claude/ contains only settings.local.json

Since the project has almost no Claude Code configuration, I thought it was a good fit for seeing what this plugin recommends.

Trying It Out

Step 1: Install the plugin

Launch Claude Code in the target repository and install the plugin from the marketplace.

/plugin install claude-code-setup@claude-plugins-official

After installation, you can confirm that claude-code-setup was added in the Installed tab of /plugins.

Step 2: Ask for recommendations

After installing, I entered the following prompt in English.

Analyze this project and recommend Claude Code automations (hooks, skills, MCP servers, subagents, plugins) that fit it.

Step 3: Review the recommendations

This is the output the plugin produced.

## Claude Code Automation Recommendations

### Codebase Profile
- **Type**: Chrome extension (Manifest V3) that automatically skips Netflix intros
- **Language/tooling**: Plain JavaScript, no build step
- **Testing**: Jest (jsdom) and fast-check (property-based testing), with 13 test files and about 6,000 lines of tests
- **Versioning**: `scripts/release-version.js` keeps the version in `package.json`, `manifest.json`, and `src/version.js` in sync
- **Size**: `src/content.js` is 2,720 lines and by far the largest file
- **Claude config**: No `CLAUDE.md`. `.claude/` contains only `settings.local.json`
- **Other**: Specs live in `.kiro/specs/`. No CI was found

---

### ⚡ Hooks

#### 1. Run related tests automatically after edits (PostToolUse)
**Why**: The project has a large test suite, and small changes to a big file like `content.js` can easily cause regressions. Running `npx jest --findRelatedTests <file>` after each `src/` edit catches problems right away.
**Where**: `.claude/settings.json`
```json
{
  "hooks": {
    "PostToolUse": [{
      "matcher": "Edit|Write",
      "hooks": [{ "type": "command",
        "command": "jq -r '.tool_input.file_path' | grep -E '/src/.*\\.js$' | xargs -r npx jest --findRelatedTests --passWithNoTests" }]
    }]
  }
}
```

#### 2. Block direct edits to version-managed files (PreToolUse)
**Why**: Versions are meant to be bumped through `npm run version:*`, which syncs three files. Hand-editing the version in `manifest.json` or `src/version.js` would desynchronize them. You could also block `package-lock.json` and `coverage/` in the same hook.

---

### 🎯 Skills

#### 1. `release` (user-only)
**Why**: A release spans several steps: `version:dry-run`, then `version:*`, then commit, then tag. It has side effects, so it is safer to invoke manually.
**Create**: `.claude/skills/release/SKILL.md`
```yaml
---
name: release
description: Verify with a dry run, then bump the version and prepare the release
disable-model-invocation: true
---
```

#### 2. `netflix-dom-check` (Claude-only background knowledge)
**Why**: Changes to Netflix's DOM selectors are the most common way an extension like this breaks. A skill that collects the selector list, the requirements in `.kiro/specs`, and the tests to check after an update makes `content.js` changes faster and more accurate.
**Create**: `.claude/skills/netflix-dom-check/SKILL.md` (with `user-invocable: false`)

---

### 🤖 Subagents

#### 1. `extension-security-reviewer`
**Why**: This MV3 extension has many `host_permissions`. A periodic review is worthwhile for excessive permissions, XSS risks from DOM manipulation in `content.js`, and missing validation on message passing.
**Where**: `.claude/agents/extension-security-reviewer.md`

#### 2. `service-worker-reviewer`
**Why**: You previously fixed a Service Worker problem after PC sleep (PR #1). A reviewer focused on state persistence, alarms, and restart resilience would help prevent a recurrence when `background.js` changes.
**Where**: `.claude/agents/service-worker-reviewer.md`

---

### 🔌 MCP Servers

#### 1. Playwright MCP
**Why**: Verifying behavior in a real browser matters for an extension. Jest runs on jsdom, so it can't check the real popup UI or content-script behavior.
**Install**: `claude mcp add playwright npx @playwright/mcp@latest`

#### 2. context7
**Why**: It gives you up-to-date docs for the Chrome Extension APIs (`chrome.storage`, `chrome.alarms`, and others) and for Jest and fast-check.
**Install**: `claude mcp add context7 -- npx -y @upstash/context7-mcp`

---

### 📦 Plugins
- **commit-commands**: Streamlines commits and PR creation. It fits well because this repo uses a PR workflow (feature branch, then merge).
- **frontend-design**: Useful when improving `popup.html` and `popup.js`. Lower priority.

---

### Notes
- I'd start by **creating a `CLAUDE.md`**. Just documenting how to run `npm test`, the version-sync rules, and the role of `.kiro/specs` goes a long way. `/init` can generate a draft.
- Check that `coverage/` and `node_modules/` are both listed in `.gitignore`.

If you want more options in a specific category, or help implementing any of these, let me know.

Key Takeaways from the Recommendations

Most of the recommendations were based on the specifics of the repository.

  • Because src/content.js is large at 2,720 lines, it recommends a hook that runs only the related tests after each edit
  • Because scripts/release-version.js keeps the version in three files in sync, it recommends a hook that blocks direct edits to version-related files, plus a release skill that bundles the release steps
  • It even picked up the Service Worker fix from PR #1 and recommends a dedicated reviewer subagent for background.js

All of these are grounded in what is actually in the repository: file size, scripts, and PR history.

The plugin only prints recommendations and does not create any files. To apply them, either place the suggested settings yourself or ask Claude Code separately to create them.

The first recommendation was to create a CLAUDE.md. /init can generate a draft, so that looks like a good place to start.

Summary

For a repository with almost no configuration, claude-code-setup produced recommendations that took into account the version-sync script and past fix history. It is a good starting point for a project where you are not sure what to add first.

Because it is read-only and has no side effects, it is easy to try even on an existing repository. Give it a try on your own project.

Thank you for reading this far!

References

來源：DEV Community · dev.to

#教學/實踐#Agent#Anthropic