# stitch

Скилл задаёт правила для интерфейсов с данными: токены, состояния компонентов, доступность и QA-проверки. Пригодится для согласованного UI.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2000 установок · ★ 3349
- Автор: typeui.sh
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/bergside/awesome-design-skills/tree/HEAD/skills/stitch/SKILL.md
- Обновлён: 2026-06-28
- HTML: https://affpapa.org/nevibecode/skills/stitch

## Что делает

stitch превращает запрос на дизайн-систему в практическое руководство для разработки. Он задаёт визуальную основу: шрифты Ubuntu, Oswald и Ubuntu Mono, токены цветов, комфортную плотность отступов и чёткую иерархию. Для компонентов описываются анатомия, варианты, состояния, адаптивное поведение и крайние случаи вроде длинных подписей или пустых экранов.

Скилл требует учитывать WCAG 2.2 AA, клавиатурную навигацию и видимый фокус. В правилах есть проверяемые критерии, требования к текстам, анти-паттерны и чек-лист для code review. Он также советует сначала определить токены и базовые ограничения, а затем переходить к компонентам. Это повод проверить доступность каждого состояния, а не ограничиваться внешним видом.

## Установка

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

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

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill stitch -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill stitch -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bergside/awesome-design-skills stitch
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill stitch -a opencode
```

### Claude.ai

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

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

## Когда брать
- задать токены цветов и типографики
- описать состояния компонентов для разработки
- проверить клавиатурную доступность интерфейса
- подготовить правила для адаптивного поведения
- собрать чек-лист для code review

## Примеры запросов агенту
- Опиши дизайн-систему для страницы с данными по правилам stitch и начни с токенов.
- Сформируй правила для кнопки: анатомия, состояния, клавиатура, touch и длинные подписи.
- Проверь этот интерфейс по WCAG 2.2 AA и составь QA-чек-лист для code review.

## Похожие
- [stitch-loop](https://affpapa.org/nevibecode/skills/stitch-loop.md) — скилл · 56400 установок
- [stitch::react-components](https://affpapa.org/nevibecode/skills/stitchreact-components.md) — скилл · 50400 установок
- [landing-page-design](https://affpapa.org/nevibecode/skills/landing-page-design.md) — скилл · 56100 установок
- [ui-animation](https://affpapa.org/nevibecode/skills/ui-animation.md) — скилл · 10400 установок
- [tailwind-v4-shadcn](https://affpapa.org/nevibecode/skills/tailwind-v4-shadcn.md) — скилл · 8100 установок
- [magicpath](https://affpapa.org/nevibecode/skills/magicpathai-magicpath.md) — скилл · 6300 установок

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

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

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