Skill v1.0.1

currentAutomated scan100/100

anastasiyaw/codex-claude-code-config/frontend-design

+7 new

──Details

PublishedOctober 15, 2026 at 04:27 AM

Content Hashsha256:db08332f1bf4a140...

Git SHAf8fae2d3ee32

Bump Typepatch

Compare with v1.0.0

──Files

Files (1 file, 6.4 KB)

SKILL.md6.4 KBactive

SKILL.md · 139 lines · 6.4 KB

version: "1.0.1" name: frontend-design description: > Создание высококачественных, визуально выдающихся фронтенд-интерфейсов. Используй ВСЕГДА когда пользователь просит создать веб-страницу, компонент, лендинг, дашборд, UI-кит, форму, карточки, навигацию, анимации, или любой другой веб-интерфейс. Скилл покрывает: HTML/CSS/JS компоненты, React/Vue/Svelte, Tailwind CSS, адаптивный и мобильный дизайн, визуальные стили (glassmorphism, neomorphism, material, flat, градиенты, тёмная тема), интерактивность (drag-and-drop, анимации, hover-эффекты, transitions), верстку (Flexbox, Grid, Container Queries), производительность, доступность (WCAG/ARIA), дизайн-системы и токены. Если пользователь хочет что-то "красивое", "современное", "стильное" в вебе — обязательно используй этот скилл. НЕ используй для нативных мобильных приложений (iOS/Swift/SwiftUI, Android) — для iOS бери скилл ios-development; этот скилл только про веб-UI (браузер).

Frontend Design Skill

Для продуктового интерфейса общая точка входа — `ui-design`: единый контракт дизайна, реализации и проверки. Прочитай его один раз, если он ещё не загружен; затем вернись к нужным референсам ниже, без повторного обхода ссылок. Редактируемые hero/баннеры, инфографика и отдельные визуальные ассеты также описаны там. Этот файл — веб-специализация, не второй независимый процесс и не замена правил продукта.

Этот скилл — о создании визуально выдающихся интерфейсов. Не просто рабочих — а таких, где дизайн говорит сам за себя. Основной принцип: каждый интерфейс должен выглядеть как работа 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)
[ ] Поведение загрузки шрифтов проверено в браузере; font-display: swap не доказывает отсутствие FOUT
[ ] Картинки имеют alt-текст
[ ] Кнопки имеют :focus-visible стиль
[ ] Нет горизонтального скролла
[ ] Loading-состояния для асинхронных данных
[ ] Empty-state для пустых списков

← v1.0.0 All versions