sc-cc-plugin

Plugin sc-cc-plugin in dannychou7911/sc-cc-plugin. Commands read from the repo's manifest — 10 days ago.

Skills (34)

• a11y-debugging

  Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.

• chrome-devtools

  Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests. This skill does not apply to `--slim` mode (MCP configuration).

• code-review-and-quality

  Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to assess code quality across multiple dimensions before it enters the main branch. Use when asked to review a diff or a pull request, even when t

• code-review

  使用者代碼審查時，使用本技能。

• cookie-debugging

  Uses Chrome DevTools MCP for inspecting, debugging, and testing cookies, session state, authentication issues, and cookie consent compliance. Use when diagnosing 401/403 errors, authentication redirects, session expiration, Cookie/Set-Cookie header issues, cookie banner consent conformance, or third

• create-project-instructions

  根據 repository 的已查證內容建立或重整專案級 CLAUDE.md 或 AGENTS.md，涵蓋架構邊界、工作流程、驗證命令與修改限制。使用者要求產生、初始化、補完或重寫專案指令檔時使用；不適用於全域個人偏好、單次任務提示詞或單純審閱既有規則。

• debug-optimize-lcp

  Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the

• explain

  解釋一段已經鎖定範圍的程式碼——某個檔案、函式、class、diff、PR，或使用者直接貼上的片段。依固定順序輸出（一句結論 → 資料流 → 關鍵行 → 注意點 → 可追問方向），刻意留白等使用者追問，而不是一次把所有細節倒完。Use this skill whenever the user asks what a piece of code does, how a specific function/file/module works, why it was written that way, asks you to walk through a diff or review a PR, o

• explore

  探索陌生或大型 codebase，建立專案結構、入口點、跨檔案功能路徑、依賴邊界、既有慣例或改動前影響範圍的已查證地圖。Use when the user asks to understand a repository, trace a feature across multiple files, locate where a behavior is implemented, identify affected files before implementation, investigate project conventions, assess dependencies, or onboar

• git-worktree

  互動式管理 git worktree：建立指定分支的工作區、列出現有工作區、刪除工作區與本地分支。每個決策點都先詢問使用者，確認完整指令後才執行。僅供手動觸發：/git-worktree [create|remove|list] [分支名稱]

• i-have-adhd

  Shape output for a reader with ADHD: lead with the next action, number multi-step work, restate state across turns, suppress tangents, give specific time estimates, make wins visible. Invoke with /i-have-adhd; stays on until "stop adhd mode".

• java-coding-standards

  適用於 Spring Boot 與 Quarkus 服務的 Java 編碼標準：命名、不可變性、Optional 使用方式、Streams、例外處理、泛型、CDI、Reactive 模式與專案結構。會依框架自動套用對應慣例。

• memory-leak-debugging

  Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to capture, compare, or inspect heap snapshots with Chrome DevTools MCP memory tools.

• mermaid

  Generate Mermaid diagrams from user requirements. Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and 18 more diagram types.

• mr-review-criteria

  Merge Request 審閱回饋的評估判準與報告格式 — 採納程度分級、優先度分級、影響範圍檢查清單、修正方案原則與標準報告結構。凡是要評估 Code Review 意見、判斷 Reviewer Concern 是否成立、決定修正優先度、或產出 MR / PR 審閱分析報告時都要使用這個 Skill，包含 review comment 分析、code review 嚴重度分級、以及任何需要區分「Concern 是否成立」與「Solution 是否適合」的情境。

• mr-review-reply

  把已完成的審閱結果（code review、OpenSpec verify、security review、手動分析等）整理成語氣客氣、結構固定的留言， 透過 GitLab MCP 發佈到指定專案的 Merge Request。使用者說「use gitlab mcp 將審閱結果回應到 web/game-launcher mr!50」 「把 review 結果貼到 MR」「回覆審閱結果到 !50」「留言到 merge request」「post the review to MR」， 或剛完成審閱後只丟出專案路徑與 MR 編號時，都應使用本 skill，即使沒有明說「整理」或「留言」。 不適用於：

• obsidian-markdown

  Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other Obsidian-specific syntax. Use when working with .md files in Obsidian, or when the user mentions wikilinks, callouts, frontmatter, tags, embeds, or Obsidian notes. New files are written to `/Users/dann

• persist-ai-context

  建立、審閱與操作 `.ai/` 持久化專案脈絡層，使 handoff、延後處理的 follow-up 與歷史 archive 能跨 AI Agent、工具及工作階段延續，並與專案既有的 OpenSpec、Issue、ADR、規格或其他正式系統協作。當需要將此方法加入專案、從 `.ai/` 接續工作、建立或更新 handoff／follow-up／archive、遷移既有 `.ai` 結構，或審閱專案是否遵循此方法時使用。

• playwright-cli

  Automate browser interactions, test web pages and work with Playwright tests.

• postgres-patterns

  PostgreSQL database patterns for query optimization, schema design, indexing, and security. Based on Supabase best practices.

• prisma-expert

  Prisma ORM expert for schema design, migrations, query optimization, relations modeling, and database operations. Use PROACTIVELY for Prisma schema issues, migration problems, query performance, relation design, or database connection issues.

• review-comments

  依據 8 大核心原則審查程式碼的註解品質——解釋 Why 而非 What、說明魔法數字與 Hack 的原因、標示 Caveat 與副作用、TODO/FIXME 標籤規範、公開 API 合約文件、記錄未採納方案（Why Not）、連結外部脈絡、以及保持註解新鮮度。當使用者說「幫我審查/檢查/看一下這段程式碼的註解」、「這段程式碼有沒有文件」、「review my comments」、「這樣寫 OK 嗎」並貼上含有值得評估的註解的程式碼時，主動觸發此 Skill。進行 Code Review 且評估範圍包含文件品質時也應觸發。輸出為結構化審查報告，不修改程式碼。

• review-project-instructions

  審閱專案級 AGENTS.md 或 CLAUDE.md，判斷規則是否必要、可執行、適用範圍清楚且可驗證，並提出精簡修正建議。使用者要求 review、檢查、改善或重寫專案指令檔時使用；不適用於一般程式碼審閱或全域個人偏好設定。

• shadcn-vue

  shadcn-vue for Vue/Nuxt with Reka UI components and Tailwind. Use for accessible UI, Auto Form, data tables, charts, or encountering component imports, dark mode, Reka UI errors.

• site-reference

  擷取指定網站的各頁截圖（Desktop／Mobile）、版面區塊架構、功能清單與 UI/UX design token（色彩、字型、間距、圓角、陰影、斷點、元件樣式），產出一份可直接開啟的單檔 HTML 參考報告，作為模仿或重新設計該網站的依據；可選擇加入需求訪談欄位。只要使用者提供網址並想「擷取網站」「截圖整站」「分析網站結構／版面／設計語彙」「拆解別人的網站」「做 design token 盤點」「做競品網站參考」「把某網站整理成 sitemap＋截圖」，即使沒有明說要 HTML 報告，也應使用此 skill。

• spec-recovery

  從棕地專案（brownfield project）的既有程式碼中回推、產生、補齊規格文件。 適用於任何前端（Vue / React / Angular / 任意框架）與後端（Node.js / Python / Go / 任意語言）專案， 不限定框架或語言。 當使用者提到「回推規格」、「補規格書」、「產生規格文件」、「從 code 生成文件」、 「reverse engineer spec」、「recover specification」、「建立文件」、 「幫我寫規格」、「這段 code 的規格是什麼」、「分析這個模組」， 或者使用者給了一段程式碼或一個專案目錄要求產出文件時，都應觸發本技能。

• strategic-compact

  Suggests manual context compaction at logical intervals to preserve context through task phases rather than arbitrary auto-compaction.

• sync-branch-to-develop

  在同時維護兩條長期線（master/main 與 develop）的專案裡，把某條線上的開發分支（feat/*、fix/* 等）以 cherry-pick 搬到另一條線的同名分支（預設加 dev/ 前綴），並用 range-diff 驗證兩邊 commit 內容一致。只搬 commit，絕不用 merge 或 rebase，因為那會把兩條線的既有差異一併帶過去。當使用者提到「同步到 develop」「develop 也要一份」「把這個分支撿到 develop」「cherry-pick 到另一條線」「補 dev/ 分支」「兩條線都要有這個修改」，或在完成一個 feat/fix 分支後問「接下來還

• tailwind-patterns

  Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, and dark mode support. Use when building UI components, creating landing pages, styling forms, impl

• tdd-workflow-nestjs

  Use this skill when working on NestJS projects — writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests tailored for NestJS.

• test-driven-development

  Drives development with tests using the red-green-refactor loop. Use when implementing any logic, fixing any bug, or changing any behavior. Use when you need to prove that code works, when a bug report arrives, or when you're about to modify existing functionality.

• troubleshooting

  Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when list_pages, new_page, or navigate_page fail, or when the server initialization fails.

• vue-pattern

  Vue 官方 Style Guide 的規則知識庫，涵蓋 Priority A–D 共 26 條規則（多字元件命名、詳細 prop 定義、keyed v-for、避免 v-if 與 v-for 同元素、scoped 樣式、元件檔案組織與命名 casing、self-closing、多屬性換行、模板簡單表達式、computed 拆分、options/屬性順序、避免隱式父子通訊等），Composition API 與 Options API 範例並陳。撰寫或修改 Vue/Nuxt 程式碼時用來讓產出一開始就符合規範；審查既有 .vue 元件時用來找出違規。只要使用者在新增、修改、重構或審查 Vue

• vue-testing-best-practices

  Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

Slash commands (5)

• /sc-cc-plugin:code-review-cmd

  你是一名資深前端工程師，負責審閱使用 **Vue 2 / Nuxt 2 / JavaScript** 實作的程式碼。

• /sc-cc-plugin:commit

  使用 conventional commit 格式建立格式良好的 commit；除非使用者明確要求，否則預設不使用 emoji

• /sc-cc-plugin:review-mr

  分析指定專案 MR 的所有審閱回饋，驗證合理性並產出修正計畫

• /sc-cc-plugin:rewrite-comments

  改寫程式碼註解，著重 why 而非 what；冗餘者刪除、過期者修正、推斷不出意圖者標記請人補

• /sc-cc-plugin:squash-branch

  將目前分支自基準分支分歧後的所有 commits 合併為單一 commit，執行前先建立備份分支

Subagents (3)

• frontend-code-reviewer

  通用程式碼審閱專家，聚焦可讀性、可維護性、安全性與專案慣例等原則性問題，不限定特定框架或語言。 採信心度過濾，只回報高信心度（>80%）、真正重要的問題。框架專屬規則由 references/ 下的擴充檔補充。 <example> 情境：使用者剛實作完一個元件 user: "幫我審閱我剛寫的程式碼" assistant: "我用 frontend-code-reviewer agent 來審閱你的變更。" </example> <example> 情境：使用者修改了 API endpoint user: "幫我檢查這段有沒有安全性問題" assistant: "我用 frontend-code

• spec-scorer

  規格文件品質評分專家。獨立審閱 spec-recovery 產出的 L0-L4 規格文件，執行多維度評分（A）與可測試性評分（B，僅 L2），回傳結構化評分結果。避免 confirmation bias，與產出文件的主 agent 分離。差異驗證（C）由 spec-verifier agent 負責。

• spec-verifier

  規格文件差異驗證專家。獨立重讀原始碼盤點所有離散行為，比對 spec-recovery 產出的規格文件，計算覆蓋率並列出遺漏（C 評分）。與產出文件的主 agent 及 spec-scorer 分離；不指定 model 以繼承 session model，確保行為盤點的偵測力。

MCP servers (1)

• chrome-devtools

  runs: npx -y chrome-devtools-mcp@latest

Language servers (1)

• vue