Agent skill
devtools
開発ツールの効果的な使用方法をまとめたスキルセット
Install this agent skill to your Project
npx add-skill https://github.com/chronista-club/unison/tree/main/.claude/skills/devtools
SKILL.md
DevTools スキル
開発ツールの効果的な使用方法をまとめたスキルセットです。
含まれるツール
1. mise - 開発環境管理ツール
プロジェクトごとに開発ツールのバージョンを管理し、自動的に切り替えを行います。
クイックスタート:
# ツールをインストール
mise install
# 開発サーバーを起動
mise run dev
# テストを実行
mise run test
→ 詳細は mise リファレンス を参照
2. Chrome DevTools MCP サーバー
ブラウザの自動操作とE2Eテストを可能にするMCPサーバーです。
主なツール:
new_page- ページを開くtake_snapshot- DOM構造を取得click- 要素をクリックtake_screenshot- 画面キャプチャnavigate_page- ページ遷移
基本的な使い方:
// ページを開く
mcp__chrome-devtools__new_page
{ "url": "http://localhost:8080" }
// 要素を確認
mcp__chrome-devtools__take_snapshot
// クリック
mcp__chrome-devtools__click
{ "uid": "element_uid" }
→ 詳細は Chrome DevTools MCP リファレンス を参照
実践例
- Webダッシュボードのテスト例
- mise設定ファイルの例
いつ使うか
mise
- ✅ 新しいプロジェクトをセットアップするとき
- ✅ チームで同じツールバージョンを使いたいとき
- ✅ CI/CD環境を構築するとき
- ✅ 複数プロジェクトで異なるバージョンを使うとき
Chrome DevTools MCP
- ✅ WebUIの動作を確認したいとき
- ✅ E2Eテストを実施したいとき
- ✅ ブラウザでの問題を調査したいとき
- ✅ リリース前の手動テストを効率化したいとき
トラブルシューティング
よくある問題
mise: ツールバージョンが切り替わらない
mise doctor # 診断を実行
eval "$(mise activate bash)" # シェル統合を再実行
Chrome MCP: 要素が見つからない
- ページの読み込み完了を待つ
- 複数回スナップショットを取る
- 動的に生成される要素に注意
参考資料
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
chronista-club/unison
skills
SurrealDBを効率的に使うための実践的スキルセット
chronista-club/unison
qdrant
chronista-club/unison
physical-event
物理デバイスからのイベントを統一的に処理するためのスキルセット
chronista-club/unison
git-worktree
chronista-club/unison
mcp-builder
LLMが外部サービスと対話するための適切に設計されたツールを通じて、高品質なMCP (Model Context Protocol) サーバーを作成するためのガイド。Python (FastMCP)、Node/TypeScript (MCP SDK)、Rust (Tokio)で、外部APIやサービスを統合するMCPサーバーを構築する際に使用します。
chronista-club/unison
hearing-first
実装前にユーザーの意向を段階的にヒアリングする手法
Didn't find tool you were looking for?