interactive-portfolio · davila7 — скилл для Claude Code: портфолио
Скилл помогает собрать личное портфолио так, чтобы посетитель за полминуты понял, кто вы и что умеете. Пригодится разработчикам и дизайнерам.
npx claude-code-templates@latest --skill creative-design/interactive-portfolioЧто делает interactive-portfolio
Скилл ведёт вас по структуре портфолио: герой-блок, проекты, раздел о себе, контакты. Отдельно разбирает, что должно попасть в первые тридцать секунд просмотра, и какие секции критичны, а какие можно отложить. Для каждого проекта предлагает карточку с обложкой, одной строкой о вашей роли, тегами технологий и результатом.
Есть отдельные блоки под разработчиков и дизайнеров. Для разработчика скилл напоминает про ссылку на GitHub, живые демо и ваш личный вклад в командные проекты, а вместо учебных клонов советует показывать задачи с реальными пользователями. Для дизайнера — кейсы с процессом, а не просто картинки.
Внутри есть разбор антипаттернов: шаблонное портфолио, красивый сайт без проектов, переписанное резюме. Отдельная таблица острых мест — например, портфолио сложнее вашей реальной работы или нормально выглядит на десктопе и разваливается на телефоне. Скилл ставится как файл SKILL.md в каталог скиллов, никаких ключей и зависимостей для установки не требует.
Какие задачи решает
- собрать структуру личного сайта с проектами
- описать кейс так, чтобы была видна ваша роль
- выбрать, какие проекты показывать, а какие убрать
- добавить призыв к действию и контакты
- проверить портфолио на мобильных
Примеры запросов агенту
- Помоги собрать структуру портфолио разработчика
- Перепиши описание проекта так, чтобы был виден мой вклад
- Что убрать из портфолио, чтобы оно не выглядело шаблонным?
Как установить interactive-portfolio
1Через claude-code-templates
npx claude-code-templates@latest --skill creative-design/interactive-portfolio2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill interactive-portfolio -a claude-code3Вручную: положить файлы
~/.claude/skills/interactive-portfolio/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/interactive-portfolio/
Вручную: положить файлы
.agents/skills/interactive-portfolio/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/interactive-portfolio/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates interactive-portfolio2Вручную: положить файлы
.github/skills/interactive-portfolio/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/interactive-portfolioВручную: положить файлы
.devin/skills/interactive-portfolio/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о interactive-portfolio
Как установить interactive-portfolio в Claude Code?
Через шаблоны: npx claude-code-templates@latest --skill creative-design/interactive-portfolio. Второй способ — npx skills add davila7/claude-code-templates --skill interactive-portfolio -a claude-code. После установки файл лежит в ~/.claude/skills/interactive-portfolio/SKILL.md.
Что делает interactive-portfolio?
Помогает проектировать портфолио: структура секций, карточки проектов, кейсы, призывы к действию. Разбирает типичные ошибки вроде шаблонного дизайна или слабых проектов за красивыми анимациями.
С какими скиллами он сочетается?
Автор указывает scroll-experience, 3d-web-experience, landing-page-design и personal-branding — их можно подключить вместе с этим.
Похожие скиллы
Всё по теме «Дизайн» →Сначала — interactive-portfolio от других авторов.
