AI時代のフロントエンド実践開発！ - Finatext Tech Night #6 2026/03/03 yamanoku Shifting from MCP to Skills ベストプラクティスの変遷を辿る 

yamanoku 一児の父・会社員 「お元気ですか.fm」パーソナリティ ● Web Standard ● フロントエンド ● UIデザイン ● アクセシビリティ ● 大型犬 X (旧Twitter) | BlueSky | GitHub 

2025年はAIエージェントの乱立で慌ただしかったが ようやく落ち着きがみられるようになった（個人の感想）。 自分で書くコードよりもAIエージェントによって書かれた コード量が圧倒的に増えてきている。 フロントエンド開発で担う役割や領域は広い現状なので、 AIエージェントに委任できるところは委任したい。 フロントエンド開発と AIエージェント 

プロンプトのテクニックもあるが最新の知識を得ているかも大事。 ● 外部サービスのリソースとも連動したい ● function calling / tool useで情報を取得する手法が確立 ● しかし、各LLMサービスごとでやり方・規格がバラバラ… ● 統一された通信規格はできないか？ AIが正確な精度を出すために必要なこと 

MCP 

● Anthropicが提唱したプロトコル ● AIと外部ツールをつなぐための標準的プロトコル ● Tools, Resources, Promptを扱う ● JSON-RPC形式でやりとり ● 各種言語のSDKが存在する https://github.com/modelcontextprotocol MCP (Model Context Protocol) とは何か 

公式・個人での MCPサーバー作成が流行る https://speakerdeck.com/yamanoku/building-mcp-servers-at-lightning-speed-with-deno-and-jsr 

特定のHTML、CSS、JavaScript、Web APIに関する Baselineの情報を教えてくれるMCPサーバー。 AIエージェントが情報を参照してWidelyなものを選んだり 一部制限があるものを使わないようにする。 https://github.com/yamanoku/baseline-mcp-server Baseline MCP Server 

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 

Chromeのブラウザセッション情報をAIエージェントへ渡すための MCPサーバー。 ブラウザ上のバグやパフォーマンスチェック・ネットワーク状況を 取得してコード上の問題点のヒントとして活かす。 https://github.com/ChromeDevTools/chrome-devtools-mcp Chrome DevTools MCP 

公式でMCPサーバーを用意し、どこからでも接続・連携可能 ● https://nuxt.com/mcp ● https://ui.nuxt.com/mcp ● https://mcp.svelte.dev/mcp ● https://mcp.expo.dev/mcp リモートMCPサーバーの登場 

● トークン消費・コンテキストウィンドウを圧迫しやすい ● toolsの増加に伴う管理コスト（手段の多様化） ● AIエージェントでの登録数の制限 MCPの欠点 

Equipping agents for the real world with Agent Skills 

● Anthropicが提唱するAIへの指示書 ● 一度認識させることで自動的に対応できる ● Markdown形式で専門的な処理を個別管理 ● 2025年12月にオープン規格化 ● Claude Code、Codex、Cursor、Google Antigravityなど対応 Agent Skillsとは何か 

Skillsの構成 my-skill/ ├── SKILL.md # 指示書・メタ情報（必須） ├── scripts/ # 実行コード ├── references/ # 参考リファレンス └── assets/ # 静的リソース 

SKILL.mdの内部（一例） --- name: スキル名 description: このスキルが何をするものか、またいつ使用するべきかの簡単な説明 --- # あなたのスキル名 ## 指示 (Instructions) [Claudeが実行するための、明確でステップバイステップのガイダンス ] ## 使用例 (Examples) [このスキルを使用する具体的な例 ] 

Claude CodeのSkillsでWeb機能のBaseline対応状況を確認できるようにした 

https://github.com/masuP9/a11y-specialist-skills/ 

https://github.com/antfu/skills 

MCP → Skills 

MCP → CLI (Skills) 

Hono Conference 2025 - 2025/10/28 

● Playwright MCP → Playwright CLI ● Datadog MCP Server → Datadog Agent Skills ○ 内部はCLI Google Workspace CLIも登場するなど、CLI上でコマンド経由して 完結できるツールは今後も増えていきそう MCPからCLIツールへの転換 

ドキュメントをnpm packageとしてpublishしよう | blog | ryoppippi.com LLMフレンドリーな ドキュメント提供方 法と しては、 ローカルに ダウンロードさせるのが 現時点では 最も 効率が 良い Skillsの形式で必要なドキュメントを置けるようにするとGood site2skill: どんなサイトでもClaude Skills化するツールを作った 知識はローカルにあった方が都合がいい 

MCPは不要になった？ 

前提として MCPはSkillsと 同等のものではない 

MCPとSkillsとの比較 MCP Agent Skills 役割・機能 AIとの通信規格 AIへの指示書 有利な部分 （一例） ● 外部ツール間との連携 ● 接続処理をコードに内包できる ● Skillsを組み合わせて使える ● 一度実行して自律的に再利用する 制約（一例） AIエージェント内での登録数制限 実行環境ごとでAPIやネットワークへの アクセス可否が異なる 

CLIで操作可能・ベストプラクティスとなる部分はSkillsを使う。 外部ツールとの連携（GitHub、Attlassian、Figma）でMCPを使う。 Skillsとして役割を明確にできるものはMCPからSkillsへ移譲する。 トークン消費量だけに左右されず、役割に応じて扱うべき。 MCPもSkillsと併用で扱うこともある 

● Figmaから情報を取得する（MCP） ● 特定のフレームワークで実装する指示（SKills） ○ 例：React ＋ Jotai + Tailwind CSSで実装する ○ 例：設計のベストプラクティスに則っているかチェック ○ 例：WAI-ARIAルールに違反していないかチェック Claude Skills で Figma 実装を自動化するが参考になりました！ Figma実装での具体例 

● 悪用Skillsによるプロンプトインジェクション、データ抜き取り ● 自動で実行するためスクリプト内部が安全かの確認が必要 ● 機密情報をローカルに保持していないか 等 Skillsのセキュリティ懸念 これはSkillsが危険でMCP自体が安全ということはならない MCPサーバーでも同様の危険性はあるため、 しっかりと内容をチェックして扱うべき。 

● AIエージェントへのコンテキスト提供手段は変化している ● Skillsで完結するものは徐々に移譲していこう ● MCPの役割を理解し、必要なものを扱えるようにする ● 信頼のおけるMCPサーバーとSkillsを使おう まとめ 

● 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/ 参考情報