# dark-mode-design-expert

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

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 304 установки · ★ 254
- Автор: curiositech
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/curiositech/some_claude_skills/tree/HEAD/.claude/skills/dark-mode-design-expert/SKILL.md
- Обновлён: 2026-09-06
- HTML: https://affpapa.org/nevibecode/skills/dark-mode-design-expert

## Что делает

Скилл включается на словах «dark mode», «night mode», «prefers-color-scheme», «OLED optimization» и разбирает тёмную тему по слоям: сначала сырые цвета, потом смысловые токены, потом компоненты. Внутри трёхуровневая архитектура токенов на CSS-переменных — примитивы, семантические значения и компонентный слой. Палитры строятся вокруг сумерек, заката и океана, а не вокруг чистого чёрного.

Главное правило, которое скилл проводит последовательно: в тёмной теме поверхности приподнимаются светлее фона, а тень заменяется свечением. Чистый белый текст на чёрном фоне он не советует — высокий контраст 21:1 утомляет глаза сильнее умеренного, целевой диапазон для основного текста 12:1–16:1. Для мелкого текста минимум 4.5:1, для крупного от 24px — 3:1, для границ и иконок тоже 3:1.

Скилл не для подбора шрифтов и не для общей палитры: для этого в наборе есть отдельные единицы, а проверку контраста конкретных цветов он передаёт `color-contrast-auditor`. Установка идёт через `npx skills add`, файл скилла ложится в `~/.claude/skills/dark-mode-design-expert/SKILL.md`.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill dark-mode-design-expert -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill dark-mode-design-expert -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill dark-mode-design-expert -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install curiositech/some_claude_skills dark-mode-design-expert
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill dark-mode-design-expert -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/curiositech/some_claude_skills --path .claude/skills/dark-mode-design-expert
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add curiositech/some_claude_skills --skill dark-mode-design-expert -a opencode
```

### Claude.ai

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

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

## Когда брать
- собрать тёмную тему без чистого чёрного фона
- проверить контраст текста и иконок по WCAG 2.1
- сделать переключение light/dark через `prefers-color-scheme`
- выстроить приподнятые поверхности и свечение вместо теней
- сэкономить батарею на OLED-экранах

## Примеры запросов агенту
- Сделай тёмную тему для этого дашборда: поверхности светлее фона, свечение вместо теней
- Проверь контраст основного текста в тёмной схеме — нужен диапазон 12:1–16:1
- Добавь переключение light/dark через `prefers-color-scheme` и семантические токены

## Похожие
- [dark-mode-design](https://affpapa.org/nevibecode/skills/dark-mode-design.md) — скилл · 2400 установок
- [glass-dark-mode-clock](https://affpapa.org/nevibecode/skills/glass-dark-mode-clock.md) — скилл · 1400 установок
- [dark-mode-testing](https://affpapa.org/nevibecode/skills/dark-mode-testing.md) — скилл · 436 установок
- [ui-design](https://affpapa.org/nevibecode/skills/mindrally-ui-design.md) — скилл · 981 установка
- [tech-green-dark-mode-modern](https://affpapa.org/nevibecode/skills/tech-green-dark-mode-modern.md) — скилл · 1400 установок
- [law-of-figure-ground](https://affpapa.org/nevibecode/skills/law-of-figure-ground.md) — скилл · 1100 установок

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

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

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