frontend-architecture — скилл для Claude Code: архитектура фронтенда
Скилл для проектирования фронтенда: слои, паттерны, управление состоянием и границы модулей. Пригодится, когда приложение растёт и его пора структурировать.
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a claude-codeЧто делает frontend-architecture
Скилл описывает, как раскладывать фронтенд по слоям: представление, приложение, домен, инфраструктура. Внутри — разбор компонентной архитектуры с примерами на TypeScript: принцип единственной ответственности, композиция вместо наследования, разделение контейнеров и презентационных компонентов. Показаны паттерны MVC, MVVM и Flux, а также организация состояния для сложных приложений.
Отдельная часть — модульные системы и сборка: разбиение кода, ленивая загрузка, границы модулей, настройка бандлеров. Есть раздел про тестирование по слоям и про миграцию легаси на современные паттерны.
Материал обрывается на примере модели для MVC, поэтому по этой части рассчитывать на готовый код не стоит. Скилл работает как справочник по решениям: агент берёт из него структуру и конвенции, а не библиотеку под ключ. Ставить есть смысл до того, как кодовая база разрослась, — переписывать слои задним числом дороже.
Какие задачи решает
- разложить фронтенд по слоям и не смешивать логику с разметкой
- выбрать паттерн под задачу: MVC, MVVM или Flux
- спроектировать состояние для приложения с несколькими экранами
- нарезать код на модули с ленивой загрузкой
- перевести легаси на современные паттерны без переписывания с нуля
Примеры запросов агенту
- помоги разложить наш React-фронтенд по слоям, как в скилле frontend-architecture
- предложи паттерн управления состоянием для дашборда и обоснуй выбор
- раздели этот компонент на контейнер и презентационную часть
Как установить frontend-architecture
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a claude-code2Вручную: положить файлы
~/.claude/skills/frontend-architecture/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/frontend-architecture/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a codex2Вручную: положить файлы
.agents/skills/frontend-architecture/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a cursor2Вручную: положить файлы
.cursor/skills/frontend-architecture/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace frontend-architecture2Вручную: положить файлы
.github/skills/frontend-architecture/SKILL.md1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a gemini-cli2Командой платформы
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/frontend-architectureВручную: положить файлы
.devin/skills/frontend-architecture/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о frontend-architecture
Как установить frontend-architecture в Claude?
Выполните npx skills add manutej/luxor-claude-marketplace --skill frontend-architecture -a claude-code. После этого файл скилла лежит в ~/.claude/skills/frontend-architecture/SKILL.md.
Что делает frontend-architecture?
Даёт агенту конвенции по компонентной архитектуре, паттернам, управлению состоянием, модулям и сборке. Агент опирается на них, когда предлагает структуру приложения.
С какими платформами работает скилл?
Кроме Claude он ставится в Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode — у каждой платформы своя команда установки.
