# bootstrap

Задаёт агенту правила работы с Bootstrap: сетка, компоненты, утилиты и валидация форм. Пригодится, когда интерфейс собирают без своего CSS.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 установок · ★ 286
- Автор: Mindrally
- Лицензия: Apache-2.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/Mindrally/skills/tree/HEAD/bootstrap/SKILL.md
- Обновлён: 2026-10-08
- HTML: https://affpapa.org/nevibecode/skills/mindrally-bootstrap

## Что делает

Скилл превращает агента в аккуратного верстальщика на Bootstrap. Он подсказывает структуру `container` → `row` → `col-*`, брейкпоинты `sm`, `md`, `lg`, `xl`, `xxl` и готовые компоненты вместо самописных блоков. Кастомный CSS при этом советует держать минимальным.

Внутри — разделы по сетке, кнопкам, модальным окнам, алертам, утилитам отступов и текста, валидации форм и доступности. Есть примеры разметки: модалка с `data-bs-dismiss`, форма с `needs-validation` и `invalid-feedback`, флекс-строка с `d-none d-md-block`. Кастомизацию скилл советует вести через Sass-переменные, а не через переопределение стилей.

Учтите: это набор правил для агента, а не библиотека. Сам Bootstrap в проект он не поставит, и если у вас Tailwind или собственная дизайн-система, советы по классам будут конфликтовать с ней.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill bootstrap -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill bootstrap -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill bootstrap -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Mindrally/skills bootstrap
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill bootstrap -a gemini-cli
```

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill bootstrap -a opencode
```

### Claude.ai

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

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

## Когда брать
- собрать адаптивную сетку без ручного CSS
- подключить модальное окно с закрытием по кнопке
- показать ошибку под полем формы
- заменить самописные стили утилитами Bootstrap
- настроить тему через Sass-переменные

## Примеры запросов агенту
- Сверстай карточку товара на сетке Bootstrap с брейкпоинтами md и lg
- Сделай форму подписки с валидацией и сообщением об ошибке под полем
- Перепиши этот блок на утилиты Bootstrap, кастомный CSS убери

## Похожие
- [better-layout](https://affpapa.org/nevibecode/skills/better-layout.md) — скилл · 30800 установок
- [tailwindcss-mobile-first](https://affpapa.org/nevibecode/skills/tailwindcss-mobile-first.md) — скилл · 2100 установок
- [Frontend Responsive Design Standards](https://affpapa.org/nevibecode/skills/frontend-responsive-design-standards.md) — скилл · 1200 установок
- [responsive-design](https://affpapa.org/nevibecode/skills/akillness-responsive-design.md) — скилл · 478 установок
- [tailwindcss-responsive-darkmode](https://affpapa.org/nevibecode/skills/tailwindcss-responsive-darkmode.md) — скилл · 476 установок
- [tailwind-responsive-ui](https://affpapa.org/nevibecode/skills/tailwind-responsive-ui.md) — скилл · 461 установка

## Другие версии с тем же именем
- [bootstrap · bytedance](https://affpapa.org/nevibecode/skills/bytedance-bootstrap.md) — 1500 установок
- [bootstrap · openai](https://affpapa.org/nevibecode/skills/bootstrap.md) — 4 установки

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

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

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