# search-ux

Помогает агенту проектировать поиск: ввод запроса, подсказки, фильтры, выдача и пустой результат. Пригодится, когда в интерфейсе ищут, а не листают.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1800 установок · ★ 3103
- Автор: Owl-Listener
- Лицензия: MIT · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/Owl-Listener/designer-skills/tree/HEAD/interaction-design/skills/search-ux/SKILL.md
- Обновлён: 2026-09-05
- HTML: https://affpapa.org/nevibecode/skills/search-ux

## Что делает

Скилл задаёт агенту роль специалиста по поисковым интерфейсам. Он разбирает весь путь пользователя: как выглядит поле ввода, что показывать в автодополнении, как устроена выдача, чем отличаются состояния с результатами и без них. Отдельный блок — поиск как навигация: когда человек набирает «настройки» или «мой профиль», чтобы перейти, а не найти.

Внутри — конкретные правила. Подсказки начинать после 2–3 символов, держать их в пределах 5–8 штук, подсвечивать набранную часть, помнить про навигацию с клавиатуры. Для выдачи описаны три раскладки: список, сетка и группировка по типу контента. Фильтры показывать только те, что подходят текущему набору результатов, с количеством по каждому значению.

Самый проработанный раздел — пустая выдача. Скилл требует подтвердить запрос, предложить исправление опечатки, дать более широкие термины и альтернативы вроде категорий. Есть и аналитика: топ запросов, запросы без результатов, доля уточнений, позиция клика. Скилл рассчитан на работу вместе с `navigation-patterns` — за структуру обзора отвечает он, поэтому для чисто навигационных макетов ставьте оба.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill search-ux -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill search-ux -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill search-ux -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Owl-Listener/designer-skills search-ux
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill search-ux -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/Owl-Listener/designer-skills --path interaction-design/skills/search-ux
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill search-ux -a opencode
```

### Claude.ai

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

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

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

## Примеры запросов агенту
- Спроектируй поиск по каталогу товаров: поле ввода, автодополнение и выдача списком
- Пользователь ввёл запрос с опечаткой и получил ноль результатов — что показать на экране?
- Сделай фильтры для страницы результатов с количеством по каждому значению

## Похожие
- [search](https://affpapa.org/nevibecode/skills/aladicf-search.md) — скилл · 626 установок
- [information-architecture-navigation](https://affpapa.org/nevibecode/skills/information-architecture-navigation.md) — скилл · 556 установок
- [impeccable](https://affpapa.org/nevibecode/skills/impeccable.md) — скилл · 361300 установок
- [ui-design](https://affpapa.org/nevibecode/skills/frappe-ui-design.md) — скилл · 832 установки
- [empty-state](https://affpapa.org/nevibecode/skills/empty-state.md) — скилл · 552 установки
- [hig-components-search](https://affpapa.org/nevibecode/skills/hig-components-search.md) — скилл · 634 установки

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

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