frontend-design

Простым языком

Хочешь красивую кнопку, карточку или целую страницу — но не знаешь как написать код? Этот скилл превращает твоё описание в готовый визуальный компонент. Работает на мобильном, планшете и компьютере.

Опиши словами что должно выглядеть и как вести себя — Claude напишет код который сразу работает. Никаких правок в браузере, никаких загадочных ошибок.

Что делает

Скилл frontend-design создаёт React/Next.js компоненты с нуля: адаптивную вёрстку, анимации, тёмную тему, доступность (a11y). Claude пишет компоненты которые работают — без правок в браузере.

Специализируется на ретро-хакерском стиле (стек StackOverVibe): CRT-эффекты, глитч, neon glow, ASCII-арт, моноширинные шрифты.

Когда использовать

• Нужен новый React-компонент (карточка, форма, модал, таблица)
• Вёрстаешь страницу по макету или описанию
• Добавляешь анимацию (framer-motion, CSS transitions)
• Адаптируешь под мобильные устройства
• Ревьюишь компонент на доступность и производительность

Как работает — пошагово

1. Claude запрашивает: описание компонента, данные (props), контекст использования
2. Проверяет существующие компоненты — переиспользует если есть похожее
3. Пишет TypeScript-интерфейс пропсов с JSDoc-комментариями
4. Реализует компонент с Tailwind классами (mobile-first)
5. Добавляет анимации через framer-motion или CSS если нужно
6. Проверяет доступность: aria-атрибуты, keyboard navigation, contrast ratio

Промпты для Claude

Создай компонент FeedCard для отображения элемента ленты.
Типы: question, guide, tool, framework.
Данные: title, description, author, tags, stats (views, likes).
Стиль: ретро-хакер, тёмная тема, border-green-500/30.
Анимация: hover — glow эффект на border.

Сделай мобильное меню:
- Кнопка [=] / [x] в хедере
- Выдвигается сверху вниз
- Анимация: slide down + fade
- Закрывается по клику вне меню
- Блокирует скролл страницы

Пример компонента

// components/ui/Badge.tsx
interface БейджПропс {
  /** Текст бейджа */
  текст: string
  /** Вариант оформления */
  вариант?: 'default' | 'success' | 'warning' | 'error'
  className?: string
}

export function Бейдж({ текст, вариант = 'default', className }: БейджПропс) {
  const варианты = {
    default: 'border-green-500/30 text-green-400',
    success: 'border-emerald-500/30 text-emerald-400',
    warning: 'border-yellow-500/30 text-yellow-400',
    error: 'border-red-500/30 text-red-400',
  }
  return (
    <span className={`border px-2 py-0.5 text-xs font-mono ${варианты[вариант]} ${className}`}>
      {текст}
    </span>
  )
}

Автоматизация

Storybook для изолированной разработки компонентов:

# Запуск Storybook локально
npx storybook dev -p 6006

# Генерация story для компонента через Claude:
"Создай Storybook story для компонента Бейдж.
Покажи все 4 варианта: default, success, warning, error."

Частые вопросы

Как получить ретро-хакерский стиль?

В промпте укажи: "стиль ретро-хакер 80-х: тёмный фон #0a0a0a, зелёный текст #22c55e, моноширинный шрифт JetBrains Mono, CRT-скенлайны, border-green-500/30". Claude применит всё автоматически.

Как проверить доступность (a11y)?

Claude добавляет aria-label, role, tabIndex автоматически. Для проверки запусти npx axe-cli http://localhost:3000 или Chrome DevTools Accessibility tree.