feature-sliced-design — скилл для Claude Code: FSD и установка
Скилл помогает раскладывать frontend-код по слоям Feature-Sliced Design и проверять границы импортов. Пригодится при создании и миграции проектов.
npx skills add feature-sliced/skills --skill feature-sliced-design -a claude-codeЧто делает feature-sliced-design
Скилл применяет Feature-Sliced Design v2.1 к frontend-проектам. Он помогает решить, куда поместить код, статические файлы и логику, когда выделять features или entities, а когда оставить всё в pages. Отдельно разбираются публичные API, границы импортов, cross-imports и шаблон @x.
Внутри есть дерево решений, таблица размещения и правила проверки структуры. Руководство охватывает Next.js App Router, Next.js Pages Router, React Router, Nuxt, Vite, Astro, а также аутентификацию, API, Redux и TanStack Query. Слой widgets в методологии не запрещён, но его использование не советуется. Это повод проверить, не относится ли конкретная композиция к pages, features, shared или app.
Скилл доступен для Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для установки в Claude Code нужен пакетный менеджер npx.
Какие задачи решает
- разложить код по слоям FSD
- определить место для компонента или API-запроса
- проверить границы импортов между слоями
- перенести проект с FSD v2.0 или другой структуры
Примеры запросов агенту
- Примени Feature-Sliced Design v2.1 и определи, куда поместить новый компонент профиля.
- Проверь структуру проекта на нарушения правил импортов FSD и предложи точечные исправления.
- Перенеси этот проект на FSD и объясни, какие части оставить в
pages, а какие вынести вfeaturesилиentities.
Как установить feature-sliced-design
1Через Skills CLI (Vercel)
npx skills add feature-sliced/skills --skill feature-sliced-design -a claude-code2Вручную: положить файлы
~/.claude/skills/feature-sliced-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/feature-sliced-design/
1Через Skills CLI (Vercel)
npx skills add feature-sliced/skills --skill feature-sliced-design -a codex2Вручную: положить файлы
.agents/skills/feature-sliced-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add feature-sliced/skills --skill feature-sliced-design -a cursor2Вручную: положить файлы
.cursor/skills/feature-sliced-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install feature-sliced/skills feature-sliced-design2Вручную: положить файлы
.github/skills/feature-sliced-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add feature-sliced/skills --skill feature-sliced-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/feature-sliced/skills --path feature-sliced-designВручную: положить файлы
.devin/skills/feature-sliced-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add feature-sliced/skills --skill feature-sliced-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о feature-sliced-design
Как установить feature-sliced-design в Claude Code?
Выполните npx skills add feature-sliced/skills --skill feature-sliced-design -a claude-code, затем повторите эту же команду: npx skills add feature-sliced/skills --skill feature-sliced-design -a claude-code. После установки файл доступен по пути ~/.claude/skills/feature-sliced-design/SKILL.md.
Что делает feature-sliced-design?
Скилл помогает применять Feature-Sliced Design v2.1: выбирать слой для кода, задавать границы импортов и решать, когда выделять повторно используемые срезы. Он также даёт рекомендации для миграции и интеграции с frontend-фреймворками.
Работает ли feature-sliced-design только в Claude Code?
Нет. Скилл также рассчитан на Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode.
