Shifting from MCP to Skills / ベストプラクティスの変遷を辿る

AI時代のフロントエンド実践開発！ - Finatext Tech Night #6登壇資料

Transcript

1. AI時代のフロントエンド実践開発！ - Finatext Tech Night #6 2026/03/03 yamanoku Shifting from MCP to Skills ベストプラクティスの変遷を辿る
2. yamanoku 一児の父・会社員 「お元気ですか.fm」パーソナリティ • Web Standard • フロントエンド • UIデザイン • アクセシビリティ • 大型犬 X (旧Twitter) | BlueSky | GitHub
3. 2025年はAIエージェントの乱立で慌ただしかったが ようやく落ち着きがみられるようになった（個人の感想）。 自分で書くコードよりもAIエージェントによって書かれた コード量が圧倒的に増えてきている。 フロントエンド開発で担う役割や領域は広い現状なので、 AIエージェントに委任できるところは委任したい。 フロントエンド開発と AIエージェント
4. プロンプトのテクニックもあるが最新の知識を得ているかも大事。 • 外部サービスのリソースとも連動したい • function calling / tool useで情報を取得する手法が確立 • しかし、各LLMサービスごとでやり方・規格がバラバラ… • 統一された通信規格はできないか？ AIが正確な精度を出すために必要なこと
5. MCP
6. • Anthropicが提唱したプロトコル • AIと外部ツールをつなぐための標準的プロトコル • Tools, Resources, Promptを扱う • JSON-RPC形式でやりとり • 各種言語のSDKが存在する https://github.com/modelcontextprotocol MCP (Model Context Protocol) とは何か
7. 公式・個人での MCPサーバー作成が流行る https://speakerdeck.com/yamanoku/building-mcp-servers-at-lightning-speed-with-deno-and-jsr
8. 特定のHTML、CSS、JavaScript、Web APIに関する Baselineの情報を教えてくれるMCPサーバー。 AIエージェントが情報を参照してWidelyなものを選んだり 一部制限があるものを使わないようにする。 https://github.com/yamanoku/baseline-mcp-server Baseline MCP Server
9. Figmaデザインからより精度の高い コードへ変換する（design to code）ためのMCPサーバー。 コードにしたい対象のFigmaのリンクとプロンプトを合わせて 出力してもらえる。 https://help.figma.com/hc/en-us/articles/35280968300439-Figma-MCP-collec tion-What-is-the-Figma-MCP-server Figma DevMode MCP
10. Chromeのブラウザセッション情報をAIエージェントへ渡すための MCPサーバー。 ブラウザ上のバグやパフォーマンスチェック・ネットワーク状況を 取得してコード上の問題点のヒントとして活かす。 https://github.com/ChromeDevTools/chrome-devtools-mcp Chrome DevTools MCP
11. 公式でMCPサーバーを用意し、どこからでも接続・連携可能 • https://nuxt.com/mcp • https://ui.nuxt.com/mcp • https://mcp.svelte.dev/mcp • https://mcp.expo.dev/mcp リモートMCPサーバーの登場
12. • トークン消費・コンテキストウィンドウを圧迫しやすい • toolsの増加に伴う管理コスト（手段の多様化） • AIエージェントでの登録数の制限 MCPの欠点
13. Equipping agents for the real world with Agent Skills
14. • Anthropicが提唱するAIへの指示書 • 一度認識させることで自動的に対応できる • Markdown形式で専門的な処理を個別管理 • 2025年12月にオープン規格化 • Claude Code、Codex、Cursor、Google Antigravityなど対応 Agent Skillsとは何か
15. Skillsの構成 my-skill/ ├── SKILL.md # 指示書・メタ情報（必須） ├── scripts/ # 実行コード ├── references/ # 参考リファレンス └── assets/ # 静的リソース
16. SKILL.mdの内部（一例） --- name: スキル名 description: このスキルが何をするものか、またいつ使用するべきかの簡単な説明 --- # あなたのスキル名 ## 指示 (Instructions) [Claudeが実行するための、明確でステップバイステップのガイダンス ] ## 使用例 (Examples) [このスキルを使用する具体的な例 ]
17. Claude CodeのSkillsでWeb機能のBaseline対応状況を確認できるようにした
18. https://github.com/masuP9/a11y-specialist-skills/
19. https://github.com/antfu/skills
20. MCP → Skills
21. MCP → CLI (Skills)
22. Hono Conference 2025 - 2025/10/28
23. • Playwright MCP → Playwright CLI • Datadog MCP Server → Datadog Agent Skills ◦ 内部はCLI Google Workspace CLIも登場するなど、CLI上でコマンド経由して 完結できるツールは今後も増えていきそう MCPからCLIツールへの転換
24. ドキュメントをnpm packageとしてpublishしよう | blog | ryoppippi.com LLMフレンドリーな ドキュメント提供方 法と しては、 ローカルに ダウンロードさせるのが 現時点では 最も 効率が 良い Skillsの形式で必要なドキュメントを置けるようにするとGood site2skill: どんなサイトでもClaude Skills化するツールを作った 知識はローカルにあった方が都合がいい
25. MCPは不要になった？
26. 前提として MCPはSkillsと 同等のものではない
27. MCPとSkillsとの比較 MCP Agent Skills 役割・機能 AIとの通信規格 AIへの指示書 有利な部分 （一例） • 外部ツール間との連携 • 接続処理をコードに内包できる • Skillsを組み合わせて使える • 一度実行して自律的に再利用する 制約（一例） AIエージェント内での登録数制限 実行環境ごとでAPIやネットワークへの アクセス可否が異なる
28. CLIで操作可能・ベストプラクティスとなる部分はSkillsを使う。 外部ツールとの連携（GitHub、Attlassian、Figma）でMCPを使う。 Skillsとして役割を明確にできるものはMCPからSkillsへ移譲する。 トークン消費量だけに左右されず、役割に応じて扱うべき。 MCPもSkillsと併用で扱うこともある
29. • Figmaから情報を取得する（MCP） • 特定のフレームワークで実装する指示（SKills） ◦ 例：React ＋ Jotai + Tailwind CSSで実装する ◦ 例：設計のベストプラクティスに則っているかチェック ◦ 例：WAI-ARIAルールに違反していないかチェック Claude Skills で Figma 実装を自動化するが参考になりました！ Figma実装での具体例
30. • 悪用Skillsによるプロンプトインジェクション、データ抜き取り • 自動で実行するためスクリプト内部が安全かの確認が必要 • 機密情報をローカルに保持していないか 等 Skillsのセキュリティ懸念 これはSkillsが危険でMCP自体が安全ということはならない MCPサーバーでも同様の危険性はあるため、 しっかりと内容をチェックして扱うべき。
31. • AIエージェントへのコンテキスト提供手段は変化している • Skillsで完結するものは徐々に移譲していこう • MCPの役割を理解し、必要なものを扱えるようにする • 信頼のおけるMCPサーバーとSkillsを使おう まとめ
32. • https://platform.claude.com/docs/ja/agents-and-tools/agent-skills/overview • https://agentskills.io/home • https://dev.classmethod.jp/articles/agent-skills-2025-standardized-overview/ • https://zenn.dev/nuits_jp/articles/2025-12-30-interpretation-of-agent-skills • https://ejholmes.github.io/2026/02/28/mcp-is-dead-long-live-the-cli.html • https://justin.poehnelt.com/posts/rewrite-your-cli-for-ai-agents/ 参考情報