# fluid-functionalism

Скилл для сборки React-интерфейсов на реестре shadcn/ui @fluid: пружины вместо длительностей, подсветка под курсором, смена веса шрифта без сдвига вёрстки.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 603 установки · ★ 1099
- Автор: mickadesign
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/mickadesign/fluid-functionalism/tree/HEAD/skills/fluid-functionalism/SKILL.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/skills/fluid-functionalism

## Что делает

Скилл ставит и собирает компоненты реестра @fluid, а когда нужного компонента нет — пишет кастомную анимацию по той же системе движения. Внутри четыре задачи: прочитать стек проекта, подобрать и подключить нужный элемент реестра, написать свою анимацию в стиле библиотеки, обновить уже установленные компоненты до свежего релиза.

Каждый запуск начинается с чтения стека: скрипт `node <skill>/scripts/stack.mjs [apps/web]` смотрит зависимости (React 19, Tailwind v4, motion, обвязку shadcn), определяет вариант Radix или Base UI и проверяет две тихие проблемы — `MotionConfig reducedMotion="user"` вокруг приложения и Inter без оси `opsz`. Нужен только Node, меньше секунды, ничего не пишет. Без Node те же файлы читаются руками по `references/stack-audit.md`.

Перед установкой скилл сверяет текущие файлы цели и сравнивает одноимённые: `--overwrite` проходит только если цели всё ещё стоковые. Факты о стеке читаются заново каждый раз, а не берутся из кэша — устаревший вердикт сбивает все следующие сессии. Решения пользователя (отказ от fluid hover, намеренно оставленная длительность) хранятся отдельно и не поднимаются повторно.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mickadesign/fluid-functionalism --skill fluid-functionalism -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/fluid-functionalism/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/fluid-functionalism/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mickadesign/fluid-functionalism --skill fluid-functionalism -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/fluid-functionalism/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mickadesign/fluid-functionalism --skill fluid-functionalism -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/fluid-functionalism/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mickadesign/fluid-functionalism fluid-functionalism
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/fluid-functionalism/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mickadesign/fluid-functionalism --skill fluid-functionalism -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/mickadesign/fluid-functionalism --path skills/fluid-functionalism
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/fluid-functionalism/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add mickadesign/fluid-functionalism --skill fluid-functionalism -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/mickadesign/fluid-functionalism/tree/HEAD/skills/fluid-functionalism/SKILL.md

## Когда брать
- подключить компоненты @fluid в проект на shadcn/ui
- выбрать между вариантами Radix и Base UI для одного компонента
- написать ховер-подсветку, которая едет к ближайшему пункту списка
- проверить, не сломает ли смена веса шрифта вёрстку
- обновить установленные компоненты, не потеряв локальные правки

## Примеры запросов агенту
- Поставь компонент @fluid для боковой панели и собери её под наш проект
- Проверь анимацию в настройках по системе Fluid Functionalism и покажи, что не так
- Мне нужна своя анимация появления страницы — сделай её по motion-системе @fluid

## Похожие
- [shadcn](https://affpapa.org/nevibecode/skills/pproenca-shadcn.md) — скилл · 724 установки
- [magic-ui](https://affpapa.org/nevibecode/skills/magic-ui.md) — скилл · 1200 установок
- [avoid-ai-design](https://affpapa.org/nevibecode/skills/avoid-ai-design.md) — скилл · 641 установка
- [shadcn-component-review](https://affpapa.org/nevibecode/skills/shadcn-component-review.md) — скилл · 635 установок
- [shadcn-ui](https://affpapa.org/nevibecode/skills/existential-birds-shadcn-ui.md) — скилл · 351 установка
- [agent-elements](https://affpapa.org/nevibecode/skills/agent-elements.md) — скилл · 724 установки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md