modern-css — скилл для Claude Code: что делает и как установить
Даёт агенту справочник по современному CSS для новых стилей, обновления старых правил и работы с новыми возможностями браузера.
npx skills add paulirish/dotfiles --skill modern-css -a claude-codeЧто делает modern-css
Скилл помогает писать и перерабатывать CSS с container queries, диапазонами media queries, subgrid и Masonry. В нём есть приёмы для тем через light-dark(), цветов oklch, color-mix() и относительного синтаксиса цветов.
Справочник охватывает типографику с text-wrap, clamp() и динамическими единицами viewport, а также анимации прокрутки, View Transitions, @starting-style и linear(). Есть примеры для @property, calc-size(auto), слоёв каскада @layer, dialog, popover и позиционирования через anchor.
Переходы между документами имеют ограниченную доступность в Chrome и Safari 18.2+, поэтому это повод проверить поддержку браузеров перед их внедрением. Отдельные возможности, включая if() и функции подсчёта элементов дерева, помечены как будущие.
Какие задачи решает
- создать адаптивный компонент через container queries
- перевести старые media queries на диапазонный синтаксис
- настроить светлую и тёмную тему с
light-dark() - анимировать раскрытие блока до высоты
auto - разделить стили по слоям каскада
@layer
Примеры запросов агенту
- Создай стили карточки с container queries и единицами
cqi. - Перепиши старый CSS темы на
light-dark()иoklch. - Добавь анимацию появления элементов при прокрутке через
animation-timeline.
Как установить modern-css
1Через Skills CLI (Vercel)
npx skills add paulirish/dotfiles --skill modern-css -a claude-code2Вручную: положить файлы
~/.claude/skills/modern-css/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/modern-css/
1Через Skills CLI (Vercel)
npx skills add paulirish/dotfiles --skill modern-css -a codex2Вручную: положить файлы
.agents/skills/modern-css/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add paulirish/dotfiles --skill modern-css -a cursor2Вручную: положить файлы
.cursor/skills/modern-css/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install paulirish/dotfiles modern-css2Вручную: положить файлы
.github/skills/modern-css/SKILL.md1Через Skills CLI (Vercel)
npx skills add paulirish/dotfiles --skill modern-css -a gemini-cli2Командой платформы
gemini skills install https://github.com/paulirish/dotfiles --path agents/skills/modern-cssВручную: положить файлы
.devin/skills/modern-css/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add paulirish/dotfiles --skill modern-css -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о modern-css
Как установить modern-css в Claude Code?
Выполните npx skills add paulirish/dotfiles --skill modern-css -a claude-code, затем повторите npx skills add paulirish/dotfiles --skill modern-css -a claude-code. Файл скилла расположен в ~/.claude/skills/modern-css/SKILL.md.
Что делает modern-css?
Он даёт агенту справочный материал по современному CSS: раскладке, цветам, типографике, анимациям и интерактивным компонентам. Скилл рассчитан на создание новых CSS-файлов и рефакторинг старых стилей.
Какие ограничения есть у View Transitions?
Переходы в пределах одного документа отмечены как Baseline Newly Available. Переходы между документами имеют ограниченную доступность в Chrome и Safari 18.2+.
