|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="zh-Hant"> |
| 3 | +<head> |
| 4 | +<meta charset="UTF-8"> |
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | +<title>安裝指南 · Install Guide · mattpocock-skills-zh-tw</title> |
| 7 | +<link rel="preconnect" href="https://fonts.googleapis.com"> |
| 8 | +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| 9 | +<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Noto+Serif+TC:wght@400;600;700&display=swap" rel="stylesheet"> |
| 10 | +<link rel="stylesheet" href="assets/site.css"> |
| 11 | +</head> |
| 12 | +<body> |
| 13 | +<div class="container"> |
| 14 | +<div class="back-link"><a href="index.html">← 首頁</a><a href="map.html">全景圖</a><a href="learning-path.html">學習路線</a></div> |
| 15 | +<header> |
| 16 | + <h1>安裝指南</h1> |
| 17 | + <div class="subtitle">Install Guide · 把這包技能裝進 OpenCode 或 TRAE（IDE / CLI）</div> |
| 18 | + <div class="badge-line">裝好之後，每個 repo 先跑一次 /setup-matt-pocock-skills，再從 /ask-matt 開始</div> |
| 19 | +</header> |
| 20 | +<div class="guide"> |
| 21 | + |
| 22 | +<h2>這是什麼</h2> |
| 23 | +<p>這是一組「給 AI 工程師用的代理技能」的繁體中文版。技能就是一段可重用的指令集，裝進你的 agent（OpenCode / TRAE / Claude Code…）之後，agent 就能執行 <code>/grill-with-docs</code>、<code>/tdd</code>、<code>/code-review</code> 這類工作流。<strong>本 repo 是翻譯版：只改說明文字，指令、路徑、技能名全部照原樣，所以安裝方式跟上游完全一樣。</strong></p> |
| 24 | + |
| 25 | +<div class="embed-panel"> |
| 26 | + <div class="embed-head"> |
| 27 | + <span class="embed-title">📦 shumingyang-opencode/mattpocock-skills-zh-tw</span> |
| 28 | + <a class="btn" href="https://github.com/shumingyang-opencode/mattpocock-skills-zh-tw" target="_blank" rel="noopener">在 GitHub 開啟 ↗</a> |
| 29 | + </div> |
| 30 | + <div id="repo-status" class="repo-status">正在載入 GitHub repo…</div> |
| 31 | + <div id="repo-readme" class="repo-readme"></div> |
| 32 | + <div id="repo-tree" class="repo-tree"></div> |
| 33 | +</div> |
| 34 | + |
| 35 | +<h2>方式一（推薦）：skills.sh 一鍵安裝</h2> |
| 36 | +<p><a href="https://skills.sh" target="_blank" rel="noopener">skills.sh</a> 是開放的技能安裝器，支援 OpenCode 與 TRAE。在終端機執行：</p> |
| 37 | +<h3>安裝到 OpenCode</h3> |
| 38 | +<pre>npx skills@latest add shumingyang-opencode/mattpocock-skills-zh-tw -a opencode</pre> |
| 39 | +<h3>安裝到 TRAE（國際版）</h3> |
| 40 | +<pre>npx skills@latest add shumingyang-opencode/mattpocock-skills-zh-tw -a trae</pre> |
| 41 | +<h3>安裝到 TRAE 中國版</h3> |
| 42 | +<pre>npx skills@latest add shumingyang-opencode/mattpocock-skills-zh-tw -a trae-cn</pre> |
| 43 | +<p class="hint">加上 <code>-g</code> 表示裝到全域（所有專案都可用）；不加則裝進目前專案。想一次裝到兩個 agent 就同時寫 <code>-a opencode -a trae</code>。</p> |
| 44 | +<ul> |
| 45 | + <li>互動安裝時會問要裝哪些技能——<strong>務必勾選 <code>setup-matt-pocock-skills</code></strong>，它是其他技能的前置。</li> |
| 46 | + <li>可以選擇 symlink（推薦，方便日後更新）或 copy 兩種裝法。</li> |
| 47 | + <li>日後更新：<code>npx skills update</code>。</li> |
| 48 | + <li>想先看看有哪些技能再裝：<code>npx skills add shumingyang-opencode/mattpocock-skills-zh-tw --list</code></li> |
| 49 | +</ul> |
| 50 | + |
| 51 | +<h2>方式二：手動複製（OpenCode）</h2> |
| 52 | +<p>不習慣用安裝器的話，直接把技能資料夾複製進去。OpenCode 讀取技能的兩個位置：</p> |
| 53 | +<ul> |
| 54 | + <li>全域：<code>~/.config/opencode/skills/</code>（Windows 是 <code>C:\Users\<你>\.config\opencode\skills\</code>）</li> |
| 55 | + <li>專案：<code>.agents/skills/</code>（放在你的專案根目錄）</li> |
| 56 | +</ul> |
| 57 | +<p>先把 repo 抓下來，再把 <code>skills/</code> 底下每個技能資料夾複製進去。PowerShell 範例：</p> |
| 58 | +<pre># 抓 repo |
| 59 | +git clone https://github.com/shumingyang-opencode/mattpocock-skills-zh-tw.git |
| 60 | +cd mattpocock-skills-zh-tw |
| 61 | + |
| 62 | +# 複製全部技能到 OpenCode 全域目錄 |
| 63 | +Copy-Item -Path "skills\*\*" -Destination "$env:USERPROFILE\.config\opencode\skills\" -Recurse -Force</pre> |
| 64 | +<p class="hint">複製後，OpenCode 重新載入（或重開）就會看到這些技能。</p> |
| 65 | + |
| 66 | +<h2>方式三：手動複製（TRAE）</h2> |
| 67 | +<p>TRAE 讀取技能的位置（參見 <a href="https://docs.trae.ai/ide/skills" target="_blank" rel="noopener">TRAE Skills 文件</a>）：</p> |
| 68 | +<ul> |
| 69 | + <li>全域（國際版）：<code>~/.trae/skills/</code></li> |
| 70 | + <li>全域（中國版）：<code>~/.trae-cn/skills/</code></li> |
| 71 | + <li>專案：<code>.trae/skills/</code></li> |
| 72 | +</ul> |
| 73 | +<pre># 複製全部技能到 TRAE 全域目錄（國際版範例） |
| 74 | +Copy-Item -Path "skills\*\*" -Destination "$env:USERPROFILE\.trae\skills\" -Recurse -Force</pre> |
| 75 | + |
| 76 | +<h2>開始使用</h2> |
| 77 | +<ol> |
| 78 | + <li>在 agent 中、每個 repo 執行一次 <code>/setup-matt-pocock-skills</code>——設定 issue tracker、分診標籤與文件位置。</li> |
| 79 | + <li>不知道下一步該用哪個技能？輸入 <code>/ask-matt</code>，它會依你的處境推薦。</li> |
| 80 | + <li>本網站就是這包技能的閱讀版：<a href="map.html">全景圖</a>看關係，<a href="learning-path.html">學習路線</a>照順序學，每個技能頁都是中英逐段對照。</li> |
| 81 | +</ol> |
| 82 | + |
| 83 | +<h2>注意</h2> |
| 84 | +<ul> |
| 85 | + <li>這是<strong>翻譯版</strong>；想用英文原版，請安裝上游：<code>npx skills@latest add mattpocock/skills</code>。</li> |
| 86 | + <li><strong>不要兩套都裝</strong>——每個技能會出現兩次。</li> |
| 87 | + <li>翻譯只動說明文字，若遇問題請先比對上游行為。</li> |
| 88 | +</ul> |
| 89 | + |
| 90 | +</div> |
| 91 | +<script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js"></script> |
| 92 | +<script> |
| 93 | +(async function () { |
| 94 | + const REPO = "shumingyang-opencode/mattpocock-skills-zh-tw"; |
| 95 | + const status = document.getElementById("repo-status"); |
| 96 | + const readme = document.getElementById("repo-readme"); |
| 97 | + const tree = document.getElementById("repo-tree"); |
| 98 | + try { |
| 99 | + const r = await fetch("https://api.github.com/repos/" + REPO + "/readme"); |
| 100 | + if (r.ok) { |
| 101 | + const j = await r.json(); |
| 102 | + const md = atob(j.content.replace(/\s/g, "")); |
| 103 | + readme.innerHTML = marked.parse(md); |
| 104 | + } |
| 105 | + } catch (e) {} |
| 106 | + try { |
| 107 | + const t = await fetch("https://api.github.com/repos/" + REPO + "/git/trees/main?recursive=1"); |
| 108 | + if (t.ok) { |
| 109 | + const j = await t.json(); |
| 110 | + const files = (j.tree || []).filter(x => x.type === "blob"); |
| 111 | + const dirs = {}; |
| 112 | + for (const f of files) { |
| 113 | + const parts = f.path.split("/"); |
| 114 | + const key = parts.length > 1 ? parts[0] + "/" : ""; |
| 115 | + (dirs[key] = dirs[key] || []).push(f.path); |
| 116 | + } |
| 117 | + let h = '<div class="tree-group">'; |
| 118 | + for (const d of Object.keys(dirs).filter(k => k).sort()) { |
| 119 | + h += '<details open><summary>📁 ' + d + '</summary><ul>'; |
| 120 | + for (const p of dirs[d].sort()) { |
| 121 | + const n = p.split("/").pop(); |
| 122 | + h += '<li><a href="https://github.com/' + REPO + '/blob/main/' + p + '" target="_blank" rel="noopener">' + n + '</a></li>'; |
| 123 | + } |
| 124 | + h += '</ul></details>'; |
| 125 | + } |
| 126 | + h += '</div>'; |
| 127 | + tree.innerHTML = h; |
| 128 | + status.textContent = "✓ 已載入 GitHub repo 內容"; |
| 129 | + status.style.color = "var(--emerald)"; |
| 130 | + } |
| 131 | + } catch (e) {} |
| 132 | +})(); |
| 133 | +</script> |
| 134 | +<footer> |
| 135 | + <div>這是 <a href="https://github.com/mattpocock/skills">mattpocock/skills</a> 的繁體中文翻譯學習站——翻譯只動說明文字，指令、路徑、技能名一律照原樣，安裝照常可用。</div> |
| 136 | + <div>內容 © <a href="https://github.com/mattpocock">Matt Pocock</a>（MIT License）· 使用 OpenCode 與 deepseek-v4-flash 進行繁中翻譯與網站設計建置</div> |
| 137 | +</footer> |
| 138 | + |
| 139 | +</div> |
| 140 | +</body> |
| 141 | +</html> |
0 commit comments