wpds · wordpress — скилл для Claude Code: что делает и как установить
Скилл подтягивает документацию WordPress Design System через MCP-сервер, чтобы агент собирал интерфейс на настоящих компонентах и токенах, а не по памяти.
npx skills add WordPress/agent-skills --skill wpds -a claude-codeЧто делает wpds
Скилл открывает агенту справочник WordPress Design System: страницы документации, список компонентов, отдельный компонент по имени, набор токенов (wpds://pages, wpds://components, wpds://design-tokens). Дальше любая задача про UI в проекте на WordPress опирается на эти материалы, а не на догадки модели.
Без запущенного WPDS MCP-сервера скилл бесполезен — тянуть ему нечего. Веб-поиск вместо справочника он запрещает: если настоять, ответит предупреждением и попросит подтвердить. Стек по умолчанию — TypeScript, React и CSS. Целится в WordPress 7.0+ и PHP 7.4.0+.
Границы очерчены: запросы к сторам и локализация строк остаются за рамками, скилл берёт только UI. В конце ответа — разбор решений и рабочий код. Если в проекте есть lint-скрипты, предложенный код прогоняется через них.
Какие задачи решает
- собрать экран настроек на
@wordpress/components - заменить самодельные отступы токенами дизайн-системы
- прогнать UI-код WooCommerce по паттернам WPDS
- найти подходящий пресет типографики для блока Gutenberg
- объяснить в ревью, почему выбран такой компонент
Примеры запросов агенту
- Собери карточку товара для WooCommerce на компонентах WPDS и токенах дизайн-системы
- Проверь мой компонент на `@wordpress/ui` и покажи, какие токены я захардкодил
- Какие компоненты WPDS подходят для панели фильтров?
Как установить wpds
1Через Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wpds -a claude-code2Вручную: положить файлы
~/.claude/skills/wpds/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/wpds/
1Через Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wpds -a codex2Вручную: положить файлы
.agents/skills/wpds/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wpds -a cursor2Вручную: положить файлы
.cursor/skills/wpds/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install WordPress/agent-skills wpds2Вручную: положить файлы
.github/skills/wpds/SKILL.md1Через Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wpds -a gemini-cli2Командой платформы
gemini skills install https://github.com/WordPress/agent-skills --path skills/wpdsВручную: положить файлы
.devin/skills/wpds/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wpds -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора8
Весь набор →Другие версии wpds
Похожие
Вопросы о wpds
Как установить wpds в Claude Code?
Выполните npx skills add WordPress/agent-skills --skill wpds -a claude-code. Файл скилла появится в ~/.claude/skills/wpds/SKILL.md.
Что делает wpds?
Перед работой над интерфейсом агент читает документацию WordPress Design System через MCP-сервер и выбирает компоненты, токены и паттерны по ней. В конце ответа объясняет решения и отдаёт рабочий код.
Что нужно для работы wpds?
Настроенный и запущенный WPDS MCP-сервер: из него берутся страницы справки, компоненты и токены. Проект при этом целится в WordPress 7.0+ и PHP 7.4.0+.
