feat: add vercel-labs/agent-skills for AI development

[keito4]

Summary

• Skills インストール機構を追加（プラグインと同様のパターン）
• vercel-labs/agent-skills をデフォルトでインストール
• スキルファイルはリポジトリに含めず、ビルド時に動的インストール

Skills インストール機構

プラグイン（plugins.txt + install-claude-plugins.sh）と同じパターンで、スキルの動的インストール仕組みを提供：

ファイル	説明
.claude/skills/skills.txt	インストールするスキルのリスト（GitHub リポジトリ形式）
script/install-skills.sh	npx skills add を実行してスキルをインストール
.gitignore	.agents/skills/ を除外（ビルド時に生成）

Dockerfile での動作

# skills.txt をコピー
COPY .claude/skills/skills.txt /home/vscode/.claude/skills/skills.txt

# install-skills.sh でスキルをインストール
USER vscode
RUN /tmp/install-skills.sh /home/vscode/.claude/skills/skills.txt

スキルの追加方法

1. .claude/skills/skills.txt にリポジトリを追加

   vercel-labs/agent-skills
   owner/another-skill
   

2. DevContainerを再ビルドするとスキルがインストールされる

手動インストール（ローカル）

npx skills add vercel-labs/agent-skills -y -g

インストールされるスキル

vercel-labs/agent-skills に含まれる4つのスキル：

• vercel-composition-patterns: React composition patterns
• vercel-react-best-practices: React performance best practices
• vercel-react-native-skills: React Native development skills
• web-design-guidelines: Web design guidelines

Test plan

• skills.txt が追加されていること
• install-skills.sh が実行可能であること
• Dockerfileがスキルインストールステップを含むこと
• .gitignore に .agents/skills/ が追加されていること
• pre-commitフックが通過すること

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Added Claude Code Skills support to the DevContainer environment. Skills are now automatically installed during the build process based on a configuration list.

• Chores

  • Updated configuration files and build process to enable skill management and installation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request establishes an automated skill installation system for the devcontainer environment. It introduces a skills list file, a bash installation script, Dockerfile integration to execute the installation during container build, and gitignore entries to exclude agent skill directories from version control.

Changes

Cohort / File(s)	Summary
Skills Installation Infrastructure .claude/skills/skills.txt, script/install-skills.sh	New skills list configuration and bash script that iterates through skills, validates prerequisites, installs via npx, and reports summary statistics (installed/skipped/failed counts).
DevContainer Build Configuration .devcontainer/Dockerfile	Adds user directory creation (.agents), copies skill installation files, executes install script as vscode user with fallback logging, and adjusts directory ownership post-installation.
Ignore Configurations .gitignore, .prettierignore	Adds patterns to exclude agent skill directories (.agents/skills/, .claude/skills/vercel-*, .claude/skills/web-design-*, .codex/skills/, .cursor/skills/, .github/skills/) from version control and code formatting.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~13 minutes

Possibly related PRs

• Chore/cursor agent setup 20250808 #88: Modifies devcontainer setup for agent skill installation with similar Dockerfile and gitignore changes for agent directories.
• feat: add Claude Code plugin sync mechanism #168: Adds Claude extension install flows with repository-managed configuration lists and installer scripts in devcontainer.

Suggested labels

size/S

Poem

🐰 A burrow of skills, so neatly arranged,
In .agents and .claude, where code finds exchange,
With npx commands, we weave and we bind,
DevContainer grows smarter—what wonders we'll find! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding Vercel agent skills for AI development, which is reflected in all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[claude]

PR Review: vercel-labs/agent-skills の追加

概要

このPRは、Vercel Labsが提供する4つのAIエージェントスキルを統合し、React/React Nativeの開発における品質向上を図るものです。

---

✅ 良い点

1. 適切なスキル選定

• vercel-composition-patterns: Reactコンポーネントの設計パターン
• vercel-react-best-practices: パフォーマンス最適化のベストプラクティス
• vercel-react-native-skills: モバイルアプリ開発の実践的ガイド
• web-design-guidelines: UIレビュー・アクセシビリティチェック

これらは実務で頻繁に必要となる領域をカバーしており、選定は適切です。

2. インフラ統合が正確

• ✅ .agents/skills/ に実体を配置
• ✅ .claude/skills/ からシンボリックリンクを作成（適切な相対パス）
• ✅ Dockerfileが .agents/skills/ をコンテナにコピー
• ✅ .prettierignore で外部スキルファイルを除外（フォーマット強制を回避）

3. コミットメッセージの品質

Conventional Commitsに準拠し、feat: タイプでsemantic-releaseがトリガーされる設定になっています。.agents/ ディレクトリの変更は本来release対象外ですが、Dockerfileの変更があるため feat は妥当です。

4. テスト計画の完全性

Test planの4項目すべてがチェック済みで、検証が適切に実施されています。

---

⚠️ 改善提案

1. リンクされたIssueが不在（Minor）

CLAUDE.mdの「Git Workflow」セクションでは「Linked Issue必須」とされていますが、このPRには関連Issueがありません。

推奨対応:

• Issue作成は不要（既にPRが完成しているため後付けは無意味）
• ただし今後は、PR作成前にIssueで要件を定義することを推奨

2. スキルの実際の動作検証（Moderate）

Test planでは「スキルがインストールされていること」の確認はありますが、実際にスキルが機能するかの検証項目がありません。

推奨検証:

# 例: web-design-guidelinesスキルを実際に起動してみる
# Claudeに以下のようなプロンプトでテスト
# "Can you review my UI using the web-design-guidelines skill?"

各スキルが適切にロードされ、実行可能であることを確認することを推奨します。

3. Dockerfileの変更によるイメージサイズへの影響（Low）

.agents/skills/ ディレクトリ全体で 13,839行 （約2MB以上のMarkdownファイル）が追加されています。

推奨調査:

• DevContainerイメージのビルド時間とサイズへの影響を確認
• 必要に応じて .dockerignore でテストファイルや不要なメタデータを除外

4. ドキュメント不足（Moderate）

追加されたスキルについて、以下のドキュメントが不足しています:

推奨追加:

• README.md または CLAUDE.md にスキルの利用方法を追記
• 例: "利用可能なスキル" セクションを追加し、各スキルの目的と起動方法を記載

## 利用可能なスキル

| スキル名 | 用途 | 起動方法 |
|---------|------|---------|
| vercel-react-best-practices | React性能最適化レビュー | "Review this component for React best practices" |
| web-design-guidelines | UIアクセシビリティチェック | "Check my UI against web design guidelines" |

5. セキュリティ: 外部コンテンツの信頼性（Low）

web-design-guidelines/SKILL.md:26 では外部URLから動的にガイドラインを取得する仕様になっています:

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

リスク:

• GitHubリポジトリが変更・削除された場合の動作不確実性
• 外部コンテンツ取得時のネットワーク依存

推奨対応:

• 現時点では対応不要（Vercel公式リポジトリのため信頼性は高い）
• 将来的にはガイドラインのローカルキャッシュやバージョン固定を検討

---

🔍 コード品質チェック

静的解析結果

• Conventional Commits: ✅ Pass (feat: タイプ使用)
• Prettier: ✅ Pass (.prettierignore で除外設定済み)
• ファイルパーミッション: ✅ Pass (シンボリックリンクが 120000 で正しく作成)

TDDカバレッジ

このPRは設定ファイルとドキュメントのみの変更であり、実行可能コードは含まれていないため、テストカバレッジ要件は適用外です。

---

📋 Definition of Done チェック

項目	ステータス	備考
Quality Gates Pass	✅	pre-commitフック通過確認済み
ドキュメント更新	⚠️	README/CLAUDE.mdへのスキル利用方法追記を推奨
モニタリング閾値内で安定	N/A	設定変更のためモニタリング対象外
リリースノート記載	✅	PR本文が十分なリリースノートとして機能

---

🎯 総合評価

判定: ✅ Approve with Minor Suggestions

このPRは技術的に健全であり、マージ可能な状態です。ただし、以下の点を考慮することで、さらに品質を向上できます:

1. Must Fix（なし）: ブロッカーとなる問題はありません
2. Should Fix（推奨）:
   • スキルの実動作検証を実施
   • ドキュメントに利用方法を追記
3. Nice to Have（任意）:
   • Dockerイメージサイズへの影響確認
   • 将来的な外部依存の管理戦略検討

マージ推奨: このPRはマージして問題ありません。上記の改善提案は、フォローアップIssueとして別途対応することも可能です。

---

📚 参考資料

• Vercel Labs Agent Skills
• React Performance Best Practices
• Web Interface Guidelines

🤖 レビュー実施: Claude Sonnet 4.5

[github-actions]

⚠️ Large PR Warning

This PR is quite large with 13930 lines changed across 116 files.

Large PRs are harder to review and more likely to introduce bugs. Please consider:

• Breaking this into smaller, focused PRs
• Separating refactoring from feature changes
• Creating a PR series with clear dependencies

PR Size Guidelines:

Size	Lines	Files
XS	≤50	≤3
S	≤200	≤10
M	≤500	≤15
L	≤1000	≤30
XL	>1000	>30

[claude]

PR Review: Skills インストール機構の追加

概要

vercel-labs/agent-skills を動的にインストールする仕組みを追加。プラグインと同じパターンで実装されており、アーキテクチャの一貫性が保たれています。

良い点

1. アーキテクチャの一貫性 - install-claude-plugins.sh と同じパターンで実装
2. エラーハンドリング - set -euo pipefail による厳格なエラー処理
3. セキュリティ考慮 - 適切な権限管理
4. Conventional Commits 準拠 - feat: プレフィックス使用

改善提案

1. テストカバレッジ不足（重要度: 高）

install-skills.sh に対応する BATS テストが存在しません。CLAUDE.md で要求される 70%+ カバレッジ基準を満たすため、test/integration/install_skills.bats を追加してください。

参考: test/integration/install_claude_plugins.bats

2. Docker ビルド失敗時の影響（重要度: 中）

Dockerfile:118-121 でスキルインストール失敗を警告のみで継続していますが、ユーザーが気づかない可能性があります。README にトラブルシューティングセクションの追加を推奨します。

3. ドキュメント不足（重要度: 低）

.claude/skills/skills.txt の使用方法が README に記載されていません。スキル追加手順の追加を推奨します。

コード品質チェック

• Lint / Format: ✅ CI パス
• セキュリティスキャン: ✅ GitGuardian / Gitleaks パス
• Conventional Commits: ✅ feat: プレフィックス使用
• PR サイズ: ✅ +102/-3 行（基準内）
• テストカバレッジ: ❌ BATS テスト未実装
• ドキュメント: ⚠️ 基本説明あり、詳細不足

マージ前の推奨アクション

必須（ブロッカー）: test/integration/install_skills.bats を追加（TDD 基準準拠）

推奨（非ブロッカー）: Dockerfile 失敗ハンドリングの改善、README へのスキル追加手順記載

総合評価

推奨判定: ✅ 条件付き承認

BATS テスト追加後にマージ可能。その他の改善提案は後続 PR で対応可。

---

🤖 Reviewed by Claude Sonnet 4.5

[github-actions]

🎉 This PR is included in version 1.57.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀