К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor GitHub Copilot

frontend-dev · nexu-io — скилл для Claude Code: анимации и AI-медиа

Скилл для создания современных фронтенда с плавными анимациями, AI-генерируемым контентом через MiniMax API и генеративным искусством. Подходит для героев-страниц и портфолио-сайтов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add nexu-io/open-design --skill frontend-dev -a claude-code
Открыть на GitHub

Что делает frontend-dev

frontend-dev создаёт полноценный фронтенд с кинематографическими эффектами и интеграцией MiniMax API для генерации медиа. Внутри скилла — шаблоны анимаций, компоненты для вывода AI-контента и инструменты для генеративного искусства. Требует ключ доступа к MiniMax API, чтобы работала генерация медиа.

Устанавливается в каталог скиллов соответствующей платформы. После установки агент самостоятельно обнаруживает скилл и может вызвать его по имени или по триггер-фразам: «cinematic frontend», «generative web», «hero page», «showcase site». Исходный код и полная документация находятся в репозитории nexu-io/open-design под лицензией Apache-2.0.

Какие задачи решает

  • Собрать фронтенд с плавными переходами и кинематической навигацией
  • Встроить AI-генерируемые изображения и видео на сайт
  • Создать генеративное искусство как фон или украшение страницы
  • Разработать демо-сайт для портфолио с полировкой и эффектами

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

  • Создай hero page с кинематическими анимациями и фоном из генеративного искусства
  • Собери showcase сайт с встроенным видео, сгенерированным MiniMax API
  • Разработай фронтенд с плавной навигацией и AI-медиа для каждого раздела

Как установить frontend-dev

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill frontend-dev -a claude-code

2Вручную: положить файлы

~/.claude/skills/frontend-dev/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/frontend-dev/

Из того же набора106

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок design-md nexu-io Создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Пригодится, когда агенту нужен единый документ по дизайн-системе. Claude Code CX Codex Cursor +1 3 100установок

Другие версии frontend-dev

frontend-dev MiniMax-AI Скилл проектирует страницы с анимациями, медиафайлами от MiniMax и готовым текстом. Помогает собирать промо-сайты, витрины и дашборды. Claude Code CX Codex Cursor +1 3 200установок

Похожие

expo-data-fetching expo Скилл настраивает сетевые запросы, кэширование и обработку ошибок в Expo. Помогает прописать состояния экранов и интеграцию с TanStack Query. Claude Code CX Codex Cursor +1 27 200установок playwright-skill lackeyjb Скилл для написания и запуска Playwright-скриптов прямо в редакторе. Автоматически находит dev-серверы, делает скриншоты, проверяет адаптивность, тестирует логины и валидирует работу сайта. Claude Code CX Codex Cursor +1 6 900установок angular-migration Seth Hobson Помогает переносить приложения с AngularJS на Angular по частям или целиком. Пригодится для гибридных приложений, замены компонентов и обновления зависимостей. Claude Code CX Codex Cursor 10 900установок mcp vercel-labs Скилл помогает собирать MCP-серверы с интерактивными json-render UI для Claude, ChatGPT, Cursor и VS Code. Claude Code CX Codex Cursor +1 5 800установок antislop miqdadbadjuber Фильтрует шаблонные решения ИИ при работе с интерфейсами и кодом. Нужен, когда агент должен следовать заданным правилам оформления и текста. Claude Code CX Codex Cursor +1 7 300установок material-ui-styling mui Подсказывает агенту, каким слоем стилизовать компоненты Material UI: sx, styled(), темой или глобальным CSS. Пригодится, когда правок много и важно не раздуть проект лишней вложенностью. Claude Code CX Codex Cursor +1 685установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о frontend-dev

Как установить frontend-dev в Claude Code?

Выполни npx skills add nexu-io/open-design --skill frontend-dev -a claude-code. Скилл установится в ~/.claude/skills/frontend-dev/. После этого агент сможет использовать его автоматически.

Что нужно, чтобы работала генерация медиа?

Требуется ключ доступа к MiniMax API. Без него фронтенд будет работать, но генерация изображений и видео не запустится.

Как вызвать этот скилл?

Обратись к агенту по имени скилла («frontend-dev») или используй одну из триггер-фраз: «cinematic frontend», «generative web», «hero page», «showcase site».

Исходный текст

SKILL.md · Apache-2.0 
---
name: frontend-dev
description: |
  Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.
triggers:
  - "frontend dev"
  - "cinematic frontend"
  - "generative web"
  - "hero page"
  - "showcase site"
od:
  mode: prototype
  category: web-artifacts
  upstream: "https://github.com/MiniMax-AI/skills"
---

# frontend-dev

> Curated from the MiniMax AI team.

## What it does

Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.

## Source

- Upstream: https://github.com/MiniMax-AI/skills
- Category: `web-artifacts`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/MiniMax-AI/skills
```

Then ask the agent to invoke this skill by name (`frontend-dev`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором