/ ディレクトリ / プレイグラウンド / Ay-Skills
● コミュニティ 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(Python実行機能付きユニバーサルMCPコネクター)、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

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "ay-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/walidboulanouar/Ay-Skills",
        "~/.claude/skills/Ay-Skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "ay-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/walidboulanouar/Ay-Skills",
        "~/.claude/skills/Ay-Skills"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "ay-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/walidboulanouar/Ay-Skills",
        "~/.claude/skills/Ay-Skills"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "ay-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/walidboulanouar/Ay-Skills",
        "~/.claude/skills/Ay-Skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "ay-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/walidboulanouar/Ay-Skills",
        "~/.claude/skills/Ay-Skills"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "ay-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/walidboulanouar/Ay-Skills",
          "~/.claude/skills/Ay-Skills"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add ay-skill -- git clone https://github.com/walidboulanouar/Ay-Skills ~/.claude/skills/Ay-Skills

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: Ay-Skills

React + shadcnで共有可能なセルフコンテインドHTMLアーティファクトを構築する

👤 デプロイなしで小さなUIをデモしたい開発者 ⏱ ~30 min beginner

使うタイミング: オフラインで動作する単一の.htmlファイルを誰かに渡したいとき。

前提条件
  • スキルをクローン済み — git clone https://github.com/walidboulanouar/Ay-Skills ~/.claude/skills/Ay-Skills
フロー
  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.✓ コピーしました
    → デザインシステムと一貫した、より洗練されたバージョンが出力される

結果: ファイル1つ、ダブルクリックで開き、どこでも動作します。

agent-browserでログインが必要なタスクを自動化する

👤 不安定なSeleniumスクリプトを避けたいエンジニア ⏱ ~30 min intermediate

使うタイミング: 認証が必要なWebアプリを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と組み合わせて10倍の力を

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 1つのスキルから複数のMCPをオーケストレーションするとき 0
remotion scene description + assets プログラマティックなビデオ生成 0
agent-browser URL + actions 認証が必要なサイトやJSの多いサイト 0
claude-seo URL or keyword オプションの有料データを活用したSEO監査 ローカルは無料、DataForSEO有効化時は有料
superpowers feature intent 構造化されたTDDが効果的な複雑な機能の開発 0

コストと制限

運用コスト

APIクォータ
スキル自体にはなし
呼び出しあたりのトークン
サブスキルによって大きく異なります
金額
無料 — スキルはローカルファイルです。DataForSEO(claude-seoでオプション使用)は有料です。
ヒント
3つしか使わないなら10個すべてのサブスキルを有効にしないこと — コンテキストのオーバーヘッドが累積します。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: スキルファイル内に認証情報はありません。agent-browserはセッションファイルを保存します。claude-seoはDataForSEOキーが必要になる場合があります。
データ送信先: サブスキルに依存します — agent-browserとclaude-seoは外部サイトにアクセスします

トラブルシューティング

よくあるエラーと対処法

スキルが呼び出されない — Claudeがartifacts-builderを使わずにReactをインラインで記述する

サブスキルを名前で参照してください: 'use artifacts-builder to...'。

確認: ls ~/.claude/skills/Ay-Skills/
SKILL.md frontmatterが不正

各サブスキルには独自のSKILL.mdがあります。有効化されないものを確認してください。

確認: head ~/.claude/skills/Ay-Skills/artifacts-builder/SKILL.md
トリガーキーワードの誤り — mcp-clientが間違ったMCPを選択する

プロンプトでターゲットMCPを明示的に指定してください。

代替案

Ay-Skills 他との比較

代替案代わりに使う場面トレードオフ
excalidraw-skill (Agents365)ダイアグラム機能だけが必要なとき範囲が狭い。AYの他9つのサブスキルは含まれません
skills-skill-9UI/ブラウザ中心ではなくプロダクト構築向けスキルが欲しいときカテゴリの重点が異なります

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る