senior-frontend · borghei — скилл для Claude Code: фронтенд и установка
Помогает создавать проекты и компоненты на React и Next.js, разбирать зависимости и проверять доступность интерфейса. Пригодится для нового приложения или доработки существующего.
npx skills add borghei/Claude-Skills --skill senior-frontend -a claude-codeЧто делает senior-frontend
Скилл готовит каркас Next.js с App Router или React+Vite, генерирует компоненты и хуки, а также файлы тестов и Storybook. Для анализа размера бандла скрипт проверяет package.json и импорты, отмечая тяжёлые зависимости и возможные более лёгкие замены. Это статический анализ, а не измерение собранного приложения.
В рекомендациях есть паттерны React, разделение Server и Client Components, загрузка изображений и данных, семантическая разметка и тесты доступности. Перед генерацией нужно выбрать шаблон, набор функций и цель: новый проект или компонент в существующем приложении. Скилл охватывает фронтенд; разработка API и сквозные тесты Cypress или Playwright вынесены за его рамки.
Какие задачи решает
- создать каркас Next.js или React+Vite с TypeScript и Tailwind
- сгенерировать компонент или хук вместе с тестом
- найти тяжёлые зависимости по
package.jsonи импортам - проверить компонент на доступность и паттерны React
Примеры запросов агенту
- Создай новый проект Next.js с TypeScript, Tailwind и авторизацией.
- Добавь компонент ProductCard и подготовь для него тест и Storybook story.
- Проверь зависимости и импорты проекта на тяжёлые пакеты.
Как установить senior-frontend
1Через Skills CLI (Vercel)
npx skills add borghei/Claude-Skills --skill senior-frontend -a claude-code2Вручную: положить файлы
~/.claude/skills/senior-frontend/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/senior-frontend/
1Через Skills CLI (Vercel)
npx skills add borghei/Claude-Skills --skill senior-frontend -a codex2Вручную: положить файлы
.agents/skills/senior-frontend/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add borghei/Claude-Skills --skill senior-frontend -a cursor2Вручную: положить файлы
.cursor/skills/senior-frontend/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install borghei/Claude-Skills senior-frontend2Вручную: положить файлы
.github/skills/senior-frontend/SKILL.md1Через Skills CLI (Vercel)
npx skills add borghei/Claude-Skills --skill senior-frontend -a gemini-cli2Командой платформы
gemini skills install https://github.com/borghei/Claude-Skills --path engineering/senior-frontendВручную: положить файлы
.devin/skills/senior-frontend/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add borghei/Claude-Skills --skill senior-frontend -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о senior-frontend
Как установить senior-frontend в Claude Code?
Выполните npx skills add borghei/Claude-Skills --skill senior-frontend -a claude-code. Файл скилла находится по пути ~/.claude/skills/senior-frontend/SKILL.md.
Что делает senior-frontend?
Он помогает создавать фронтенд-проекты и компоненты на React и Next.js, анализировать зависимости и применять практики доступности и тестирования.
Как senior-frontend проверяет размер бандла?
Скрипт bundle_analyzer.py анализирует package.json и импорты, оценивает состояние бандла и отмечает тяжёлые зависимости. Это статическая проверка.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — senior-frontend от других авторов.
