[{"data":1,"prerenderedAt":2375},["ShallowReactive",2],{"category-data-チュートリアル":3},[4],{"id":5,"title":6,"body":7,"description":2359,"extension":2360,"meta":2361,"navigation":267,"ogImage":2363,"path":2371,"seo":2372,"stem":2373,"__hash__":2374},"content/blogs/13-claude-skills-mcp-web-video-engineer-guide.md","Claude Skills・MCP・ウェブ制作・動画生成を実務で使い倒す：エンジニア向け実践ガイド2026 | Claude Skills, MCP, Website Generation, and Programmatic Video in Production: A Practical Engineer's Guide 2026",{"type":8,"value":9,"toc":2305},"minimark",[10,1215,1217,2301],[11,12,14,19,30,33,38,98,100,104,107,117,125,199,202,207,210,213,216,325,327,331,334,337,340,381,385,388,541,545,654,657,699,706,708,712,715,718,722,725,802,805,809,812,845,848,850,854,861,864,913,916,919,922,930,933,977,980,1049,1052,1054,1057,1060,1064,1077,1083,1089,1093,1099,1109,1112,1118,1124,1128,1134,1140,1146,1148,1151,1212],"lang-block",{"lang":13},"ja",[15,16,18],"h1",{"id":17},"claude-skillsmcpウェブ制作動画生成を実務で使い倒すエンジニア向け実践ガイド2026","Claude Skills・MCP・ウェブ制作・動画生成を実務で使い倒す：エンジニア向け実践ガイド2026",[20,21,22],"blockquote",{},[23,24,25,29],"p",{},[26,27,28],"strong",{},"バージョン注記",": 本記事は2026年5月時点の情報を基に執筆している。mcp Python SDK 1.27.0、MCP仕様 2025-11-25リビジョン、Remotion最新版を参照している。MCPの仕様更新は活発なため、公式ドキュメント（modelcontextprotocol.io）で最新情報を確認することを推奨する。",[31,32],"hr",{},[34,35,37],"h2",{"id":36},"tldrこの記事でわかること","TL;DR：この記事でわかること",[39,40,41,54],"table",{},[42,43,44],"thead",{},[45,46,47,51],"tr",{},[48,49,50],"th",{},"テーマ",[48,52,53],{},"学べること",[55,56,57,66,74,82,90],"tbody",{},[45,58,59,63],{},[60,61,62],"td",{},"Claude Skills",[60,64,65],{},"SKILL.mdの仕組み・MCP との役割分担・実務での使い方",[45,67,68,71],{},[60,69,70],{},"MCP サーバー構築",[60,72,73],{},"Python FastMCP で50行以下のサーバーを作る最短手順",[45,75,76,79],{},[60,77,78],{},"ウェブサイト生成",[60,80,81],{},"Claude Code + Next.js / Nuxt 4 でのサイト生成ワークフロー",[45,83,84,87],{},[60,85,86],{},"Remotion 動画制作",[60,88,89],{},"コードで動画を書いてClaude Codeでレンダリングする実践手順",[45,91,92,95],{},[60,93,94],{},"ハマりポイント",[60,96,97],{},"それぞれの罠と回避策",[31,99],{},[34,101,103],{"id":102},"skills-と-mcp-は何が違うのか役割を正確に理解する","Skills と MCP は何が違うのか——役割を正確に理解する",[23,105,106],{},"Claude CodeやClaude.aiを使い込んでいくと、必ずぶつかる疑問がある。「Skills と MCP って結局どう使い分けるの？」だ。ドキュメントを読んでもピンとこない場合、次のメンタルモデルが効く。",[23,108,109,112,113,116],{},[26,110,111],{},"Skills = エージェントの「手順書」","、",[26,114,115],{},"MCP = エージェントの「外部接続線」","。",[23,118,119,120,124],{},"Skillsは",[121,122,123],"code",{},".claude/skills/","以下に置いたSKILL.mdファイルだ。Claudeがタスクの文脈を判断し、関連するSkillを自動でロードして指示に従う。コードを書かず、マークダウンを書くだけで動く。一方MCPはJSON-RPC 2.0で動くクライアント・サーバープロトコルで、ClaudeをGitHub・データベース・社内APIなどの外部システムに繋ぐ。",[39,126,127,140],{},[42,128,129],{},[45,130,131,134,137],{},[48,132,133],{},"比較軸",[48,135,136],{},"Skills",[48,138,139],{},"MCP",[55,141,142,153,164,175,186],{},[45,143,144,147,150],{},[60,145,146],{},"実装言語",[60,148,149],{},"Markdown（SKILL.md）",[60,151,152],{},"Python / TypeScript / Go など",[45,154,155,158,161],{},[60,156,157],{},"コンテキスト消費",[60,159,160],{},"30〜50トークン（必要時のみロード）",[60,162,163],{},"50,000トークン超になることも",[45,165,166,169,172],{},[60,167,168],{},"用途",[60,170,171],{},"手順・ベストプラクティスの埋め込み",[60,173,174],{},"外部システムとのリアルタイム連携",[45,176,177,180,183],{},[60,178,179],{},"横断性",[60,181,182],{},"Claude Code / Cursor / Gemini CLI で共通動作",[60,184,185],{},"MCP対応クライアント全般で動作",[45,187,188,191,196],{},[60,189,190],{},"設定方法",[60,192,193,195],{},[121,194,123],{}," にファイルを置くだけ",[60,197,198],{},"サーバーを立ててclaude_desktop_config.jsonに登録",[23,200,201],{},"重要な点は「SkillはMCPツールを呼べる」という非対称性だ。Skillで手順を定義し、MCPで外部ツールを接続する——両方組み合わせることで初めてフルオートのエージェントができる。",[203,204,206],"h3",{"id":205},"skills-の実務パターン","Skills の実務パターン",[23,208,209],{},"2026年3月時点のSkillsエコシステムは、公式Anthropicスキル・検証済みサードパーティ・コミュニティスキルの三層構造になっている。frontend-designスキルが27万インストール超、Remotionスキルが週11.7万インストール、gws（Google Workspace）が公開3日で4,900 GitHubスターを記録した。",[23,211,212],{},"実務でSkillが威力を発揮するのは「同じ手順を何度も説明するのが嫌な場面」全般だ。独自DBスキーマを理解するSQLアシスタントSkill・社内コーディング規約を埋め込んだレビューSkill・独自データ形式の変換Skillなどを一度書けば、以降はプロンプト一行で呼び出せる。",[23,214,215],{},"SKILL.mdを自分で書く場合の最小構成は以下だ：",[217,218,223],"pre",{"className":219,"code":220,"language":221,"meta":222,"style":222},"language-markdown shiki shiki-themes dracula","---\nname: my-skill\ndescription: >\n  説明。Claudeがこれを見てスキルをロードするかを判断する。\n  トリガー条件を具体的に書くこと。\n---\n\n# My Skill\n\n## 手順\n\n1. まず〇〇を確認する\n2. 次に△△を実行する\n\n## 落とし穴\n\n- □□の場合は××してはいけない\n","markdown","",[121,224,225,233,239,245,251,257,262,269,275,280,286,291,297,303,308,314,319],{"__ignoreMap":222},[226,227,230],"span",{"class":228,"line":229},"line",1,[226,231,232],{},"---\n",[226,234,236],{"class":228,"line":235},2,[226,237,238],{},"name: my-skill\n",[226,240,242],{"class":228,"line":241},3,[226,243,244],{},"description: >\n",[226,246,248],{"class":228,"line":247},4,[226,249,250],{},"  説明。Claudeがこれを見てスキルをロードするかを判断する。\n",[226,252,254],{"class":228,"line":253},5,[226,255,256],{},"  トリガー条件を具体的に書くこと。\n",[226,258,260],{"class":228,"line":259},6,[226,261,232],{},[226,263,265],{"class":228,"line":264},7,[226,266,268],{"emptyLinePlaceholder":267},true,"\n",[226,270,272],{"class":228,"line":271},8,[226,273,274],{},"# My Skill\n",[226,276,278],{"class":228,"line":277},9,[226,279,268],{"emptyLinePlaceholder":267},[226,281,283],{"class":228,"line":282},10,[226,284,285],{},"## 手順\n",[226,287,289],{"class":228,"line":288},11,[226,290,268],{"emptyLinePlaceholder":267},[226,292,294],{"class":228,"line":293},12,[226,295,296],{},"1. まず〇〇を確認する\n",[226,298,300],{"class":228,"line":299},13,[226,301,302],{},"2. 次に△△を実行する\n",[226,304,306],{"class":228,"line":305},14,[226,307,268],{"emptyLinePlaceholder":267},[226,309,311],{"class":228,"line":310},15,[226,312,313],{},"## 落とし穴\n",[226,315,317],{"class":228,"line":316},16,[226,318,268],{"emptyLinePlaceholder":267},[226,320,322],{"class":228,"line":321},17,[226,323,324],{},"- □□の場合は××してはいけない\n",[31,326],{},[34,328,330],{"id":329},"mcpサーバーを50行で作るpython-fastmcp-最短実装","MCPサーバーを50行で作る——Python FastMCP 最短実装",[23,332,333],{},"MCPの普及速度は前例がない。2024年11月の公開時に月200万SDK DLだったものが、OpenAI採用（2025年3月）・Microsoft統合（7月）・AWS対応（11月）を経て、2026年3月には9,700万DL/月、公開サーバー1万超に達した。ReactはこのDL数に3年かかったが、MCPは16ヶ月でやってのけた。",[23,335,336],{},"MCPが解決する問題はシンプルだ。社内CRM・請求システム・機能フラグサービスをAIエージェントから叩くには、従来クライアントAIごとに別の統合コードを書く必要があった。MCP対応サーバーを一つ作れば、Claude・ChatGPT・Cursor・Gemini全クライアントで動く。",[203,338,339],{"id":339},"セットアップ",[217,341,345],{"className":342,"code":343,"language":344,"meta":222,"style":222},"language-bash shiki shiki-themes dracula","# uv 推奨（pip でも可）\nuv add mcp\n# または\npip install mcp\n","bash",[121,346,347,353,366,371],{"__ignoreMap":222},[226,348,349],{"class":228,"line":229},[226,350,352],{"class":351},"shSDL","# uv 推奨（pip でも可）\n",[226,354,355,359,363],{"class":228,"line":235},[226,356,358],{"class":357},"sAOxA","uv",[226,360,362],{"class":361},"s-mGx"," add",[226,364,365],{"class":361}," mcp\n",[226,367,368],{"class":228,"line":241},[226,369,370],{"class":351},"# または\n",[226,372,373,376,379],{"class":228,"line":247},[226,374,375],{"class":357},"pip",[226,377,378],{"class":361}," install",[226,380,365],{"class":361},[203,382,384],{"id":383},"最小構成サーバーpython-fastmcp","最小構成サーバー（Python FastMCP）",[23,386,387],{},"以下は実際に動くMCPサーバーの最小実装だ。Tools・Resources・Promptsの三要素を全て含む：",[217,389,393],{"className":390,"code":391,"language":392,"meta":222,"style":222},"language-python shiki shiki-themes dracula","from mcp.server.fastmcp import FastMCP\n\nmcp = FastMCP(\"my-service\", json_response=True)\n\n# Tool: 副作用のある操作（POSTに相当）\n@mcp.tool()\ndef check_stock(sku: str) -> dict:\n    \"\"\"指定SKUの在庫数を返す\"\"\"\n    # 実際はDBクエリ等に置き換える\n    return {\"sku\": sku, \"quantity\": 42, \"warehouse\": \"tokyo\"}\n\n# Resource: 読み取り専用データ（GETに相当）\n@mcp.resource(\"products://catalog\")\ndef get_catalog() -> str:\n    \"\"\"商品カタログの一覧を返す\"\"\"\n    return \"SKU-001: Widget A\\nSKU-002: Widget B\"\n\n# Prompt: 再利用可能なプロンプトテンプレート\n@mcp.prompt()\ndef stock_check_prompt(sku: str) -> str:\n    \"\"\"在庫確認のためのプロンプトを生成\"\"\"\n    return f\"SKU {sku} の在庫を確認し、少ない場合は補充を提案してください。\"\n\nif __name__ == \"__main__\":\n    # ローカル開発: stdio\n    # mcp.run()\n    # リモート/本番: Streamable HTTP\n    mcp.run(transport=\"streamable-http\", host=\"0.0.0.0\", port=3050)\n","python",[121,394,395,400,404,409,413,418,423,428,433,438,443,447,452,457,462,467,472,476,482,488,494,500,506,511,517,523,529,535],{"__ignoreMap":222},[226,396,397],{"class":228,"line":229},[226,398,399],{},"from mcp.server.fastmcp import FastMCP\n",[226,401,402],{"class":228,"line":235},[226,403,268],{"emptyLinePlaceholder":267},[226,405,406],{"class":228,"line":241},[226,407,408],{},"mcp = FastMCP(\"my-service\", json_response=True)\n",[226,410,411],{"class":228,"line":247},[226,412,268],{"emptyLinePlaceholder":267},[226,414,415],{"class":228,"line":253},[226,416,417],{},"# Tool: 副作用のある操作（POSTに相当）\n",[226,419,420],{"class":228,"line":259},[226,421,422],{},"@mcp.tool()\n",[226,424,425],{"class":228,"line":264},[226,426,427],{},"def check_stock(sku: str) -> dict:\n",[226,429,430],{"class":228,"line":271},[226,431,432],{},"    \"\"\"指定SKUの在庫数を返す\"\"\"\n",[226,434,435],{"class":228,"line":277},[226,436,437],{},"    # 実際はDBクエリ等に置き換える\n",[226,439,440],{"class":228,"line":282},[226,441,442],{},"    return {\"sku\": sku, \"quantity\": 42, \"warehouse\": \"tokyo\"}\n",[226,444,445],{"class":228,"line":288},[226,446,268],{"emptyLinePlaceholder":267},[226,448,449],{"class":228,"line":293},[226,450,451],{},"# Resource: 読み取り専用データ（GETに相当）\n",[226,453,454],{"class":228,"line":299},[226,455,456],{},"@mcp.resource(\"products://catalog\")\n",[226,458,459],{"class":228,"line":305},[226,460,461],{},"def get_catalog() -> str:\n",[226,463,464],{"class":228,"line":310},[226,465,466],{},"    \"\"\"商品カタログの一覧を返す\"\"\"\n",[226,468,469],{"class":228,"line":316},[226,470,471],{},"    return \"SKU-001: Widget A\\nSKU-002: Widget B\"\n",[226,473,474],{"class":228,"line":321},[226,475,268],{"emptyLinePlaceholder":267},[226,477,479],{"class":228,"line":478},18,[226,480,481],{},"# Prompt: 再利用可能なプロンプトテンプレート\n",[226,483,485],{"class":228,"line":484},19,[226,486,487],{},"@mcp.prompt()\n",[226,489,491],{"class":228,"line":490},20,[226,492,493],{},"def stock_check_prompt(sku: str) -> str:\n",[226,495,497],{"class":228,"line":496},21,[226,498,499],{},"    \"\"\"在庫確認のためのプロンプトを生成\"\"\"\n",[226,501,503],{"class":228,"line":502},22,[226,504,505],{},"    return f\"SKU {sku} の在庫を確認し、少ない場合は補充を提案してください。\"\n",[226,507,509],{"class":228,"line":508},23,[226,510,268],{"emptyLinePlaceholder":267},[226,512,514],{"class":228,"line":513},24,[226,515,516],{},"if __name__ == \"__main__\":\n",[226,518,520],{"class":228,"line":519},25,[226,521,522],{},"    # ローカル開発: stdio\n",[226,524,526],{"class":228,"line":525},26,[226,527,528],{},"    # mcp.run()\n",[226,530,532],{"class":228,"line":531},27,[226,533,534],{},"    # リモート/本番: Streamable HTTP\n",[226,536,538],{"class":228,"line":537},28,[226,539,540],{},"    mcp.run(transport=\"streamable-http\", host=\"0.0.0.0\", port=3050)\n",[203,542,544],{"id":543},"claude-desktop-への登録","Claude Desktop への登録",[217,546,550],{"className":547,"code":548,"language":549,"meta":222,"style":222},"language-json shiki shiki-themes dracula","{\n  \"mcpServers\": {\n    \"my-service\": {\n      \"command\": \"python\",\n      \"args\": [\"/path/to/server.py\"]\n    }\n  }\n}\n","json",[121,551,552,558,578,592,615,639,644,649],{"__ignoreMap":222},[226,553,554],{"class":228,"line":229},[226,555,557],{"class":556},"sCdxs","{\n",[226,559,560,564,568,571,575],{"class":228,"line":235},[226,561,563],{"class":562},"sY8FZ","  \"",[226,565,567],{"class":566},"sLL85","mcpServers",[226,569,570],{"class":562},"\"",[226,572,574],{"class":573},"s0Tla",":",[226,576,577],{"class":556}," {\n",[226,579,580,583,586,588,590],{"class":228,"line":241},[226,581,582],{"class":562},"    \"",[226,584,585],{"class":566},"my-service",[226,587,570],{"class":562},[226,589,574],{"class":573},[226,591,577],{"class":556},[226,593,594,597,600,602,604,608,610,612],{"class":228,"line":247},[226,595,596],{"class":562},"      \"",[226,598,599],{"class":566},"command",[226,601,570],{"class":562},[226,603,574],{"class":573},[226,605,607],{"class":606},"seVfx"," \"",[226,609,392],{"class":361},[226,611,570],{"class":606},[226,613,614],{"class":556},",\n",[226,616,617,619,622,624,626,629,631,634,636],{"class":228,"line":253},[226,618,596],{"class":562},[226,620,621],{"class":566},"args",[226,623,570],{"class":562},[226,625,574],{"class":573},[226,627,628],{"class":556}," [",[226,630,570],{"class":606},[226,632,633],{"class":361},"/path/to/server.py",[226,635,570],{"class":606},[226,637,638],{"class":556},"]\n",[226,640,641],{"class":228,"line":259},[226,642,643],{"class":556},"    }\n",[226,645,646],{"class":228,"line":264},[226,647,648],{"class":556},"  }\n",[226,650,651],{"class":228,"line":271},[226,652,653],{"class":556},"}\n",[203,655,656],{"id":656},"トランスポートの選び方",[39,658,659,671],{},[42,660,661],{},[45,662,663,666,668],{},[48,664,665],{},"トランスポート",[48,667,168],{},[48,669,670],{},"注意",[55,672,673,686],{},[45,674,675,680,683],{},[60,676,677],{},[121,678,679],{},"stdio",[60,681,682],{},"ローカル・Claude Desktop連携・開発",[60,684,685],{},"ネットワーク設定不要",[45,687,688,693,696],{},[60,689,690],{},[121,691,692],{},"streamable-http",[60,694,695],{},"リモート・チーム共有・クラウドデプロイ",[60,697,698],{},"2025年3月仕様で標準化。SSE は非推奨",[23,700,701,702,705],{},"TypeScriptで書く場合は",[121,703,704],{},"@modelcontextprotocol/sdk","とZodを使う。Python FastMCPと同じ三要素（Tool / Resource / Prompt）をサポートし、型安全性が高い。どちらの言語でも「ワイヤプロトコルはJSON-RPC 2.0で共通」なので、PythonサーバーにTypeScriptクライアントを繋ぐことも普通に動く。",[31,707],{},[34,709,711],{"id":710},"claude-code-でウェブサイトを生成するclaudemdとskillの組み合わせ","Claude Code でウェブサイトを生成する——CLAUDE.mdとSkillの組み合わせ",[23,713,714],{},"2026年初頭時点でClaude Codeは全GitHubコミットの4%を生成しており、VS Codeへの日次インストールは2,900万に達した。「バイブコーディング」と呼ばれるこのワークフローは、エンジニア経験ゼロの人でもNext.jsアプリを作れるレベルに成熟している。",[23,716,717],{},"ただしClaudeに「サイト作って」と言うだけでは、Interフォント・パープルグラデーション・白背景というお約束の「AI生成デザイン」が出てくる。これを回避するのがCLAUDE.mdとSkillの組み合わせだ。",[203,719,721],{"id":720},"claudemdの位置づけ","CLAUDE.mdの位置づけ",[23,723,724],{},"プロジェクトルートに置くCLAUDE.mdはClaude Codeがセッション開始時に自動読み込みする設定ファイルだ。ここに「プロジェクトのコンテキスト」を書く：",[217,726,728],{"className":219,"code":727,"language":221,"meta":222,"style":222},"# Project: MyApp\n\n## スタック\n- Nuxt 4 (Nuxt Content 3, Vue 3 Composition API)\n- Tailwind CSS v4, shadcn/ui\n- Vercel デプロイ\n\n## ルール\n- コミット前に必ずビルドを通す\n- TypeScript strict モード必須\n- MDX コンポーネントは使わない（Nuxt Content の CommonMark のみ）\n\n## 禁止事項\n- console.log を残したままコミットしない\n- any 型の使用\n",[121,729,730,735,739,744,749,754,759,763,768,773,778,783,787,792,797],{"__ignoreMap":222},[226,731,732],{"class":228,"line":229},[226,733,734],{},"# Project: MyApp\n",[226,736,737],{"class":228,"line":235},[226,738,268],{"emptyLinePlaceholder":267},[226,740,741],{"class":228,"line":241},[226,742,743],{},"## スタック\n",[226,745,746],{"class":228,"line":247},[226,747,748],{},"- Nuxt 4 (Nuxt Content 3, Vue 3 Composition API)\n",[226,750,751],{"class":228,"line":253},[226,752,753],{},"- Tailwind CSS v4, shadcn/ui\n",[226,755,756],{"class":228,"line":259},[226,757,758],{},"- Vercel デプロイ\n",[226,760,761],{"class":228,"line":264},[226,762,268],{"emptyLinePlaceholder":267},[226,764,765],{"class":228,"line":271},[226,766,767],{},"## ルール\n",[226,769,770],{"class":228,"line":277},[226,771,772],{},"- コミット前に必ずビルドを通す\n",[226,774,775],{"class":228,"line":282},[226,776,777],{},"- TypeScript strict モード必須\n",[226,779,780],{"class":228,"line":288},[226,781,782],{},"- MDX コンポーネントは使わない（Nuxt Content の CommonMark のみ）\n",[226,784,785],{"class":228,"line":293},[226,786,268],{"emptyLinePlaceholder":267},[226,788,789],{"class":228,"line":299},[226,790,791],{},"## 禁止事項\n",[226,793,794],{"class":228,"line":305},[226,795,796],{},"- console.log を残したままコミットしない\n",[226,798,799],{"class":228,"line":310},[226,800,801],{},"- any 型の使用\n",[23,803,804],{},"CLAUDE.mdとSkillの役割分担は明確だ。CLAUDE.mdは「このプロジェクトの文脈」、Skillは「このタスクのやり方」。両方あることで、プロジェクトを知りつつ特定作業を正しくこなすエージェントができる。",[203,806,808],{"id":807},"nextjs-nuxt-でのサイト生成ワークフロー","Next.js / Nuxt でのサイト生成ワークフロー",[23,810,811],{},"実際に動くフローは以下になる：",[813,814,815,822,831,839],"ol",{},[816,817,818,821],"li",{},[26,819,820],{},"CLAUDE.mdを作成",": スタック・命名規則・禁止事項を記述",[816,823,824,827,828],{},[26,825,826],{},"公式または自作Skillを追加",": ",[121,829,830],{},"npx skills add frontend-design",[816,832,833,827,836],{},[26,834,835],{},"プランモードで要件確認",[121,837,838],{},"claude --plan \"〇〇なランディングページを作りたい\"",[816,840,841,844],{},[26,842,843],{},"イテレーティブに実装",": 一度に全部頼まず、セクション単位で進める",[23,846,847],{},"重要なのはステップ3のプランモードだ。いきなり実装させると「間違った問題を解くコード」が生成されることがある。まずClaudeに既存のコードベースを探索させ、変更箇所・影響範囲・エッジケースを特定したプランを出させる。プランを確認してからイエスと言うだけで、実装ミスの大半を防げる。",[31,849],{},[34,851,853],{"id":852},"claude-code-remotion-で動画をコードで書く","Claude Code + Remotion で動画をコードで書く",[23,855,856,857,860],{},"「動画をコードで管理する」という発想は、フロントエンドエンジニアには自然に受け入れられる。Remotionはまさにそれを実現するReactベースの動画フレームワークで、",[121,858,859],{},"useCurrentFrame()","でフレーム番号を取得しアニメーションをコードで記述する。Claude Codeとの組み合わせは「プロンプトで動画を書く」ワークフローを実現する。",[203,862,339],{"id":863},"セットアップ-1",[217,865,867],{"className":342,"code":866,"language":344,"meta":222,"style":222},"# Remotionプロジェクトを作成\nnpx create-video@latest my-video-project\ncd my-video-project\n\n# Agent Skillsをインストール（Remotionチームが提供するベストプラクティス集）\nnpx skills add remotion-dev/skills\n",[121,868,869,874,885,892,896,901],{"__ignoreMap":222},[226,870,871],{"class":228,"line":229},[226,872,873],{"class":351},"# Remotionプロジェクトを作成\n",[226,875,876,879,882],{"class":228,"line":235},[226,877,878],{"class":357},"npx",[226,880,881],{"class":361}," create-video@latest",[226,883,884],{"class":361}," my-video-project\n",[226,886,887,890],{"class":228,"line":241},[226,888,889],{"class":566},"cd",[226,891,884],{"class":361},[226,893,894],{"class":228,"line":247},[226,895,268],{"emptyLinePlaceholder":267},[226,897,898],{"class":228,"line":253},[226,899,900],{"class":351},"# Agent Skillsをインストール（Remotionチームが提供するベストプラクティス集）\n",[226,902,903,905,908,910],{"class":228,"line":259},[226,904,878],{"class":357},[226,906,907],{"class":361}," skills",[226,909,362],{"class":361},[226,911,912],{"class":361}," remotion-dev/skills\n",[23,914,915],{},"SkillsをインストールするとClaude Codeがリモーションの規約を理解し、正しいコンポーネント構造でコードを生成できるようになる。38種類以上のカテゴリがあり、アニメーション・3D・字幕・音声・チャート・トランジションをカバーする。",[203,917,918],{"id":918},"実際のプロンプト例",[23,920,921],{},"良いプロンプトの書き方にはコツがある。具体的な数字・解像度・秒数を最初に宣言し、シーンの境界を明示する：",[217,923,928],{"className":924,"code":926,"language":927,"meta":222},[925],"language-text","1920x1080px、30fps、10秒の動画を作って。\n\n0-2秒: ロゴフェードイン（中央配置、白背景）\n2-6秒: 3つの機能を順番にスライドイン（左から右）\n        - \"高速\" + 稲妻アイコン\n        - \"安全\" + シールドアイコン\n        - \"簡単\" + チェックアイコン\n6-9秒: CTAボタンが拡大して登場「今すぐ試す」\n9-10秒: フェードアウト\n\nカラー: bg #0a0a0a, accent #7c3aed, text white\n","text",[121,929,926],{"__ignoreMap":222},[23,931,932],{},"生成されたコードはRemotionスタジオでリアルタイムプレビューし、問題なければレンダリングする：",[217,934,936],{"className":342,"code":935,"language":344,"meta":222,"style":222},"# プレビュー\nnpx remotion studio\n\n# レンダリング（MP4）\nnpx remotion render MyComposition out/video.mp4\n",[121,937,938,943,953,957,962],{"__ignoreMap":222},[226,939,940],{"class":228,"line":229},[226,941,942],{"class":351},"# プレビュー\n",[226,944,945,947,950],{"class":228,"line":235},[226,946,878],{"class":357},[226,948,949],{"class":361}," remotion",[226,951,952],{"class":361}," studio\n",[226,954,955],{"class":228,"line":241},[226,956,268],{"emptyLinePlaceholder":267},[226,958,959],{"class":228,"line":247},[226,960,961],{"class":351},"# レンダリング（MP4）\n",[226,963,964,966,968,971,974],{"class":228,"line":253},[226,965,878],{"class":357},[226,967,949],{"class":361},[226,969,970],{"class":361}," render",[226,972,973],{"class":361}," MyComposition",[226,975,976],{"class":361}," out/video.mp4\n",[203,978,979],{"id":979},"ユースケース別の向き不向き",[39,981,982,995],{},[42,983,984],{},[45,985,986,989,992],{},[48,987,988],{},"ユースケース",[48,990,991],{},"向いている",[48,993,994],{},"向いていない",[55,996,997,1008,1018,1028,1039],{},[45,998,999,1002,1005],{},[60,1000,1001],{},"製品デモ動画",[60,1003,1004],{},"◎ データと連動した動的更新が容易",[60,1006,1007],{},"—",[45,1009,1010,1013,1016],{},[60,1011,1012],{},"データビジュアライゼーション",[60,1014,1015],{},"◎ コードで数値を動的に渡せる",[60,1017,1007],{},[45,1019,1020,1023,1026],{},[60,1021,1022],{},"SNS縦型クリップ",[60,1024,1025],{},"◎ 9:16を指定するだけ",[60,1027,1007],{},[45,1029,1030,1033,1036],{},[60,1031,1032],{},"人物が話す動画",[60,1034,1035],{},"△ HeyGen等の専用ツールが優勢",[60,1037,1038],{},"複雑なリップシンク",[45,1040,1041,1044,1047],{},[60,1042,1043],{},"長尺映像（10分超）",[60,1045,1046],{},"△ シーン管理が煩雑になる",[60,1048,1007],{},[23,1050,1051],{},"ローカルレンダリングをするのでクラウド動画生成ツールのウォーターマーク・クレジット制限は一切関係ない。「ビルドアーティファクトとしての動画」という考え方で、製品変更のたびに動画をCI/CDで自動更新するパイプラインを組む事例もすでに登場している。",[31,1053],{},[34,1055,1056],{"id":1056},"ハマりポイントと回避策",[23,1058,1059],{},"実際に試してハマった点を正直に書く。",[203,1061,1063],{"id":1062},"mcp-関連","MCP 関連",[23,1065,1066,1069,1070,1072,1073,1076],{},[26,1067,1068],{},"SSEトランスポートを使っていてエラーが出る",": 2025年3月のMCP仕様アップデートでSSE（Server-Sent Events）トランスポートは非推奨になった。リモート接続には必ず",[121,1071,692],{},"を使う。FastMCPなら",[121,1074,1075],{},"mcp.run(transport=\"streamable-http\")","に変えるだけで移行できる。",[23,1078,1079,1082],{},[26,1080,1081],{},"MCP サーバーを複数入れたら起動が遅くなった",": 5サーバー・58ツール構成だとコンテキスト消費が55,000トークンを超えることがある。AnthropicのTool Search機能（オンデマンドロード）を有効にすると約85%削減できる。モノリシックなサーバーを避け、用途別に小さく分割すること。",[23,1084,1085,1088],{},[26,1086,1087],{},"セキュリティ",": OWASP MCP Top 10（2025年公開）に従いサーバーを審査する。特にプロンプトインジェクション（ツールのdescriptionに悪意ある指示を埋め込む攻撃）に注意。コミュニティのサーバーは使用前にコードレビュー必須。",[203,1090,1092],{"id":1091},"skills-関連","Skills 関連",[23,1094,1095,1098],{},[26,1096,1097],{},"スキルが期待通りにトリガーされない",": descriptionフィールドが曖昧だとClaudeがスキルをロードしない。「〇〇というキーワードが出たら必ずこのSkillを使え」という強い表現を入れること。",[23,1100,1101,1104,1105,1108],{},[26,1102,1103],{},"コンテキスト上限付近でSkillが無視される",": セッションが長くなりコンテキストの70〜85%超えると精度が落ちる。",[121,1106,1107],{},"/compact","でコンテキストを圧縮するか、新しいセッションで継続する。",[203,1110,1111],{"id":1111},"ウェブサイト生成関連",[23,1113,1114,1117],{},[26,1115,1116],{},"一度に全部作らせようとした",": 「ECサイトを全部作って」は失敗率が高い。コンポーネント単位・ページ単位でイテレーティブに進めること。プランモードで方向性を確認してから実装させる。",[23,1119,1120,1123],{},[26,1121,1122],{},"生成コードをそのままコミットした",": ACM 2025年の研究で、LLMのコードは人間比で論理エラーが1.75倍多い可能性が示されている。テストを通してからコミットを徹底する。",[203,1125,1127],{"id":1126},"remotion-関連","Remotion 関連",[23,1129,1130,1133],{},[26,1131,1132],{},"最初から複雑な動画を作ろうとした",": 5秒のサンプルから始め、背景色→テキスト→アニメーション→複数シーンの順に積み上げること。",[23,1135,1136,1139],{},[26,1137,1138],{},"曖昧な指示を出した",": 「80px」「30フレーム（1秒）」のように数値で指定するとClaude Codeの精度が上がる。「大きいフォント」「ゆっくりフェード」は精度が下がる。",[23,1141,1142,1145],{},[26,1143,1144],{},"シーン間でキャラクターの外見が変わる",": Remotionは静的アセットを直接コードで参照するため、画像ファイルを固定すれば解決する。複雑な人物動画はHeyGen等の専用ツールを併用する。",[31,1147],{},[34,1149,1150],{"id":1150},"まとめと次のステップ",[39,1152,1153,1166],{},[42,1154,1155],{},[45,1156,1157,1160,1163],{},[48,1158,1159],{},"やること",[48,1161,1162],{},"優先度",[48,1164,1165],{},"所要時間",[55,1167,1168,1179,1189,1202],{},[45,1169,1170,1173,1176],{},[60,1171,1172],{},"MCPサーバーを一つ作る（社内API連携）",[60,1174,1175],{},"高",[60,1177,1178],{},"1〜2時間",[45,1180,1181,1184,1186],{},[60,1182,1183],{},"プロジェクトにCLAUDE.mdを追加",[60,1185,1175],{},[60,1187,1188],{},"30分",[45,1190,1191,1196,1199],{},[60,1192,1193,1195],{},[121,1194,830],{}," を試す",[60,1197,1198],{},"中",[60,1200,1201],{},"10分",[45,1203,1204,1207,1209],{},[60,1205,1206],{},"Remotionで30秒のデモ動画を作る",[60,1208,1198],{},[60,1210,1211],{},"2〜3時間",[23,1213,1214],{},"Claude Codeがコミット全体の4%を生成し、Spotifyのエンジニアが2025年12月以降手でコードを書いていないという現在、これらのツールへの習熟は「あると便利」から「ないと遅い」に変わりつつある。まず一つのMCPサーバーかSkillから始め、「毎回説明するのが面倒なこと」を自動化するところから入るのが最短距離だ。",[31,1216],{},[11,1218,1220,1224,1232,1234,1238,1291,1293,1297,1300,1309,1315,1390,1397,1401,1404,1407,1410,1490,1492,1496,1499,1502,1505,1536,1540,1543,1670,1674,1756,1760,1801,1807,1809,1813,1816,1819,1823,1826,1900,1903,1907,1910,1939,1942,1944,1948,1954,1957,2000,2003,2007,2010,2016,2019,2058,2062,2129,2132,2134,2138,2141,2144,2156,2162,2172,2175,2184,2193,2197,2203,2209,2213,2219,2225,2231,2233,2237,2298],{"lang":1219},"en",[15,1221,1223],{"id":1222},"claude-skills-mcp-website-generation-and-programmatic-video-in-production-a-practical-engineers-guide-2026","Claude Skills, MCP, Website Generation, and Programmatic Video in Production: A Practical Engineer's Guide 2026",[20,1225,1226],{},[23,1227,1228,1231],{},[26,1229,1230],{},"Version note",": This article is based on information as of May 2026. It references mcp Python SDK 1.27.0, MCP spec revision 2025-11-25, and the latest Remotion release. The MCP spec evolves rapidly, so verify the latest information at modelcontextprotocol.io.",[31,1233],{},[34,1235,1237],{"id":1236},"tldr-what-youll-learn","TL;DR — What You'll Learn",[39,1239,1240,1250],{},[42,1241,1242],{},[45,1243,1244,1247],{},[48,1245,1246],{},"Topic",[48,1248,1249],{},"What You'll Pick Up",[55,1251,1252,1259,1267,1275,1283],{},[45,1253,1254,1256],{},[60,1255,62],{},[60,1257,1258],{},"How SKILL.md works, its split with MCP, day-to-day patterns",[45,1260,1261,1264],{},[60,1262,1263],{},"Building MCP servers",[60,1265,1266],{},"The shortest path to a Python FastMCP server in under 50 lines",[45,1268,1269,1272],{},[60,1270,1271],{},"Website generation",[60,1273,1274],{},"Site generation workflow with Claude Code + Next.js / Nuxt 4",[45,1276,1277,1280],{},[60,1278,1279],{},"Remotion video",[60,1281,1282],{},"Writing video as code and rendering it through Claude Code",[45,1284,1285,1288],{},[60,1286,1287],{},"Pitfalls",[60,1289,1290],{},"The traps in each area and how to dodge them",[31,1292],{},[34,1294,1296],{"id":1295},"skills-vs-mcp-getting-the-mental-model-right","Skills vs MCP — Getting the Mental Model Right",[23,1298,1299],{},"If you spend any real time with Claude Code or Claude.ai, you'll hit the same question: \"How do I actually decide between Skills and MCP?\" Reading the docs doesn't always make it click. The mental model that does:",[23,1301,1302,1305,1306],{},[26,1303,1304],{},"Skills = the agent's \"playbook\"",", ",[26,1307,1308],{},"MCP = the agent's \"external connections.\"",[23,1310,1311,1312,1314],{},"Skills are SKILL.md files placed under ",[121,1313,123],{},". Claude reads the task context, automatically loads the relevant skill, and follows its instructions. You write Markdown — no code. MCP, in contrast, is a client-server protocol over JSON-RPC 2.0 that connects Claude to external systems like GitHub, databases, or internal APIs.",[39,1316,1317,1328],{},[42,1318,1319],{},[45,1320,1321,1324,1326],{},[48,1322,1323],{},"Dimension",[48,1325,136],{},[48,1327,139],{},[55,1329,1330,1341,1352,1363,1374],{},[45,1331,1332,1335,1338],{},[60,1333,1334],{},"Implementation language",[60,1336,1337],{},"Markdown (SKILL.md)",[60,1339,1340],{},"Python / TypeScript / Go, etc.",[45,1342,1343,1346,1349],{},[60,1344,1345],{},"Context consumption",[60,1347,1348],{},"30–50 tokens (loaded only when needed)",[60,1350,1351],{},"Can exceed 50,000 tokens",[45,1353,1354,1357,1360],{},[60,1355,1356],{},"Use case",[60,1358,1359],{},"Embedding procedures and best practices",[60,1361,1362],{},"Real-time integration with external systems",[45,1364,1365,1368,1371],{},[60,1366,1367],{},"Cross-tool",[60,1369,1370],{},"Works in Claude Code / Cursor / Gemini CLI",[60,1372,1373],{},"Works in any MCP-capable client",[45,1375,1376,1379,1384],{},[60,1377,1378],{},"Setup",[60,1380,1381,1382],{},"Drop a file under ",[121,1383,123],{},[60,1385,1386,1387],{},"Run a server and register it in ",[121,1388,1389],{},"claude_desktop_config.json",[23,1391,1392,1393,1396],{},"The key asymmetry is: ",[26,1394,1395],{},"a Skill can call MCP tools, but not the other way around."," Define procedures with Skills, connect external tools with MCP — putting them together is what unlocks fully automated agents.",[203,1398,1400],{"id":1399},"real-world-skills-patterns","Real-World Skills Patterns",[23,1402,1403],{},"As of March 2026, the Skills ecosystem is structured in three layers: official Anthropic skills, vetted third-party skills, and community skills. The frontend-design skill has crossed 270K installs, the Remotion skill is doing 117K installs per week, and gws (Google Workspace) hit 4,900 GitHub stars within three days of release.",[23,1405,1406],{},"Skills shine in any situation where \"I'm tired of explaining the same procedure over and over.\" Write a SQL assistant skill that knows your custom DB schema once, embed your team's coding conventions into a review skill, build a converter skill for your proprietary data format — after that, a single one-line prompt invokes them.",[23,1408,1409],{},"The minimum SKILL.md, when you write your own:",[217,1411,1413],{"className":219,"code":1412,"language":221,"meta":222,"style":222},"---\nname: my-skill\ndescription: >\n  Description here. Claude reads this to decide whether to load the skill.\n  Spell out the trigger conditions concretely.\n---\n\n# My Skill\n\n## Steps\n\n1. First, check X.\n2. Then, run Y.\n\n## Pitfalls\n\n- When Z, do not do W.\n",[121,1414,1415,1419,1423,1427,1432,1437,1441,1445,1449,1453,1458,1462,1467,1472,1476,1481,1485],{"__ignoreMap":222},[226,1416,1417],{"class":228,"line":229},[226,1418,232],{},[226,1420,1421],{"class":228,"line":235},[226,1422,238],{},[226,1424,1425],{"class":228,"line":241},[226,1426,244],{},[226,1428,1429],{"class":228,"line":247},[226,1430,1431],{},"  Description here. Claude reads this to decide whether to load the skill.\n",[226,1433,1434],{"class":228,"line":253},[226,1435,1436],{},"  Spell out the trigger conditions concretely.\n",[226,1438,1439],{"class":228,"line":259},[226,1440,232],{},[226,1442,1443],{"class":228,"line":264},[226,1444,268],{"emptyLinePlaceholder":267},[226,1446,1447],{"class":228,"line":271},[226,1448,274],{},[226,1450,1451],{"class":228,"line":277},[226,1452,268],{"emptyLinePlaceholder":267},[226,1454,1455],{"class":228,"line":282},[226,1456,1457],{},"## Steps\n",[226,1459,1460],{"class":228,"line":288},[226,1461,268],{"emptyLinePlaceholder":267},[226,1463,1464],{"class":228,"line":293},[226,1465,1466],{},"1. First, check X.\n",[226,1468,1469],{"class":228,"line":299},[226,1470,1471],{},"2. Then, run Y.\n",[226,1473,1474],{"class":228,"line":305},[226,1475,268],{"emptyLinePlaceholder":267},[226,1477,1478],{"class":228,"line":310},[226,1479,1480],{},"## Pitfalls\n",[226,1482,1483],{"class":228,"line":316},[226,1484,268],{"emptyLinePlaceholder":267},[226,1486,1487],{"class":228,"line":321},[226,1488,1489],{},"- When Z, do not do W.\n",[31,1491],{},[34,1493,1495],{"id":1494},"building-an-mcp-server-in-50-lines-the-python-fastmcp-shortcut","Building an MCP Server in 50 Lines — The Python FastMCP Shortcut",[23,1497,1498],{},"MCP's adoption curve is unprecedented. From 2 million SDK downloads/month at launch (November 2024), it crossed 22 million when OpenAI adopted (March 2025), 45 million when Microsoft integrated (July), 68 million when AWS came on (November), and reached 97 million per month with over 10,000 public servers by March 2026. React took three years to reach those download numbers; MCP did it in 16 months.",[23,1500,1501],{},"The problem MCP solves is simple: previously, hooking your internal CRM, billing system, or feature-flag service into AI agents meant writing separate integration code for every AI client. Build one MCP-compatible server, and it works from Claude, ChatGPT, Cursor, and Gemini.",[203,1503,1378],{"id":1504},"setup",[217,1506,1508],{"className":342,"code":1507,"language":344,"meta":222,"style":222},"# uv recommended (pip works too)\nuv add mcp\n# or\npip install mcp\n",[121,1509,1510,1515,1523,1528],{"__ignoreMap":222},[226,1511,1512],{"class":228,"line":229},[226,1513,1514],{"class":351},"# uv recommended (pip works too)\n",[226,1516,1517,1519,1521],{"class":228,"line":235},[226,1518,358],{"class":357},[226,1520,362],{"class":361},[226,1522,365],{"class":361},[226,1524,1525],{"class":228,"line":241},[226,1526,1527],{"class":351},"# or\n",[226,1529,1530,1532,1534],{"class":228,"line":247},[226,1531,375],{"class":357},[226,1533,378],{"class":361},[226,1535,365],{"class":361},[203,1537,1539],{"id":1538},"minimal-server-python-fastmcp","Minimal Server (Python FastMCP)",[23,1541,1542],{},"Below is a minimal MCP server that actually runs. It includes all three primitives — Tools, Resources, and Prompts:",[217,1544,1546],{"className":390,"code":1545,"language":392,"meta":222,"style":222},"from mcp.server.fastmcp import FastMCP\n\nmcp = FastMCP(\"my-service\", json_response=True)\n\n# Tool: side-effecting operations (analogous to POST)\n@mcp.tool()\ndef check_stock(sku: str) -> dict:\n    \"\"\"Return the inventory count for the given SKU.\"\"\"\n    # In practice, replace with a DB query, etc.\n    return {\"sku\": sku, \"quantity\": 42, \"warehouse\": \"tokyo\"}\n\n# Resource: read-only data (analogous to GET)\n@mcp.resource(\"products://catalog\")\ndef get_catalog() -> str:\n    \"\"\"Return the product catalog listing.\"\"\"\n    return \"SKU-001: Widget A\\nSKU-002: Widget B\"\n\n# Prompt: a reusable prompt template\n@mcp.prompt()\ndef stock_check_prompt(sku: str) -> str:\n    \"\"\"Generate a prompt for checking inventory.\"\"\"\n    return f\"Check the stock for SKU {sku} and propose a restock if it is low.\"\n\nif __name__ == \"__main__\":\n    # Local dev: stdio\n    # mcp.run()\n    # Remote/production: Streamable HTTP\n    mcp.run(transport=\"streamable-http\", host=\"0.0.0.0\", port=3050)\n",[121,1547,1548,1552,1556,1560,1564,1569,1573,1577,1582,1587,1591,1595,1600,1604,1608,1613,1617,1621,1626,1630,1634,1639,1644,1648,1652,1657,1661,1666],{"__ignoreMap":222},[226,1549,1550],{"class":228,"line":229},[226,1551,399],{},[226,1553,1554],{"class":228,"line":235},[226,1555,268],{"emptyLinePlaceholder":267},[226,1557,1558],{"class":228,"line":241},[226,1559,408],{},[226,1561,1562],{"class":228,"line":247},[226,1563,268],{"emptyLinePlaceholder":267},[226,1565,1566],{"class":228,"line":253},[226,1567,1568],{},"# Tool: side-effecting operations (analogous to POST)\n",[226,1570,1571],{"class":228,"line":259},[226,1572,422],{},[226,1574,1575],{"class":228,"line":264},[226,1576,427],{},[226,1578,1579],{"class":228,"line":271},[226,1580,1581],{},"    \"\"\"Return the inventory count for the given SKU.\"\"\"\n",[226,1583,1584],{"class":228,"line":277},[226,1585,1586],{},"    # In practice, replace with a DB query, etc.\n",[226,1588,1589],{"class":228,"line":282},[226,1590,442],{},[226,1592,1593],{"class":228,"line":288},[226,1594,268],{"emptyLinePlaceholder":267},[226,1596,1597],{"class":228,"line":293},[226,1598,1599],{},"# Resource: read-only data (analogous to GET)\n",[226,1601,1602],{"class":228,"line":299},[226,1603,456],{},[226,1605,1606],{"class":228,"line":305},[226,1607,461],{},[226,1609,1610],{"class":228,"line":310},[226,1611,1612],{},"    \"\"\"Return the product catalog listing.\"\"\"\n",[226,1614,1615],{"class":228,"line":316},[226,1616,471],{},[226,1618,1619],{"class":228,"line":321},[226,1620,268],{"emptyLinePlaceholder":267},[226,1622,1623],{"class":228,"line":478},[226,1624,1625],{},"# Prompt: a reusable prompt template\n",[226,1627,1628],{"class":228,"line":484},[226,1629,487],{},[226,1631,1632],{"class":228,"line":490},[226,1633,493],{},[226,1635,1636],{"class":228,"line":496},[226,1637,1638],{},"    \"\"\"Generate a prompt for checking inventory.\"\"\"\n",[226,1640,1641],{"class":228,"line":502},[226,1642,1643],{},"    return f\"Check the stock for SKU {sku} and propose a restock if it is low.\"\n",[226,1645,1646],{"class":228,"line":508},[226,1647,268],{"emptyLinePlaceholder":267},[226,1649,1650],{"class":228,"line":513},[226,1651,516],{},[226,1653,1654],{"class":228,"line":519},[226,1655,1656],{},"    # Local dev: stdio\n",[226,1658,1659],{"class":228,"line":525},[226,1660,528],{},[226,1662,1663],{"class":228,"line":531},[226,1664,1665],{},"    # Remote/production: Streamable HTTP\n",[226,1667,1668],{"class":228,"line":537},[226,1669,540],{},[203,1671,1673],{"id":1672},"registering-with-claude-desktop","Registering With Claude Desktop",[217,1675,1676],{"className":547,"code":548,"language":549,"meta":222,"style":222},[121,1677,1678,1682,1694,1706,1724,1744,1748,1752],{"__ignoreMap":222},[226,1679,1680],{"class":228,"line":229},[226,1681,557],{"class":556},[226,1683,1684,1686,1688,1690,1692],{"class":228,"line":235},[226,1685,563],{"class":562},[226,1687,567],{"class":566},[226,1689,570],{"class":562},[226,1691,574],{"class":573},[226,1693,577],{"class":556},[226,1695,1696,1698,1700,1702,1704],{"class":228,"line":241},[226,1697,582],{"class":562},[226,1699,585],{"class":566},[226,1701,570],{"class":562},[226,1703,574],{"class":573},[226,1705,577],{"class":556},[226,1707,1708,1710,1712,1714,1716,1718,1720,1722],{"class":228,"line":247},[226,1709,596],{"class":562},[226,1711,599],{"class":566},[226,1713,570],{"class":562},[226,1715,574],{"class":573},[226,1717,607],{"class":606},[226,1719,392],{"class":361},[226,1721,570],{"class":606},[226,1723,614],{"class":556},[226,1725,1726,1728,1730,1732,1734,1736,1738,1740,1742],{"class":228,"line":253},[226,1727,596],{"class":562},[226,1729,621],{"class":566},[226,1731,570],{"class":562},[226,1733,574],{"class":573},[226,1735,628],{"class":556},[226,1737,570],{"class":606},[226,1739,633],{"class":361},[226,1741,570],{"class":606},[226,1743,638],{"class":556},[226,1745,1746],{"class":228,"line":259},[226,1747,643],{"class":556},[226,1749,1750],{"class":228,"line":264},[226,1751,648],{"class":556},[226,1753,1754],{"class":228,"line":271},[226,1755,653],{"class":556},[203,1757,1759],{"id":1758},"choosing-a-transport","Choosing a Transport",[39,1761,1762,1775],{},[42,1763,1764],{},[45,1765,1766,1769,1772],{},[48,1767,1768],{},"Transport",[48,1770,1771],{},"Use Case",[48,1773,1774],{},"Notes",[55,1776,1777,1789],{},[45,1778,1779,1783,1786],{},[60,1780,1781],{},[121,1782,679],{},[60,1784,1785],{},"Local, Claude Desktop integration, development",[60,1787,1788],{},"No network setup required",[45,1790,1791,1795,1798],{},[60,1792,1793],{},[121,1794,692],{},[60,1796,1797],{},"Remote, team-shared, cloud-deployed",[60,1799,1800],{},"Standardized in the March 2025 spec. SSE is deprecated",[23,1802,1803,1804,1806],{},"For TypeScript, use ",[121,1805,704],{}," with Zod. It supports the same three primitives (Tool / Resource / Prompt) as Python FastMCP, with strong type safety. In either language, \"the wire protocol is JSON-RPC 2.0,\" so connecting a TypeScript client to a Python server just works.",[31,1808],{},[34,1810,1812],{"id":1811},"generating-websites-with-claude-code-combining-claudemd-and-skills","Generating Websites With Claude Code — Combining CLAUDE.md and Skills",[23,1814,1815],{},"As of early 2026, Claude Code generates 4% of all GitHub commits, with daily VS Code installs reaching 29 million. The \"vibe coding\" workflow has matured to the point where someone with zero engineering experience can ship a Next.js app.",[23,1817,1818],{},"That said, telling Claude \"make me a site\" still produces the familiar AI-generated look — Inter font, purple gradient, white background. The way to escape that is the combination of CLAUDE.md and Skills.",[203,1820,1822],{"id":1821},"where-claudemd-fits","Where CLAUDE.md Fits",[23,1824,1825],{},"A CLAUDE.md placed at the project root is auto-loaded by Claude Code at session start. Use it to capture \"what this project is\":",[217,1827,1829],{"className":219,"code":1828,"language":221,"meta":222,"style":222},"# Project: MyApp\n\n## Stack\n- Nuxt 4 (Nuxt Content 3, Vue 3 Composition API)\n- Tailwind CSS v4, shadcn/ui\n- Deployed on Vercel\n\n## Rules\n- Always make sure the build passes before committing.\n- TypeScript strict mode is required.\n- Don't use MDX components (Nuxt Content's CommonMark only).\n\n## Don't\n- Leave console.log calls in committed code.\n- Use the any type.\n",[121,1830,1831,1835,1839,1844,1848,1852,1857,1861,1866,1871,1876,1881,1885,1890,1895],{"__ignoreMap":222},[226,1832,1833],{"class":228,"line":229},[226,1834,734],{},[226,1836,1837],{"class":228,"line":235},[226,1838,268],{"emptyLinePlaceholder":267},[226,1840,1841],{"class":228,"line":241},[226,1842,1843],{},"## Stack\n",[226,1845,1846],{"class":228,"line":247},[226,1847,748],{},[226,1849,1850],{"class":228,"line":253},[226,1851,753],{},[226,1853,1854],{"class":228,"line":259},[226,1855,1856],{},"- Deployed on Vercel\n",[226,1858,1859],{"class":228,"line":264},[226,1860,268],{"emptyLinePlaceholder":267},[226,1862,1863],{"class":228,"line":271},[226,1864,1865],{},"## Rules\n",[226,1867,1868],{"class":228,"line":277},[226,1869,1870],{},"- Always make sure the build passes before committing.\n",[226,1872,1873],{"class":228,"line":282},[226,1874,1875],{},"- TypeScript strict mode is required.\n",[226,1877,1878],{"class":228,"line":288},[226,1879,1880],{},"- Don't use MDX components (Nuxt Content's CommonMark only).\n",[226,1882,1883],{"class":228,"line":293},[226,1884,268],{"emptyLinePlaceholder":267},[226,1886,1887],{"class":228,"line":299},[226,1888,1889],{},"## Don't\n",[226,1891,1892],{"class":228,"line":305},[226,1893,1894],{},"- Leave console.log calls in committed code.\n",[226,1896,1897],{"class":228,"line":310},[226,1898,1899],{},"- Use the any type.\n",[23,1901,1902],{},"The split between CLAUDE.md and Skills is clean: CLAUDE.md is \"the context of this project,\" Skills are \"how to do this task.\" Together, you get an agent that understands the project and executes specific tasks correctly.",[203,1904,1906],{"id":1905},"site-generation-workflow-with-nextjs-nuxt","Site Generation Workflow With Next.js / Nuxt",[23,1908,1909],{},"A workflow that actually works in practice:",[813,1911,1912,1918,1925,1933],{},[816,1913,1914,1917],{},[26,1915,1916],{},"Create CLAUDE.md",": stack, naming conventions, things to avoid",[816,1919,1920,827,1923],{},[26,1921,1922],{},"Add an official or custom Skill",[121,1924,830],{},[816,1926,1927,827,1930],{},[26,1928,1929],{},"Sanity-check requirements in plan mode",[121,1931,1932],{},"claude --plan \"I want a landing page that looks like X\"",[816,1934,1935,1938],{},[26,1936,1937],{},"Implement iteratively",": don't ask for the whole thing at once — go section by section",[23,1940,1941],{},"Step 3 is the critical one. Asking for an implementation directly sometimes produces \"code that solves the wrong problem.\" Have Claude explore the existing codebase first, identify the change locations, impact range, and edge cases, and surface them as a plan. Once the plan looks right, just say yes — that alone prevents most implementation mistakes.",[31,1943],{},[34,1945,1947],{"id":1946},"writing-video-as-code-with-claude-code-remotion","Writing Video as Code With Claude Code + Remotion",[23,1949,1950,1951,1953],{},"The idea of \"managing video in code\" lands naturally for front-end engineers. Remotion is exactly that — a React-based video framework where ",[121,1952,859],{}," returns the current frame number and you describe animation in code. Combined with Claude Code, it produces a \"write video by prompt\" workflow.",[203,1955,1378],{"id":1956},"setup-1",[217,1958,1960],{"className":342,"code":1959,"language":344,"meta":222,"style":222},"# Create a Remotion project\nnpx create-video@latest my-video-project\ncd my-video-project\n\n# Install Agent Skills (best-practices bundle from the Remotion team)\nnpx skills add remotion-dev/skills\n",[121,1961,1962,1967,1975,1981,1985,1990],{"__ignoreMap":222},[226,1963,1964],{"class":228,"line":229},[226,1965,1966],{"class":351},"# Create a Remotion project\n",[226,1968,1969,1971,1973],{"class":228,"line":235},[226,1970,878],{"class":357},[226,1972,881],{"class":361},[226,1974,884],{"class":361},[226,1976,1977,1979],{"class":228,"line":241},[226,1978,889],{"class":566},[226,1980,884],{"class":361},[226,1982,1983],{"class":228,"line":247},[226,1984,268],{"emptyLinePlaceholder":267},[226,1986,1987],{"class":228,"line":253},[226,1988,1989],{"class":351},"# Install Agent Skills (best-practices bundle from the Remotion team)\n",[226,1991,1992,1994,1996,1998],{"class":228,"line":259},[226,1993,878],{"class":357},[226,1995,907],{"class":361},[226,1997,362],{"class":361},[226,1999,912],{"class":361},[23,2001,2002],{},"Once the skills are in place, Claude Code understands Remotion conventions and generates code with the right component structure. There are 38+ categories covering animation, 3D, captions, audio, charts, and transitions.",[203,2004,2006],{"id":2005},"example-prompt","Example Prompt",[23,2008,2009],{},"There's a knack to writing good prompts: declare the concrete numbers — resolution, duration — up front, and make scene boundaries explicit:",[217,2011,2014],{"className":2012,"code":2013,"language":927,"meta":222},[925],"Create a 1920x1080px, 30fps, 10-second video.\n\n0–2s: Logo fades in (centered, white background)\n2–6s: Three features slide in one by one (left to right)\n        - \"Fast\" + lightning icon\n        - \"Safe\" + shield icon\n        - \"Easy\" + check icon\n6–9s: CTA button scales up: \"Try it now\"\n9–10s: Fade out\n\nColors: bg #0a0a0a, accent #7c3aed, text white\n",[121,2015,2013],{"__ignoreMap":222},[23,2017,2018],{},"Preview the generated code live in Remotion Studio, and once it looks right, render:",[217,2020,2022],{"className":342,"code":2021,"language":344,"meta":222,"style":222},"# Preview\nnpx remotion studio\n\n# Render (MP4)\nnpx remotion render MyComposition out/video.mp4\n",[121,2023,2024,2029,2037,2041,2046],{"__ignoreMap":222},[226,2025,2026],{"class":228,"line":229},[226,2027,2028],{"class":351},"# Preview\n",[226,2030,2031,2033,2035],{"class":228,"line":235},[226,2032,878],{"class":357},[226,2034,949],{"class":361},[226,2036,952],{"class":361},[226,2038,2039],{"class":228,"line":241},[226,2040,268],{"emptyLinePlaceholder":267},[226,2042,2043],{"class":228,"line":247},[226,2044,2045],{"class":351},"# Render (MP4)\n",[226,2047,2048,2050,2052,2054,2056],{"class":228,"line":253},[226,2049,878],{"class":357},[226,2051,949],{"class":361},[226,2053,970],{"class":361},[226,2055,973],{"class":361},[226,2057,976],{"class":361},[203,2059,2061],{"id":2060},"what-remotion-is-and-isnt-good-at","What Remotion Is and Isn't Good At",[39,2063,2064,2076],{},[42,2065,2066],{},[45,2067,2068,2070,2073],{},[48,2069,1771],{},[48,2071,2072],{},"Good Fit",[48,2074,2075],{},"Not a Good Fit",[55,2077,2078,2088,2098,2108,2119],{},[45,2079,2080,2083,2086],{},[60,2081,2082],{},"Product demo videos",[60,2084,2085],{},"◎ Easy to wire up to data and update dynamically",[60,2087,1007],{},[45,2089,2090,2093,2096],{},[60,2091,2092],{},"Data visualization",[60,2094,2095],{},"◎ Pass numbers in dynamically through code",[60,2097,1007],{},[45,2099,2100,2103,2106],{},[60,2101,2102],{},"Vertical social clips",[60,2104,2105],{},"◎ Just specify 9:16",[60,2107,1007],{},[45,2109,2110,2113,2116],{},[60,2111,2112],{},"Talking-head videos",[60,2114,2115],{},"△ Specialized tools like HeyGen win",[60,2117,2118],{},"Complex lip-sync",[45,2120,2121,2124,2127],{},[60,2122,2123],{},"Long-form footage (10+ min)",[60,2125,2126],{},"△ Scene management gets unwieldy",[60,2128,1007],{},[23,2130,2131],{},"Because rendering happens locally, watermarks and credit caps from cloud video generators don't apply at all. Treating \"video as a build artifact\" — auto-rebuilding the video in CI/CD whenever the product changes — is already showing up in real-world pipelines.",[31,2133],{},[34,2135,2137],{"id":2136},"pitfalls-and-how-to-avoid-them","Pitfalls and How to Avoid Them",[23,2139,2140],{},"Here, honestly, are the things that tripped me up.",[203,2142,139],{"id":2143},"mcp",[23,2145,2146,2149,2150,2152,2153,2155],{},[26,2147,2148],{},"Errors when using SSE transport."," The March 2025 MCP spec update deprecated SSE (Server-Sent Events). For remote connections, always use ",[121,2151,692],{},". With FastMCP, switching is just ",[121,2154,1075],{},".",[23,2157,2158,2161],{},[26,2159,2160],{},"Multiple MCP servers slowing startup."," A 5-server, 58-tool setup can push context consumption past 55,000 tokens. Anthropic's Tool Search feature (on-demand loading) cuts that by about 85%. Avoid monolithic servers — split by purpose into smaller ones.",[23,2163,2164,2167,2168,2171],{},[26,2165,2166],{},"Security."," Audit your servers against the OWASP MCP Top 10 (published in 2025). Watch especially for prompt injection (malicious instructions hidden in a tool's ",[121,2169,2170],{},"description","). Code-review community servers before using them.",[203,2173,136],{"id":2174},"skills",[23,2176,2177,2180,2181,2183],{},[26,2178,2179],{},"The skill doesn't trigger when expected."," A vague ",[121,2182,2170],{}," field means Claude won't load the skill. Use strong language like \"whenever the user mentions X, use this skill.\"",[23,2185,2186,2189,2190,2192],{},[26,2187,2188],{},"Skills get ignored near the context limit."," Once a session crosses 70–85% of the context window, accuracy drops. Use ",[121,2191,1107],{}," to compress context, or continue in a fresh session.",[203,2194,2196],{"id":2195},"website-generation","Website Generation",[23,2198,2199,2202],{},[26,2200,2201],{},"\"Build the whole thing at once.\""," \"Build me an entire e-commerce site\" has a very high failure rate. Iterate component by component, page by page. Confirm direction in plan mode before implementation.",[23,2204,2205,2208],{},[26,2206,2207],{},"Committing generated code as-is."," A 2025 ACM study suggests LLM-written code has roughly 1.75× more logic errors than human-written code. Make sure tests pass before committing.",[203,2210,2212],{"id":2211},"remotion","Remotion",[23,2214,2215,2218],{},[26,2216,2217],{},"Trying to build something complex from the start."," Start with a 5-second sample, then layer up: background color → text → animation → multiple scenes.",[23,2220,2221,2224],{},[26,2222,2223],{},"Vague directions."," \"80px,\" \"30 frames (1s),\" and other concrete numbers boost Claude Code's accuracy. \"Big font\" and \"slow fade\" hurt it.",[23,2226,2227,2230],{},[26,2228,2229],{},"Character appearance changes between scenes."," Remotion references static assets directly in code, so pin the image files. For complex character video, pair with a specialized tool like HeyGen.",[31,2232],{},[34,2234,2236],{"id":2235},"wrap-up-and-next-steps","Wrap-up and Next Steps",[39,2238,2239,2252],{},[42,2240,2241],{},[45,2242,2243,2246,2249],{},[48,2244,2245],{},"Action",[48,2247,2248],{},"Priority",[48,2250,2251],{},"Time Required",[55,2253,2254,2265,2275,2288],{},[45,2255,2256,2259,2262],{},[60,2257,2258],{},"Build one MCP server (internal API integration)",[60,2260,2261],{},"High",[60,2263,2264],{},"1–2 hours",[45,2266,2267,2270,2272],{},[60,2268,2269],{},"Add CLAUDE.md to your project",[60,2271,2261],{},[60,2273,2274],{},"30 minutes",[45,2276,2277,2282,2285],{},[60,2278,2279,2280],{},"Try ",[121,2281,830],{},[60,2283,2284],{},"Medium",[60,2286,2287],{},"10 minutes",[45,2289,2290,2293,2295],{},[60,2291,2292],{},"Build a 30-second demo video in Remotion",[60,2294,2284],{},[60,2296,2297],{},"2–3 hours",[23,2299,2300],{},"With Claude Code generating 4% of all commits and Spotify's engineers reportedly writing no code by hand since December 2025, fluency with these tools is shifting from \"nice to have\" to \"you'll fall behind without it.\" Start with one MCP server or one Skill — automating \"the thing I'm tired of explaining every time\" is the shortest path in.",[2302,2303,2304],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}html pre.shiki code .sAOxA, html code.shiki .sAOxA{--shiki-default:#50FA7B}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .sY8FZ, html code.shiki .sY8FZ{--shiki-default:#8BE9FE}html pre.shiki code .sLL85, html code.shiki .sLL85{--shiki-default:#8BE9FD}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}",{"title":222,"searchDepth":235,"depth":235,"links":2306},[2307,2308,2311,2317,2321,2326,2332,2333,2334,2337,2343,2347,2352,2358],{"id":36,"depth":235,"text":37},{"id":102,"depth":235,"text":103,"children":2309},[2310],{"id":205,"depth":241,"text":206},{"id":329,"depth":235,"text":330,"children":2312},[2313,2314,2315,2316],{"id":339,"depth":241,"text":339},{"id":383,"depth":241,"text":384},{"id":543,"depth":241,"text":544},{"id":656,"depth":241,"text":656},{"id":710,"depth":235,"text":711,"children":2318},[2319,2320],{"id":720,"depth":241,"text":721},{"id":807,"depth":241,"text":808},{"id":852,"depth":235,"text":853,"children":2322},[2323,2324,2325],{"id":863,"depth":241,"text":339},{"id":918,"depth":241,"text":918},{"id":979,"depth":241,"text":979},{"id":1056,"depth":235,"text":1056,"children":2327},[2328,2329,2330,2331],{"id":1062,"depth":241,"text":1063},{"id":1091,"depth":241,"text":1092},{"id":1111,"depth":241,"text":1111},{"id":1126,"depth":241,"text":1127},{"id":1150,"depth":235,"text":1150},{"id":1236,"depth":235,"text":1237},{"id":1295,"depth":235,"text":1296,"children":2335},[2336],{"id":1399,"depth":241,"text":1400},{"id":1494,"depth":235,"text":1495,"children":2338},[2339,2340,2341,2342],{"id":1504,"depth":241,"text":1378},{"id":1538,"depth":241,"text":1539},{"id":1672,"depth":241,"text":1673},{"id":1758,"depth":241,"text":1759},{"id":1811,"depth":235,"text":1812,"children":2344},[2345,2346],{"id":1821,"depth":241,"text":1822},{"id":1905,"depth":241,"text":1906},{"id":1946,"depth":235,"text":1947,"children":2348},[2349,2350,2351],{"id":1956,"depth":241,"text":1378},{"id":2005,"depth":241,"text":2006},{"id":2060,"depth":241,"text":2061},{"id":2136,"depth":235,"text":2137,"children":2353},[2354,2355,2356,2357],{"id":2143,"depth":241,"text":139},{"id":2174,"depth":241,"text":136},{"id":2195,"depth":241,"text":2196},{"id":2211,"depth":241,"text":2212},{"id":2235,"depth":235,"text":2236},"Claude Codeのスキルシステム・MCPサーバー構築・ウェブサイト生成・Remotion動画制作まで、エンジニアが実際に業務で使える知識を一冊にまとめた。コードと具体的な数字で語る実践ガイド。","md",{"date":2362,"image":2363,"alt":2364,"tags":2365,"tagsEn":2369,"published":267},"3rd May 2026","/blogs-img/blog-claude-skills-mcp-web-video-engineer-guide.png","Claude Skills・MCP・Remotionによるエンジニア向け実践ガイド",[2366,139,2367,2212,2368],"Claude Code","AI Engineering","チュートリアル",[2366,139,2367,2212,2370],"Tutorial","/blogs/13-claude-skills-mcp-web-video-engineer-guide",{"title":6,"description":2359},"blogs/13-claude-skills-mcp-web-video-engineer-guide","vyT2rXr77YItfIKqHlXYuCO0y6CtyVSlEyQEqF2WhG8",1777811249773]