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

flutter-animating-apps — скилл для Claude Code: как установить

Помогает внедрять анимации и переходы в приложения на Flutter. Пригодится при проработке нативного моушн-дизайна для iOS и Android.

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

Что делает flutter-animating-apps

Скилл взят из репозитория команды Flutter и входит в каталог OpenDesign в категории animation-motion. Он помогает ИИ-агенту проектировать визуальные эффекты и переходы между экранами для мобильных платформ iOS и Android. Агент распознаёт задачу при упоминании триггеров вроде «flutter animation» или «flutter transitions».

Запись в OpenDesign работает в режиме прототипа. Она сообщает агенту о существовании скилла ещё на этапе планирования. Чтобы получить оригинальные скрипты и справочные материалы, придётся загрузить исходный бандл из репозитория flutter/skills. Без апстрима агент ограничен только базовым описанием.

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

  • добавить плавные переходы между экранами Flutter
  • настроить моушн-эффекты для iOS и Android
  • внедрить анимации интерфейса в мобильное приложение
  • подключить правила моушн-дизайна команды Flutter

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

  • Используй flutter-animating-apps для анимации перехода между экранами
  • Настрой flutter motion для карточки профиля в приложении
  • Добавь flutter animation при нажатии на кнопку оформления заказа

Как установить flutter-animating-apps

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill flutter-animating-apps -a claude-code

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

~/.claude/skills/flutter-animating-apps/SKILL.md

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

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

Весь набор →
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установок d3-visualization nexu-io Скилл учит агента создавать интерактивные графики и визуализации данных на D3.js. Подойдёт, если нужно быстро генерировать диаграммы для дашбордов, отчётов и прототипов. Claude Code CX Codex Cursor +1 3 100установок

Похожие

expo-router expo Скилл для работы с файловой маршрутизацией, стеками, модалями и табами в Expo Router. Пригодится, если вы строите навигацию в мобильном приложении на React Native. Claude Code CX Codex Cursor +1 27 700установок expo-brownfield expo Помогает внедрить React Native и Expo в существующие нативные приложения на iOS и Android. Пригодится для точечной встройки экранов в SwiftUI, UIKit или Kotlin. Claude Code CX Codex Cursor +1 27 700установок argent-screenshot-diff software-mansion Сравнивает скриншоты до и после изменений в UI: ловит сдвиги в раскладке, отступах, цвете и рендере текста. Claude Code CX Codex Cursor +1 24 900установок expo-data-fetching expo Скилл настраивает сетевые запросы, кэширование и обработку ошибок в Expo. Помогает прописать состояния экранов и интеграцию с TanStack Query. Claude Code CX Codex Cursor +1 27 200установок react-native-best-practices callstackincubator Скилл передаёт агенту правила оптимизации React Native на базе опыта Callstack: от профилирования FPS и TTI до чистки бандла. Помогает устранить лаги анимаций и утечки памяти. Claude Code CX Codex Cursor +1 30 100установок vercel-react-native-skills vercel Набор правил по React Native и Expo для ИИ-агента: списки, анимации, навигация. Пригодится, когда агент правит мобильный код и надо, чтобы он делал это одинаково. Claude Code CX Codex Cursor +1 253 900установок animate-expo emilkowalski Создаёт мобильные анимации для React Native и Expo на базе Reanimated и Gesture Handler. Помогает избежать просадок кадров на реальных устройствах. Claude Code CX Codex Cursor +1 135 900установок mobile-native emilkowalski Убирает мелочи, из-за которых веб-приложение на телефоне выдаёт себя: залипающий hover, вспышку при тапе, ошибку с 100vh. Claude Code CX Codex Cursor +1 84 500установок

Вопросы о flutter-animating-apps

Как установить flutter-animating-apps в Claude Code?

Выполните команду npx skills add nexu-io/open-design --skill flutter-animating-apps -a claude-code. Альтернативный способ — сохранить файл скилла вручную в ~/.claude/skills/flutter-animating-apps/SKILL.md.

Для чего нужен скилл flutter-animating-apps?

Он помогает агенту проектировать и писать код анимаций и визуальных переходов в приложениях на Flutter под iOS и Android.

Нужен ли апстрим-репозиторий для полной работы скилла?

Да, запись в OpenDesign объявляет скилл для планирования агента. Чтобы запускать оригинальные скрипты и использовать ассеты, требуется установить исходный бандл из репозитория flutter/skills.

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

SKILL.md · Apache-2.0
---
name: flutter-animating-apps
description: |
  Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.
triggers:
  - "flutter animation"
  - "flutter motion"
  - "mobile animation"
  - "flutter transitions"
od:
  mode: prototype
  category: animation-motion
  upstream: "https://github.com/flutter/skills"
---

# flutter-animating-apps

> Curated from the Flutter team.

## What it does

Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.

## Source

- Upstream: https://github.com/flutter/skills
- Category: `animation-motion`

## 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/flutter/skills
```

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

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

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

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

Компании, которые помогают держать аналитику открытой