Skip to main content

AI開発支援ツール

開発環境をより良くするためのAI支援ツールを紹介する。

これらのツールは、AIエージェントの機能を拡張し、フロントエンド開発やコードレビューの効率を向上させる。

Agent Skills​

AIコーディングエージェントの機能を拡張する再利用可能な命令セットである。

Vercel Labsが提供するこのツールは、AIエージェント向けのパッケージマネージャーとして機能し、ReactやNext.jsの最適化ルールなどを簡単に導入できる。

インストール​

npx add-skill vercel-labs/agent-skills

サポート対象エージェント​

  • Claude Code
  • OpenCode
  • Cursor
  • Codex
  • Antigravity

主要機能​

  • react-best-practices: ReactとNext.jsのパフォーマンス最適化ガイドライン
  • web-design-guidelines: Webインターフェースのベストプラクティスレビュー
  • vercel-deploy-claimable: Vercelへの即座のデプロイ機能

参考リンク​

Frontend Design Plugin​

Claude Code向けのプラグインである。

高品質で本番レベルのフロントエンドインターフェースを構築するためのツールであり、モダンなデザインパターンを使用して洗練されたインターフェースを作成できる。

React、Vue、Svelte、vanilla HTML/CSSをサポートしている。

インストール​

claude plugins add frontend-design@claude-code-plugins

有効化​

claude.settingsファイルでプラグインを有効化する。

{
  "enabledPlugins": {
    "frontend-design@claude-code-plugins": true
  }
}

主要機能​

  • /frontend-design: ページやコンポーネントの構築を支援するガイド付きワークフロー
  • /design: UIコンポーネントを素早く生成するクイックモード
  • /ui: デザインシステムを考慮したUIコンポーネント生成
  • /layout: レスポンシブレイアウトとページ構造の作成

参考リンク​

Difit​

ローカルのGit差分をGitHub風のインターフェースで表示し、レビューできるCLIツールである。

AIエージェント向けのプロンプト生成機能を備え、コードレビューを効率化する。

インストール​

インストール方法は、目的に応じて以下の3種類がある。

  • クイック試用

    npx difit

  • グローバルインストール

    npm install -g difit

  • AIエージェントとの統合

    npx skills add yoshiko-pg/difit

主要機能​

  • 複数の差分表示モード（単一コミット、コミット/ブランチ比較、未コミット変更）
  • GitHub PRのレビュー機能（--prフラグ）
  • コメントシステムとAI向けプロンプト生成
  • 自動ファイル折りたたみ（生成ファイル、ロックファイル、削除ファイルなど）
  • シンタックスハイライト（20以上のプログラミング言語）
  • Unified/Split差分表示の切り替え
  • TUIモード（--tuiフラグ）

参考リンク​

関連ガイド​

これらのツールと組み合わせることで、AIエージェントとの協働開発がより効率的になる。

Last updated on