# compose-component-design

Скилл для проектирования и ревью переиспользуемых компонентов Jetpack Compose: слоты, модификаторы, размещение корневого layout.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1000 установок · ★ 1120
- Автор: chrisbanes
- Лицензия: Apache-2.0 · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/chrisbanes/skills/tree/HEAD/skills/compose-component-design/SKILL.md
- Обновлён: 2026-10-25
- HTML: https://affpapa.org/nevibecode/skills/compose-component-design

## Что делает

Скилл разбирает публичный API компонента Jetpack Compose и подсказывает, что оставить жёстко зашитым, а что отдать вызывающему коду. Основной принцип: компонент владеет своей неизменной структурой, а вызывающий код распоряжается размещением, содержимым и политикой поведения.

Внутри — процедура из семи шагов и роутер по темам. Если речь о параметре-модификаторе, порядке модификаторов или условных обёртках layout, скилл отправляет в `references/modifier-layout.md`. Если о переменных визуальных областях, необязательном содержимом, примитивных параметрах контента или булевых флагах формы — в `references/slot-apis.md`. Анимации, состояние и UI-тесты уходят в соседние скиллы: `compose-animations`, `compose-state-and-effects`, `compose-ui-testing-patterns`.

Работает в Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для установки нужен Node.js и `npx` — команда тянет файлы скилла из репозитория `chrisbanes/skills`. В ревью скилл требует явно решить по каждой переменной визуальной области, остаётся она семантическим примитивом или становится слотом вызывающего кода; если текущий API уже закрывает запрос, правок не будет.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add chrisbanes/skills --skill compose-component-design -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add chrisbanes/skills --skill compose-component-design -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add chrisbanes/skills --skill compose-component-design -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install chrisbanes/skills compose-component-design
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add chrisbanes/skills --skill compose-component-design -a gemini-cli
```

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add chrisbanes/skills --skill compose-component-design -a opencode
```

### Claude.ai

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

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

## Когда брать
- вынести переменную визуальную область компонента в слот вместо набора булевых флагов
- принять модификатор вызывающего кода в корне компонента и не потерять его в условных ветках
- отличить неизменную семантическую структуру компонента от того, что меняется от вызова к вызову
- провести ревью публичного API компонента и не уехать в несвязанные правки нейминга
- решить, оставить ли необязательное содержимое примитивным параметром или сделать слотом

## Примеры запросов агенту
- Проверь API компонента `UserCard`: что тут должно быть слотом, а что примитивным параметром?
- Разбери размещение модификатора в корне `ProfileHeader` и в его условных ветках
- Сделай ревью публичных сигнатур компонентов в `ui/components` на слоты и модификаторы

## Похожие
- [compose-expert](https://affpapa.org/nevibecode/skills/compose-expert.md) — скилл · 1400 установок
- [android-design-guidelines](https://affpapa.org/nevibecode/skills/android-design-guidelines.md) — скилл · 1700 установок
- [compose-multiplatform-patterns](https://affpapa.org/nevibecode/skills/compose-multiplatform-patterns.md) — скилл · 4600 установок
- [android-jetpack-compose](https://affpapa.org/nevibecode/skills/android-jetpack-compose.md) — скилл · 2200 установок
- [compose-motion](https://affpapa.org/nevibecode/skills/compose-motion.md) — скилл · 943 установки
- [compose-graphics](https://affpapa.org/nevibecode/skills/compose-graphics.md) — скилл · 937 установок

Из того же набора: [chrisbanes/skills](https://affpapa.org/nevibecode/by/chrisbanes/skills.md) — 17 карточек

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