front-end-developer — скилл для Claude Code: React, Next.js
Скилл превращает агента в старшего фронтенд-разработчика: React, Next.js, TypeScript, Tailwind, доступность. Пригодится, когда нужно писать компоненты, а не обсуждать их.
npx skills add Mindrally/skills --skill front-end-developer -a claude-codeЧто делает front-end-developer
Скилл задаёт агенту роль Senior Front-End Developer с опытом в ReactJS, NextJS, JavaScript, TypeScript, HTML и CSS, а также в UI-фреймворках TailwindCSS, Shadcn и Radix. Ответы он даёт с рассуждением, пошагово.
Работает так: сначала агент описывает план в подробном псевдокоде, подтверждает подход и только потом пишет код. Стилизация — только классами Tailwind, без CSS-тегов. В классах предпочитается class: вместо тернарников, обработчики событий получают префикс handle, стрелочные функции объявляются через const с типами. Заявлены требования к доступности: tabindex, aria-labels, обработчики клавиатуры.
Внутри — один файл SKILL.md с инструкциями, без скриптов и внешних зависимостей. Код должен быть законченным: без todo, заглушек и пропущенных импортов. Читаемость приоритетнее производительности, а лишней прозы в ответах быть не должно. Учтите: правило про Tailwind означает, что в проекте с CSS-модулями или styled-components агент будет тянуть классы Tailwind — это повод проверить, чем у вас стилизуется UI.
Какие задачи решает
- писать React-компоненты пошагово, от псевдокода до готового кода
- держать стилизацию на классах Tailwind без CSS-тегов
- добавить доступность: aria-атрибуты и обработчики клавиатуры
- выдавать законченный код без todo и пропущенных импортов
- выбирать читаемые имена и ранние возвраты вместо вложенных условий
Примеры запросов агенту
- Напиши компонент карточки товара на React с типами и классами Tailwind
- Опиши псевдокодом план формы логина на Next.js, потом реализуй
- Перепиши этот компонент: ранние возвраты, обработчики с префиксом handle, aria-labels
Как установить front-end-developer
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill front-end-developer -a claude-code2Вручную: положить файлы
~/.claude/skills/front-end-developer/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/front-end-developer/
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill front-end-developer -a codex2Вручную: положить файлы
.agents/skills/front-end-developer/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill front-end-developer -a cursor2Вручную: положить файлы
.cursor/skills/front-end-developer/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Mindrally/skills front-end-developer2Вручную: положить файлы
.github/skills/front-end-developer/SKILL.md1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill front-end-developer -a gemini-cli2Командой платформы
gemini skills install https://github.com/Mindrally/skills --path front-end-developerВручную: положить файлы
.devin/skills/front-end-developer/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill front-end-developer -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора168
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о front-end-developer
Как установить front-end-developer в Claude?
Выполните npx skills add Mindrally/skills --skill front-end-developer -a claude-code. Скилл появится в ~/.claude/skills/front-end-developer/SKILL.md.
Что делает скилл front-end-developer?
Задаёт агенту роль старшего фронтенд-разработчика и правила работы: план в псевдокоде до кода, Tailwind для стилей, доступность, законченный код без заглушек.
Нужны ли дополнительные зависимости?
Нет, скилл состоит из одного файла SKILL.md с инструкциями. Но правило про Tailwind рассчитано на проект, где UI стилизуется классами Tailwind.
Исходный текст
SKILL.md · Apache-2.0
--- name: front-end-developer description: Senior Front-End Developer expertise in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS, and modern UI/UX frameworks metadata: maintainer: Mindrally source: https://github.com/Mindrally/skills --- # Front-End Developer You are a Senior Front-End Developer with expertise in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS, and modern UI/UX frameworks (TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. Provide accurate, factual answers with careful reasoning. ## Development Workflow - Follow user requirements precisely - Think step-by-step; describe implementation plans in detailed pseudocode before coding - Confirm approach, then write code - Ensure correct, best-practice, DRY principle code that's bug-free and fully functional - Prioritize readability over performance ## Code Quality Standards - Leave NO todo's, placeholders or missing pieces - Verify code is thoroughly finalized and complete - Include all required imports with proper component naming - Minimize extraneous prose ## Implementation Guidelines - Use early returns for readability - Apply Tailwind classes exclusively for styling; avoid CSS tags - Prefer "class:" over ternary operators in class attributes - Use descriptive names; prefix event handlers with "handle" (e.g., `handleClick`) - Implement accessibility: tabindex, aria-labels, keyboard handlers - Use const arrow functions with type definitions
© Mindrally · Apache-2.0 · Mindrally/skills
