Agent Skills
› NeverSight/learn-skills.dev
› bootstrap-mobile
bootstrap-mobile
GitHub针对iPhone 15 Safari的Bootstrap 5移动端开发技能，规范触控目标、处理Safari特性并禁止禁用缩放等做法。
Trigger Scenarios
构建移动端UI模板或组件
解决Safari特定CSS问题
优化移动端触控体验
Install
npx skills add NeverSight/learn-skills.dev --skill bootstrap-mobile -g -y
SKILL.md
Frontmatter
{
"name": "bootstrap-mobile",
"description": "Mobile-first Bootstrap 5 UI development targeting iPhone 15 (Safari). Use when building templates, layouts, components, or any HTML\/CSS\/JS UI for this project. Ensures touch-friendly, performant interfaces."
}
Bootstrap Mobile — решения этого проекта
Шаблоны уже написаны — смотри templates/. Этот скилл про неочевидные правила, которые нельзя угадать.
Цель: iPhone 15, Safari
- Логический viewport: 393×852pt
- Минимальная ширина приложения: 390px
- Браузер: Safari (WebKit) — не Chrome
Touch targets: 44×44pt минимум (Apple HIG)
/* static/css/main.css */
.btn, .form-check-input, .list-group-item-action {
min-height: 44px;
min-width: 44px;
}
.form-check-input {
width: 1.5em;
height: 1.5em; /* Bootstrap default слишком мал для пальца */
}
Если элемент меньше 44pt — пользователь будет промахиваться.
Safari gotchas
| Проблема | Решение |
|---|---|
input[type=number] показывает не ту клавиатуру |
Добавь inputmode="decimal" для дробных значений |
position: fixed прыгает при открытии клавиатуры |
Держи header минимальным, не используй высокие fixed элементы |
vh единицы не учитывают адресную строку |
Используй dvh или window.innerHeight |
overscroll-behavior не работает полностью |
Тестируй скролл вручную на реальном устройстве |
Запрещено
user-scalable=noв viewport — ломает доступность и нарушает Apple HIGvhдля полной высоты — используйdvh- Хардкодить
pxдля размеров — Bootstrap spacing (p-3,mt-2) илиrem - Привязывать обработчики к
hover— на мобиле hover нет
data-атрибуты (конвенция проекта)
data-purchase-id="42" <!-- ссылка на Purchase.pk -->
data-category-id="7" <!-- ссылка на Category.pk -->
ID передаются только через data-*. Никогда не парсить из текста или href.
Структура шапки (fixed-top)
Шапка фиксирована. После неё обязателен спейсер, иначе контент прячется под header:
<header class="navbar fixed-top ...">...</header>
<div style="height: 60px;"></div> <!-- компенсация fixed header -->
Version History
- e0220ca Current 2026-07-05 23:34
