# clean

Задаёт правила минималистичной дизайн-системы с сеткой 8pt, токенами цветов и требованиями WCAG 2.2 AA для интерфейсных компонентов.

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

## Что делает

Скилл превращает ИИ-ассистента в автора гайдлайнов для дизайн-системы Clean. В его основе лежат строгие визуальные рамки. Шкала размеров шрифта включает значения от 12 до 32 на базе шрифтов Roboto, Poppins и Inconsolata. Цветовая палитра зафиксирована токенами: основной синий `#3B82F6`, фон `#FFFFFF` и тёмный текст `#111827`.

Каждый компонент описывается через полный набор интерактивных состояний, включая наведение, активный фокус и пустые экраны. Обязательны интерактивные цели от 44px. Вся вёрстка привязывается к базовой сетке 8pt, поэтому использование произвольных пиксельных отступов вне токенов сразу считается нарушением.

Инструкции формируются по фиксированному алгоритму. Сначала ассистент формулирует цель дизайна в одном предложении, затем выводит токены, анатомию элементов, требования доступности и антипаттерны. Завершается спецификация чек-листом для проверки во время код-ревью.

## Установка

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

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

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

### Claude.ai

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

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

## Когда брать
- описать спецификацию состояний интерфейсного элемента
- проверить контрастность и доступность по стандарту WCAG 2.2 AA
- перевести отступы компонентов на базовую сетку 8pt
- составить чек-лист для проверки вёрстки на код-ревью

## Примеры запросов агенту
- Напиши спецификацию кнопки для дизайн-системы Clean
- Опиши состояния поля ввода по стандарту WCAG 2.2 AA с сенсорными целями от 44px
- Составь правила верстки модального окна на основе сетки 8pt

## Похожие
- [course-style](https://affpapa.org/nevibecode/skills/course-style.md) — скилл · 550 установок
- [typeui-fundamentals](https://affpapa.org/nevibecode/skills/typeui-fundamentals.md) — скилл · 2200 установок
- [blue-cloudy-clean-modern](https://affpapa.org/nevibecode/skills/blue-cloudy-clean-modern.md) — скилл · 1400 установок
- [design-system](https://affpapa.org/nevibecode/skills/design-system.md) — скилл · 33 установки
- [redesign](https://affpapa.org/nevibecode/skills/redesign.md) — скилл · 535 установок
- [ui-ux-pro-max](https://affpapa.org/nevibecode/skills/ui-ux-pro-max.md) — скилл · 415400 установок

Из того же набора: [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