astro · davila7 — скилл для Claude Code: возможности и установка
Скилл помогает создавать сайты на Astro с контентом в Markdown или MDX и интерактивностью через выборочную гидратацию. Пригодится для блогов, документации и портфолио.
npx claude-code-templates@latest --skill web-development/astroЧто делает astro
Скилл описывает работу с Astro: страницы и маршруты из файлов в src/pages/, шаблоны .astro, коллекции контента и макеты. Он также охватывает генерацию статических страниц и SSR для динамических маршрутов. Встроенные UI-компоненты по умолчанию отдаются как статический HTML без JavaScript в браузере.
Интерактивность можно добавлять директивами client: и выбирать, когда компонент гидратируется: при загрузке, появлении в области просмотра или простое браузера. В одном проекте можно использовать компоненты React и Svelte. Для SSR в примере подключается адаптер Vercel; без адаптера этот путь настройки не описан. Для обычных страниц на Astro гидратация не требуется.
Какие задачи решает
- создать страницы Astro с файловой маршрутизацией
- подключить Markdown или MDX как источник контента
- настроить коллекцию материалов с типизированной схемой
- выбрать момент гидратации интерактивного компонента
- подготовить динамические маршруты для SSR
Примеры запросов агенту
- Создай блог на Astro с маршрутами из файлов и материалами в Markdown.
- Настрой коллекцию контента для публикаций в
src/content/config.ts. - Добавь React-компонент на страницу и включи гидратацию при появлении в области просмотра.
Как установить astro
1Через claude-code-templates
npx claude-code-templates@latest --skill web-development/astro2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill astro -a claude-code3Вручную: положить файлы
~/.claude/skills/astro/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/astro/
Вручную: положить файлы
.agents/skills/astro/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/astro/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates astro2Вручную: положить файлы
.github/skills/astro/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/astroВручную: положить файлы
.devin/skills/astro/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о astro
Как установить astro в Claude Code?
Выполните npx claude-code-templates@latest --skill web-development/astro.
Что делает скилл astro?
Он помогает работать с сайтами на Astro: создавать страницы и маршруты, организовывать Markdown и MDX-контент и добавлять интерактивные компоненты с выборочной гидратацией.
Как Astro управляет JavaScript интерактивных компонентов?
Компоненты UI по умолчанию выводятся как статический HTML. Директивы client: задают, когда гидратировать компонент: например, при загрузке страницы или появлении в области просмотра.
Похожие скиллы
Все скиллы по теме «Фронтенд и UI» →Сначала — astro от других авторов.
