frontend-design

# Frontend Design Skill

Этот скилл — о создании **визуально выдающихся** интерфейсов. Не просто рабочих — а таких, где дизайн
говорит сам за себя. Основной принцип: каждый интерфейс должен выглядеть как работа senior-дизайнера,
а не как «шаблон из интернета».

## Навигация по reference-файлам

| Тема | Файл |
|------|------|
| Верстка, CSS, адаптив, Flexbox/Grid | `references/layout-css.md` |
| Визуальные стили, цвет, типографика, эффекты | `references/visual-styles.md` |
| Компоненты, фреймворки, React/Vue/Tailwind | `references/components-frameworks.md` |
| Производительность, доступность, SEO | `references/performance-a11y.md` |

Читай нужный reference-файл перед тем как писать код.

---

## Золотые правила хорошего UI

### 1. Иерархия важнее красоты
Пользователь должен за 3 секунды понять: что это, что важно, что делать.
- Один главный акцент на экране
- Размер и вес текста = важность информации
- Пустое пространство — не «пустое», а воздух для восприятия

### 2. Консистентность убивает хаос
- Один радиус скругления на весь интерфейс (4/8/12/16px)
- Одна шкала отступов (4px / 8px / 12px / 16px / 24px / 32px / 48px / 64px)
- Максимум 2 шрифта: заголовочный + основной
- Максимум 3 цвета: основной, акцентный, нейтральный

### 3. Детали создают профессионализм
```css
/* Плохо — резкие переходы */
button { background: blue; }
button:hover { background: darkblue; }

/* Хорошо — всё плавно */
button {
  background: #3b82f6;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
button:hover {
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(59,130,246,0.4);
  transform: translateY(-1px);
}
```

### 4. Mobile-first — не опция, а стандарт
Начинай с мобильного экрана, расширяй для десктопа.

---

## Быстрые рецепты по стилям

### Современный минимализм (2024-2025 тренд)
```css
:root {
  --bg: #0f0f11;
  --surface: #1a1a1f;
  --border: rgba(255,255,255,0.08);
  --text: #e4e4e7;
  --muted: #71717a;
  --accent: #6366f1;
}
```

### Glassmorphism
```css
.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
}
```

### Soft Neomorphism
```css
.neu {
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow: 6px 6px 14px #b8bec7, -6px -6px 14px #ffffff;
}
```

### Градиентный акцент
```css
.gradient-text {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
```

---

## Чек-лист перед сдачей интерфейса

- [ ] Работает на мобильном (320px минимум)
- [ ] Hover-эффекты на всех интерактивных элементах
- [ ] Анимации плавные (transition не > 300ms)
- [ ] Контрастность текста ≥ 4.5:1 (WCAG AA)
- [ ] Шрифты загружаются без FOUT (font-display: swap)
- [ ] Картинки имеют alt-текст
- [ ] Кнопки имеют :focus-visible стиль
- [ ] Нет горизонтального скролла
- [ ] Loading-состояния для асинхронных данных
- [ ] Empty-state для пустых списков