AIKraft/AI/Войти
AIKraft/Skills/Фронтенд-разработка

Фронтенд-разработка

Full-stack frontend development combining premium UI design, cinematic animations,

minimax-ai official Дизайн

Что делает навык

Skill «Фронтенд-разработка» создает готовые к продакшену фронтенд-страницы, объединяя инженерный дизайн, кинематографичные анимации, генеративное искусство и копирайтинг. Он автоматизирует процесс от архитектурного планирования до сборки UI с использованием локальных активов и специфичных для фреймворка структур.

Когда применять

  • Создание лендингов для музыкальных стриминговых сервисов или других приложений с акцентом на премиальный UI.
  • Разработка сложных интерактивных интерфейсов с использованием Bento-сеток, параллакса и 3D-элементов.
  • Генерация веб-страниц с кинематографичными скролл-анимациями и микро-взаимодействиями (magnetic buttons, liquid glass).
  • Создание визуальных артов и интерактивных страниц с использованием p5.js и генеративного искусства.

Как работает

  1. Анализ запроса и настройка параметров дизайна (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) в соответствии с типом страницы.
  2. Планирование архитектуры анимаций с выбором инструментов (Framer Motion, GSAP, Three.js) и соблюдением правил производительности.
  3. Генерация всех медиа-активов (изображения, видео, аудио, TTS) через скрипты minimax_*.py с сохранением в локальную структуру проекта.
  4. Написание продакшн-копирайтинга по фреймворкам (AIDA, PAS, FAB) без использования Lorem ipsum.
  5. Сборка UI в выбранном фреймворке (React/Next.js, Vue/Nuxt, Astro и др.) с интеграцией активов и соблюдением дизайн-правил.
  6. Прохождение финальных контрольных точек (Quality Gates) для проверки соответствия стандартам качества и безопасности.

Примеры запросов агенту

Создай лендинг для музыкального стримингового приложения с кинематографичными анимациями.
Разработай интерактивную страницу с Bento-сеткой и 3D-эффектами на React.
Сгенерируй веб-страницу с параллакс-скроллом и генеративным фоном на Astro.

Что понадобится

  • Ключ API MINIMAX_API_KEY для работы скриптов генерации активов.
  • Установленные зависимости фреймворка (например, framer-motion, gsap, tailwindcss).
  • Скрипты из папки scripts/ (minimax_tts.py, minimax_music.py, minimax_video.py, minimax_image.py).

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «frontend-dev» из репозитория: # https://github.com/minimax-ai/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r frontend-dev/ ~/.claude/skills/frontend-dev/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.