⚡ Этот скилл — для вызова через тул Skill(pagecraft-block-design), не через Read .../SKILL.md. Если ты сюда попал через Read — остановись, вызови Skill(pagecraft-block-design). Содержимое то же, но система правильно учтёт делегирование.

PageCraft Design

Скилл-«справочник по визуалу». Без скриптов — четыре больших reference-файла, по теме каждый.

Когда подключается

• Стиль без референса — пользователь не дал скриншот / Figma. Открой references/styles-catalogue.md, предложи 3–4 подходящих стиля, жди выбор.
• Есть референс (скриншот или Figma) — открой references/mcp-setup.md, проверь наличие нужных MCP (mcp__figma__*, mcp__chrome-devtools__*). Если нет — предложи поставить или работать «на глаз».
• Сравнение с референсом — после генерации preview.html: chrome-devtools MCP открывает страницу, делает скриншот, сравниваем расхождения, итерируем. Алгоритм в mcp-setup.md + styles-catalogue.md.
• Пишешь style.css — открой references/css-guide.md: контейнерные запросы, fluid typography, BEM, изоляция, full-width, анимации с prefers-reduced-motion.
• Решаешь сколько примеров класть в examples/ — references/examples-guide.md. Не 1–2 заглушки, а полноценный показ потенциала блока.

Справочники