MCP и Скиллы для Вайбкодинга

🎨

Фронтенд

3 скилла

Frontend Design

Скилл Официальный Anthropic

Официальный скилл от Anthropic, который учит ИИ делать интерфейсы с характером — смелая типографика, продуманная цветовая система, акцентные анимации. Открытый SKILL.md из репозитория anthropics/claude-code — его можно подключить к любому ассистенту, который читает markdown-инструкции (Claude Code, Codex CLI).

Установка

Установи официальный скилл frontend-design от Anthropic из https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-design

# ── Claude Code ─────────────────────────
mkdir -p ~/.claude/skills/frontend-design
curl -fsSL -o ~/.claude/skills/frontend-design/SKILL.md \
  https://raw.githubusercontent.com/anthropics/claude-code/main/plugins/frontend-design/skills/frontend-design/SKILL.md

# ── Codex CLI ───────────────────────────
mkdir -p ~/.codex/skills/frontend-design
curl -fsSL -o ~/.codex/skills/frontend-design/SKILL.md \
  https://raw.githubusercontent.com/anthropics/claude-code/main/plugins/frontend-design/skills/frontend-design/SKILL.md

1

Скилл — это один файл SKILL.md в репозитории anthropics/claude-code. Формат общий для всех ассистентов, поддерживающих Agent Skills

2

Claude Code: положи файл в ~/.claude/skills/frontend-design/SKILL.md. Скилл подхватится автоматически и будет вызываться при задачах по фронтенду

3

Codex CLI: положи файл в ~/.codex/skills/frontend-design/SKILL.md — Codex использует тот же формат SKILL.md и читает глобальную папку скиллов

4

Перезапусти ассистент

taste-skill

Скилл

GitHub

Скилл от Leonxlnx, прокачивающий «чувство вкуса» у ИИ при разработке интерфейсов. Помогает принимать верные дизайн-решения: выбирать паттерны, типографику, отступы и цвета — ориентируясь на эстетику лучших продуктов. Устанавливается из открытого GitHub-репозитория.

Установка

Установи скилл из репозитория https://github.com/Leonxlnx/taste-skill

# Клонируем репозиторий (скиллы лежат в папке skills/)
git clone https://github.com/Leonxlnx/taste-skill /tmp/taste-skill

# ── Claude Code ─────────────────────────
mkdir -p ~/.claude/skills
cp -r /tmp/taste-skill/skills/* ~/.claude/skills/

# ── Codex CLI ───────────────────────────
mkdir -p ~/.codex/skills
cp -r /tmp/taste-skill/skills/* ~/.codex/skills/

1

Склонируй github.com/Leonxlnx/taste-skill. Все варианты скилла лежат в папке skills/ — каждая подпапка содержит свой SKILL.md

2

Claude Code: скопируй папки из skills/ в ~/.claude/skills/. Скиллы подхватятся автоматически

3

Codex CLI: формат SKILL.md совместим — скопируй папки в ~/.codex/skills/

4

Перезапусти ассистент

ui-ux-pro-max

Скилл

GitHub

Мощный скилл UI/UX-дизайна: 50+ стилей, 161 цветовая палитра, 57 пар шрифтов, 99 UX-рекомендаций, 25 типов графиков и поддержка 10 фреймворков — React, Next.js, Vue, Svelte, Tailwind, SwiftUI, Flutter и других. Один промпт — и ИИ генерирует дизайн-систему в любом стиле: от минимализма до роскошного.

Установка

Установи скилл ui-ux-pro-max из https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

# Клонируем репозиторий (скилл лежит в .claude/skills/)
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill /tmp/ui-ux-pro-max

# ── Claude Code ─────────────────────────
mkdir -p ~/.claude/skills
cp -r /tmp/ui-ux-pro-max/.claude/skills/* ~/.claude/skills/

# ── Codex CLI ───────────────────────────
mkdir -p ~/.codex/skills
cp -r /tmp/ui-ux-pro-max/.claude/skills/* ~/.codex/skills/

1

Склонируй nextlevelbuilder/ui-ux-pro-max-skill. Сам скилл лежит в папке .claude/skills/ui-ux-pro-max/ (формат SKILL.md)

2

Claude Code: скопируй папку скилла в ~/.claude/skills/ — она подхватится автоматически

3

Codex CLI: формат совместим — скопируй папку в ~/.codex/skills/

4

Перезапусти ассистент и опиши задачу: тип продукта, стек, желаемый стиль — ИИ сгенерирует дизайн-систему

✨

Эффекты и анимации

4 MCP

Magic UI MCP

MCP

GitHub

MCP-сервер для Magic UI — библиотеки готовых анимированных React-компонентов с поддержкой Framer Motion. Ассистент получает прямой доступ к каталогу компонентов и может находить, просматривать и автоматически устанавливать их в проект. Поддерживает Next.js, Vite и Create React App.

Установка

Добавь Magic UI MCP (npm-пакет @magicuidesign/mcp)

# ── Claude Code ─────────────────────────
claude mcp add magic-ui -- npx -y @magicuidesign/mcp@latest

# ── Codex CLI ───────────────────────────
codex mcp add magic-ui -- npx -y @magicuidesign/mcp@latest

1

Убедись, что установлен Node.js 18+ и npm

2

Запусти команду из вкладки «Терминал» — она зарегистрирует MCP-сервер в твоём ассистенте

3

Перезапусти ассистент

4

Попроси ассистент: «Найди компонент для анимации текста в Magic UI» — он сам найдёт и предложит установку

gsap-master

MCP

GitHub

MCP-сервер для работы с GSAP (GreenSock Animation Platform) — отраслевым стандартом веб-анимаций. Даёт ассистенту полную документацию GSAP, примеры кода и доступ к плагинам: Timeline, ScrollTrigger, Flip, TextPlugin, DrawSVG и другим. С ним ИИ создаёт сложные анимации без ошибок синтаксиса.

Установка

Добавь GSAP Master MCP (npm-пакет bruzethegreat-gsap-master-mcp-server)

# ── Claude Code ─────────────────────────
claude mcp add gsap-master -- npx -y bruzethegreat-gsap-master-mcp-server@latest

# ── Codex CLI ───────────────────────────
codex mcp add gsap-master -- npx -y bruzethegreat-gsap-master-mcp-server@latest

1

Запусти команду из вкладки «Терминал» — она зарегистрирует MCP-сервер в твоём ассистенте

2

Убедись, что GSAP установлен в проекте: npm install gsap

3

Перезапусти ассистент и попроси сделать анимацию — он будет использовать актуальную документацию GSAP

4

Если нужны платные плагины GSAP (ScrollTrigger и т.д.) — установи их через gsap.com/docs

shadcn/ui MCP

MCP

Документация

MCP-сервер для shadcn/ui — самой популярной библиотеки компонентов для React на базе Radix UI и Tailwind CSS. Ассистент получает доступ к каталогу компонентов, может проверять их пропсы и API, а также устанавливать нужные компоненты командой npx shadcn add прямо во время разработки.

Установка

Добавь shadcn/ui MCP (npm-пакет @jpisnice/shadcn-ui-mcp-server)

# ── Claude Code ─────────────────────────
claude mcp add shadcn-ui -- npx -y @jpisnice/shadcn-ui-mcp-server@latest

# ── Codex CLI ───────────────────────────
codex mcp add shadcn-ui -- npx -y @jpisnice/shadcn-ui-mcp-server@latest

1

Запусти команду из вкладки «Терминал»

2

Убедись, что в проекте уже инициализирован shadcn/ui: npx shadcn init

3

Перезапусти ассистент — теперь он будет знать все актуальные компоненты shadcn и сможет устанавливать их прямо в процессе работы

ReactBits MCP

MCP

Docs

MCP-сервер для ReactBits — коллекции анимированных React-компонентов с акцентом на визуальные эффекты: текстовые анимации, частицы, фоновые эффекты, переходы и нестандартные UI-элементы. Ассистент получает доступ ко всему каталогу компонентов и умеет интегрировать их в проект.

Установка

Добавь ReactBits MCP (npm-пакет reactbits-dev-mcp-server)

# ── Claude Code ─────────────────────────
claude mcp add reactbits -- npx -y reactbits-dev-mcp-server@latest

# ── Codex CLI ───────────────────────────
codex mcp add reactbits -- npx -y reactbits-dev-mcp-server@latest

1

Запусти команду из вкладки «Терминал»

2

Перезапусти ассистент

3

Попроси ассистент использовать компоненты из ReactBits — он сам найдёт подходящие и покажет, как интегрировать. Компоненты ставятся через npm или копируются напрямую в проект

⚙️

Бэкенд

3 MCP

Supabase MCP

MCP

Документация

Официальный MCP-сервер Supabase. Позволяет ассистенту управлять базами данных, таблицами, миграциями, Edge Functions, Auth и Storage прямо из чата — создавать таблицы, писать SQL-запросы, управлять проектами и смотреть логи без входа в интерфейс Supabase. Для подключения нужен Personal Access Token.

Установка

Добавь Supabase MCP

# Замени YOUR_SUPABASE_TOKEN на свой Personal Access Token

# ── Claude Code ─────────────────────────
claude mcp add supabase -- npx -y @supabase/mcp-server-supabase@latest --access-token YOUR_SUPABASE_TOKEN

# ── Codex CLI ───────────────────────────
codex mcp add supabase -- npx -y @supabase/mcp-server-supabase@latest --access-token YOUR_SUPABASE_TOKEN

1

Получи Personal Access Token: открой supabase.com/dashboard/account/tokens → «Generate new token»

2

Запусти команду из вкладки «Терминал», заменив YOUR_SUPABASE_TOKEN на свой токен

3

Перезапусти ассистент — Supabase MCP появится в списке активных серверов

4

Теперь ассистент видит все твои Supabase-проекты и может работать с ними напрямую

PostgreSQL MCP

MCP

GitHub

MCP-сервер для прямой работы с PostgreSQL базой данных. Ассистент может выполнять SQL-запросы, просматривать схему (таблицы, индексы, связи), анализировать данные и помогать с оптимизацией. Подключается к любой PostgreSQL базе через строку подключения.

Установка

Добавь PostgreSQL MCP

# Замени строку подключения на свою

# ── Claude Code ─────────────────────────
claude mcp add postgres -- npx -y @modelcontextprotocol/server-postgres postgresql://user:password@localhost:5432/mydb

# ── Codex CLI ───────────────────────────
codex mcp add postgres -- npx -y @modelcontextprotocol/server-postgres postgresql://user:password@localhost:5432/mydb

1

Подготовь строку подключения в формате: postgresql://user:password@host:5432/dbname

2

Запусти команду из вкладки «Терминал», подставив свою строку подключения вместо примера

3

Перезапусти ассистент

4

Если база на удалённом сервере — убедись, что IP разрешён в настройках файрвола или pg_hba.conf

SQLite MCP

MCP

GitHub

MCP-сервер для работы с локальными SQLite базами данных. Идеален для прототипирования, мобильной разработки и небольших проектов — не требует отдельного сервера. Ассистент может создавать таблицы, читать и писать данные, выполнять запросы прямо в .db или .sqlite файлах проекта.

Установка

Добавь SQLite MCP

# Укажи абсолютный путь к своему файлу .db вместо /path/to/database.db

# ── Claude Code ─────────────────────────
claude mcp add sqlite -- uvx mcp-server-sqlite --db-path /path/to/database.db

# ── Codex CLI ───────────────────────────
codex mcp add sqlite -- uvx mcp-server-sqlite --db-path /path/to/database.db

1

Для варианта с uvx установи Python пакет uv: pip install uv или brew install uv

2

Запусти команду из вкладки «Терминал», указав абсолютный путь к своему файлу базы данных

3

Если файла базы нет — он будет создан автоматически при первом запуске

4

Перезапусти ассистент

🗂️

Работа с админ-панелью

2 MCP

Directus MCP

MCP

GitHub

Официальный MCP-сервер Directus. Даёт ассистенту прямой доступ к headless CMS: чтение и запись контента, управление коллекциями, полями, файлами, пользователями и настройками. Можно создавать коллекции, добавлять записи и работать с отношениями между данными. Нужен Static Token из настроек Directus.

Установка

Добавь Directus MCP

# Замени URL и YOUR_STATIC_TOKEN на свои значения

# ── Claude Code ─────────────────────────
claude mcp add directus -- npx -y @directus/content-mcp@latest --url https://your-directus-url.com --token YOUR_STATIC_TOKEN

# ── Codex CLI ───────────────────────────
codex mcp add directus -- npx -y @directus/content-mcp@latest --url https://your-directus-url.com --token YOUR_STATIC_TOKEN

1

Получи Static Token: открой Directus → Settings → Access Tokens → «Create Token»

2

Запусти команду из вкладки «Терминал», заменив URL и токен на свои данные

3

Перезапусти ассистент — он получит доступ ко всем коллекциям и данным Directus

4

Для локального Directus используй http://localhost:8055 в качестве URL

Payload MCP

MCP

Документация

MCP-интеграция для Payload CMS — мощной Node.js headless CMS с TypeScript. Устанавливается как плагин прямо в проект. Ассистент получает доступ к коллекциям, глобальным настройкам и медиафайлам через Local API Payload — без HTTP-запросов, что делает его максимально быстрым.

Установка

Добавь Payload MCP плагин в мой проект на Payload CMS

# В папке Payload-проекта
npm install @payloadcms/mcp

1

В папке Payload-проекта выполни: npm install @payloadcms/mcp

2

Открой payload.config.ts и добавь плагин:
import { mcpPlugin } from '@payloadcms/mcp'
затем в массив plugins: [mcpPlugin()]

3

Подключи плагин к ассистенту — команды для обоих CLI:
claude mcp add payload -- node ./dist/mcp.js
codex mcp add payload -- node ./dist/mcp.js

4

Перезапусти ассистент и Payload-сервер

5

Подробности и актуальные поля конфига — в официальной документации

📖

Инструкция по подключению админ-панели
Полный гайд по подключению Directus и Payload к фронтенду — настройка API, получение данных, типизация и деплой.

Перейти к инструкциям →

📈

SEO

3 инструмента

Claude SEO

Скилл ⭐ Самый полный

GitHub

Самый полный SEO-скилл от AgriciDaniel: 19 под-скиллов, 12 субагентов для параллельной работы, 3 расширения. Покрывает всё: технический аудит, E-E-A-T, schema-разметку, GEO/AI-оптимизацию, Core Web Vitals, Local SEO, карты, анализ обратных ссылок и Google APIs. Один запрос — и ассистент проведёт полный аудит сайта.

Установка

Установи SEO-скиллы из репозитория
https://github.com/AgriciDaniel/claude-seo

# Клонируем репозиторий
git clone https://github.com/AgriciDaniel/claude-seo /tmp/claude-seo

# ── Claude Code ─────────────────────────
mkdir -p ~/.claude/skills
cp -r /tmp/claude-seo/skills/* ~/.claude/skills/

# ── Codex CLI ───────────────────────────
mkdir -p ~/.codex/skills
cp -r /tmp/claude-seo/skills/* ~/.codex/skills/

1

Склонируй репозиторий или скачай ZIP с github.com/AgriciDaniel/claude-seo

2

Скопируй папки скиллов из skills/ репозитория в ~/.claude/skills/ (или ~/.codex/skills/ для Codex)

3

Прочитай README репозитория — там описаны расширения для Google APIs и DataForSEO, которые нужны для полного функционала

4

Перезапусти ассистент. Все скиллы будут доступны через /seo, /seo-technical, /seo-content и другие команды

SEO & GEO Skills

Скилл

GitHub

Набор из 20 SEO и GEO скиллов от aaron-he-zhu — чистый Markdown, нулевые зависимости, работает сразу. Включает: SEO Content Writer, Keyword Research, Schema Markup Generator, Rank Tracker, Technical Audit и другие. Использует фреймворки CORE-E-E-A-T и CITE для оптимизации под AI-поиск. Совместим с Ahrefs, Semrush и Google Search Console через MCP.

Установка

Установи SEO и GEO скиллы из репозитория
https://github.com/aaron-he-zhu/seo-geo-claude-skills

# Клонируем репозиторий
git clone https://github.com/aaron-he-zhu/seo-geo-claude-skills /tmp/seo-geo

# ── Claude Code ─────────────────────────
mkdir -p ~/.claude/skills
cp -r /tmp/seo-geo/skills/* ~/.claude/skills/

# ── Codex CLI ───────────────────────────
mkdir -p ~/.codex/skills
cp -r /tmp/seo-geo/skills/* ~/.codex/skills/

1

Склонируй репозиторий github.com/aaron-he-zhu/seo-geo-claude-skills

2

Скопируй папки скиллов из skills/ репозитория в ~/.claude/skills/ (или ~/.codex/skills/ для Codex)

3

Перезапусти ассистент — все 20 скиллов станут доступны. Никаких дополнительных зависимостей не нужно

DataForSEO MCP

MCP

GitHub

Официальный MCP-сервер DataForSEO. Даёт ассистенту доступ к живым SERP-данным, объёмам и сложности ключевых слов, профилям обратных ссылок, on-page анализу и данным конкурентов. Один из самых полных источников SEO-данных для ИИ-ассистентов. Требует аккаунт и API-ключ DataForSEO.

Установка

Добавь DataForSEO MCP

# Замени your@email.com и your_password на свои API-данные

# ── Claude Code ─────────────────────────
claude mcp add dataforseo \
  -e DATAFORSEO_LOGIN=your@email.com \
  -e DATAFORSEO_PASSWORD=your_password \
  -- npx -y dataforseo-mcp-server@latest

# ── Codex CLI ───────────────────────────
codex mcp add dataforseo \
  -e DATAFORSEO_LOGIN=your@email.com \
  -e DATAFORSEO_PASSWORD=your_password \
  -- npx -y dataforseo-mcp-server@latest

1

Зарегистрируйся на app.dataforseo.com — есть бесплатные кредиты для старта

2

Перейди в API Access и скопируй логин (email) и пароль API

3

Запусти команду из вкладки «Терминал», вставив свои данные

4

Перезапусти ассистент

🔒

Безопасность

2 инструмента

Snyk CLI MCP

MCP

Snyk.io

MCP-интеграция для Snyk — инструмента поиска уязвимостей в зависимостях, коде, контейнерах и Infrastructure as Code. Ассистент может сканировать проект на CVE, анализировать уязвимые пакеты и предлагать исправления прямо в процессе разработки. Требует бесплатный аккаунт Snyk и установленный CLI.

Установка

Добавь Snyk MCP

# 1. Установи Snyk CLI и авторизуйся
npm install -g snyk
snyk auth

# 2. Замени your_snyk_token на свой токен из app.snyk.io → Account Settings

# ── Claude Code ─────────────────────────
claude mcp add snyk \
  -e SNYK_TOKEN=your_snyk_token \
  -- npx -y @sammcj/mcp-snyk@latest

# ── Codex CLI ───────────────────────────
codex mcp add snyk \
  -e SNYK_TOKEN=your_snyk_token \
  -- npx -y @sammcj/mcp-snyk@latest

1

Зарегистрируйся на snyk.io — бесплатный план включает 200 тестов в месяц

2

Установи Snyk CLI глобально: npm install -g snyk

3

Авторизуйся командой snyk auth — откроется браузер для входа

4

Добавь MCP из вкладки «Терминал» и перезапусти ассистент

5

Попроси ассистент проверить проект на уязвимости — он запустит сканирование и выведет отчёт

security-review

Скилл

GitHub

Скилл для code review от команды Sentry с фокусом на безопасность. Проверяет код по OWASP Top 10: SQL-инъекции, XSS, небезопасная аутентификация, проблемы авторизации, слабая криптография, неправильная конфигурация и другие критические уязвимости. Отличный выбор для финального аудита перед деплоем.

Установка

Установи скилл security-review от Sentry из репозитория
https://github.com/getsentry/skills

# Клонируем репозиторий скиллов Sentry
git clone https://github.com/getsentry/skills /tmp/sentry-skills

# ── Claude Code ─────────────────────────
mkdir -p ~/.claude/skills
cp -r /tmp/sentry-skills/security-review ~/.claude/skills/

# ── Codex CLI ───────────────────────────
mkdir -p ~/.codex/skills
cp -r /tmp/sentry-skills/security-review ~/.codex/skills/

1

Склонируй репозиторий github.com/getsentry/skills

2

Скопируй папку security-review в ~/.claude/skills/ (для Claude Code) или ~/.codex/skills/ (для Codex CLI)

3

Перезапусти ассистент

4

Вызывай командой /security-review — ассистент проверит открытые файлы или весь проект на уязвимости

MCP и Скиллыдля Вайбкодинга

Фронтенд

Эффекты и анимации

Бэкенд

Работа с админ-панелью

SEO

Безопасность

MCP и Скиллы
для Вайбкодинга