# ionic-design

Проверяет и создаёт интерфейсы на Ionic Framework для приложений на Capacitor. Помогает настраивать темы, режимы iOS и MD, а также обновлять компоненты с Ionic 8 до Ionic 9.

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

## Что делает

Скилл помогает собирать и проверять интерфейсы на Ionic Framework внутри приложений Capacitor. Он знает правила структуры экранов: связку `IonPage`, `IonHeader`, `IonContent` и `IonFooter`. Скилл следит, чтобы скролл оставался внутри `ion-content`, проверяет разметку списков и следит за современным синтаксисом форм с атрибутами `label` и `labelPlacement` вместо устаревших обёрток `IonLabel`.

Внутри заложены инструкции по стилизации через CSS-переменные, подключению тёмных палитр `palettes/dark.system.css` и проверке стилей под режимами iOS и Material Design. Также скилл ведёт миграцию с Ionic 8 на Ionic 9 через `npx @ionic/migrate`. Он отслеживает удаление `ion-picker-legacy`, переход на React Router 6 или Vue Router 5 и работу Angular в режиме zoneless.

Инструмент строго сфокусирован на Ionic. Для конфигурации Tailwind v4, разметки Konsta UI или системных отступов без компонентов Ionic этот скилл не подойдёт, так как для них требуются другие инструменты.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Cap-go/capgo-skills --skill ionic-design -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Cap-go/capgo-skills --skill ionic-design -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Cap-go/capgo-skills --skill ionic-design -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Cap-go/capgo-skills ionic-design
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Cap-go/capgo-skills --skill ionic-design -a gemini-cli
```

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add Cap-go/capgo-skills --skill ionic-design -a opencode
```

### Claude.ai

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

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

## Когда брать
- настроить тёмную тему и CSS-переменные палитры
- обновить компоненты и маршрутизацию с Ionic 8 до Ionic 9
- исправить отображение компонентов в режимах iOS и Material Design
- разместить поля ввода с современными атрибутами label и labelPlacement

## Примеры запросов агенту
- Проверь форму входа на IonInput и переведи лейблы на современный синтаксис Ionic 9.
- Настрой поддержку системной тёмной палитры через palettes/dark.system.css.
- Подготовь миграцию проекта с Ionic 8 на Ionic 9 через npx @ionic/migrate.

## Похожие
- [ionic-expert](https://affpapa.org/nevibecode/skills/ionic-expert.md) — скилл · 1200 установок
- [ionic-app-upgrades](https://affpapa.org/nevibecode/skills/ionic-app-upgrades.md) — скилл · 740 установок
- [ionic](https://affpapa.org/nevibecode/skills/ionic.md) — скилл · 797 установок
- [stitch::code-to-design](https://affpapa.org/nevibecode/skills/stitchcode-to-design.md) — скилл · 10200 установок
- [mapbox-web-integration-patterns](https://affpapa.org/nevibecode/skills/mapbox-web-integration-patterns.md) — скилл · 2600 установок
- [frontend-developer](https://affpapa.org/nevibecode/agents/voltagent-community-frontend-developer.md) — субагент · 40905 установок

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

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

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