/ 目錄 / 演練場 / Ay-Skills
← 全部伺服器 ↗ GitHub
● 社群 walidboulanouar ⚡ 即開即用

Ay-Skills

作者 walidboulanouar · walidboulanouar/Ay-Skills

AY Automate 的 10 技能套件 — React/Tailwind 產出物、MCP 客戶端、Remotion 影片、Excalidraw、Claude SEO、NotebookLM 等。

來自 walidboulanouar / AY Automate 的廣泛技能集合：artifacts-builder（React + Tailwind + shadcn/ui 打包成獨立 HTML）、mcp-client（通用 MCP 連接器，支援 Python 執行）、remotion（React 影片）、skill-creator、notebooklm（透過瀏覽器自動化操作 Google NotebookLM）、ui-ux-pro-max（設計系統規範）、agent-browser（具登入持久性的瀏覽器自動化）、claude-seo（DataForSEO MCP 整合）、superpowers（代理式 TDD 流程）、excalidraw-diagram。

▶ 觀看演示 📦 安裝 💡 使用場景

為什麼要用

核心特性

即時演示

實際使用效果

ay-skill.replay ▶ 就緒
0/0

安裝

作者儲存庫 · Claude Skills 官方文件

使用場景

實戰用法： Ay-Skills

使用 React + shadcn 建立可分享的獨立 HTML 產出物

👤 想要展示小型 UI 卻不想部署的開發者 ⏱ ~30 min beginner

何時使用： 你想交給別人一個可以離線使用的單一 .html 檔案。

步驟
  1. 描述產出物內容
    artifacts-builder: a single-page pricing calculator with 3 tiers, React + shadcn cards, Tailwind.✓ 已複製
    → Claude 產出包含內嵌 CSS/JS 的打包 HTML 檔案
  2. 調整視覺設計
    Use ui-ux-pro-max guidelines — apply the accent palette to the CTA.✓ 已複製
    → 視覺更精緻、符合設計系統的版本

結果： 單一檔案，雙擊即可開啟，在任何地方都能運作。

使用 agent-browser 自動化需要登入的任務

👤 想避免不穩定 Selenium 腳本的工程師 ⏱ ~30 min intermediate

何時使用： 你需要 Claude 操作需要驗證的網頁應用程式，並希望保留登入狀態。

步驟
  1. 建立持久性工作階段
    agent-browser: open mysaas.com, log in (I'll do 2FA), save session.✓ 已複製
    → 工作階段已儲存，後續請求可直接複用
  2. 執行自動化任務
    Now download last month's invoices from the billing page.✓ 已複製
    → 檔案已下載至目前工作目錄

結果： 可跨工作階段執行的自動化流程，不需反覆重新驗證身份。

注意事項
  • 網站服務條款禁止自動化操作 — 請先確認服務條款 — 瀏覽器自動化是工具，不代表有使用授權
搭配使用： filesystem

組合

與其他 MCP 搭配，撬動十倍槓桿

ay-skill + filesystem

將 artifacts-builder 的產出直接儲存到共用資料夾

Build the artifact and save to ~/Dropbox/demos/.✓ 已複製
ay-skill + github

一步將產出物發布為 GitHub Pages 頁面

Build the artifact, commit to gh-pages branch, push.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
artifacts-builder UI description 想要可分享的單一檔案展示範例時 0
mcp-client target MCP server + task 需要從單一技能協調多個 MCP 時 0
remotion scene description + assets 需要程式化生成影片時 0
agent-browser URL + actions 需要操作需要驗證或大量使用 JS 的網站時 0
claude-seo URL or keyword 進行 SEO 稽核，可選用付費資料來源時 0 local, paid if DataForSEO enabled
superpowers feature intent 開發複雜功能且適合採用結構化 TDD 流程時 0

成本與限制

運行它的成本

API 配額
技能本身不需要 API 配額
每次呼叫 Token 數
依子技能不同差異很大
費用
免費 — 技能為本機檔案。DataForSEO（由 claude-seo 選用）為付費服務。
提示
如果只用到 3 個子技能，不要啟用全部 10 個 — 上下文開銷會累積。

安全

權限、密鑰、影響範圍

憑證儲存： 技能檔案中不含任何憑證。agent-browser 會儲存工作階段檔案；claude-seo 可能需要 DataForSEO 金鑰。
資料出站： 依子技能而定 — agent-browser 和 claude-seo 會連線至外部網站

故障排查

常見錯誤與修復

Wrong trigger keywords — mcp-client picks the wrong MCP

請在提示中明確指定目標 MCP。

替代方案

Ay-Skills 對比其他方案

替代方案何時用它替代權衡
excalidraw-skill (Agents365)只需要繪製圖表功能時功能較單一；不包含其他 9 個 AY 子技能
skills-skill-9想要以產品開發為主的技能，而非 UI/瀏覽器操作技能類別的側重點不同

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills