# documentary-brutalist-agency

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

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1300 установок · ★ 7001
- Автор: MengTo
- Лицензия: MIT · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/documentary-brutalist-agency/SKILL.md
- Обновлён: 2026-10-25
- HTML: https://affpapa.org/nevibecode/skills/documentary-brutalist-agency

## Что делает

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

Внутри — правила визуальной системы и вёрстки. Пара шрифтов: сжатый дисплейный и нейтральный гротеск. Чёрный и тёплый белый, иногда бледно-мятные или розовые поверхности для отзывов. Сетка открыта, углы прямые, без стекла и градиентов. Коллаж собирается на CSS Grid: каждый бокс под изображение резервируется заранее, DOM-порядок совпадает с порядком повествования, параллакс ограничен 5%, подписи появляются и по наведению, и по фокусу.

Меню и FAQ строятся на семантических кнопках и нативных `details`/`summary`, `aria-expanded` обновляется, фокус запирается только внутри настоящего модального меню. Анимации — 160–220 мс для контролов и 500–760 мс для масок и входов секций. Скилл прямо запрещает выдуманные проекты, клиентов и награды, поэтому исходные имена, цитаты и ссылки придётся заменить своими. Проверка идёт в DOM-порядке с отключёнными CSS и анимацией, плюс переносы заголовков на 320px, планшете, десктопе и при зуме 200%.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill documentary-brutalist-agency -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill documentary-brutalist-agency -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill documentary-brutalist-agency -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MengTo/Skills documentary-brutalist-agency
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill documentary-brutalist-agency -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/documentary-brutalist-agency
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill documentary-brutalist-agency -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/documentary-brutalist-agency/SKILL.md

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

## Примеры запросов агенту
- Собери главную для архитектурного бюро в стиле documentary brutalist: билборд-заголовок, чёрные главы с проектами, светлая глава о подходе
- Сделай документальный коллаж из фотографий со стройки, параллакс не больше 5%, подписи по hover и focus
- Переделай меню и FAQ на семантические кнопки и `details`/`summary`, проверь фокус и `aria-expanded`

## Похожие
- [industrial-brutalist-ui](https://affpapa.org/nevibecode/skills/industrial-brutalist-ui.md) — скилл · 1700 установок
- [brutalism](https://affpapa.org/nevibecode/skills/brutalism.md) — скилл · 2400 установок
- [industrial-brutalist](https://affpapa.org/nevibecode/skills/industrial-brutalist.md) — скилл · 311 установок
- [editorial](https://affpapa.org/nevibecode/skills/editorial.md) — скилл · 2700 установок
- [interface-kit](https://affpapa.org/nevibecode/skills/interface-kit.md) — скилл · 2200 установок
- [course-style](https://affpapa.org/nevibecode/skills/course-style.md) — скилл · 550 установок

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

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