DESIGN-UX SuperSkill

Заменяет: brand-guidelines, excalidraw-diagram, theme-factory, accessibility-wcag, canvas-design (5 скилов) Триггеры: "дизайн", "UI/UX", "цветовая схема", "тема", "диаграмма", "WCAG", "брендинг", "Excalidraw", "постер" Атомов: 62

КОГДА ПРИМЕНЯТЬ

• Создание визуальных артефактов (постеры, PDF, PNG)
• Excalidraw диаграммы (архитектура, workflows, concepts)
• Применение брендинга и тем к артефактам
• WCAG 2.2 accessibility аудит и исправления
• Дизайн-системы: цвета, типографика, компоненты
• UI/UX review: contrast, touch targets, keyboard navigation

КЛЮЧЕВЫЕ ПРИНЦИПЫ

1. Диаграммы должны АРГУМЕНТИРОВАТЬ, не ОТОБРАЖАТЬ: если убрать текст, структура сама передаёт смысл (Isomorphism Test)
2. Canvas: Philosophy → Expression: сначала создать визуальную философию (.md), потом выразить визуально (PDF/PNG)
3. Craftsmanship повторять: "meticulously crafted", "master-level execution", "painstaking attention" — фреймить работу как экспертную
4. Themes: 10 пресетов + custom: Ocean Depths, Sunset Boulevard, Forest Canopy, Modern Minimalist, Golden Hour, Arctic Frost, Desert Rose, Tech Innovation, Botanical Garden, Midnight Galaxy
5. WCAG AA минимум: contrast 4.5:1 для текста, 3:1 для крупного, touch targets ≥ 44px, focus visible на всех интерактивных элементах
6. Semantic HTML first: <nav>, <main>, <article>, <section> вместо <div>. Screen readers используют landmarks
7. Anthropic brand: Dark #141413, Light #faf9f5, Orange #d97757, Blue #6a9bcc, Green #788c5d, Headings: Poppins, Body: Lora

ПАТТЕРНЫ И ТЕХНИКИ

Canvas Design (PDF/PNG)

1. Name the movement: "Brutalist Joy" / "Chromatic Silence" / "Metabolist Dreams"
2. Articulate philosophy (4-6 paragraphs): space/form, color/material, scale/rhythm, composition/balance
3. Express visually: 90% визуальный дизайн, 10% текст как акцент
4. Избегать: redundancy в описаниях, generic AI aesthetics

Philosophy examples:

• Concrete Poetry: монументальные формы, bold geometry, Polish poster energy
• Chromatic Language: цвет как информационная система, Josef Albers meets data viz
• Analog Meditation: текстуры, negative space, Japanese photobook aesthetic

Excalidraw Diagrams

{
  "type": "excalidraw",
  "version": 2,
  "elements": [
    {
      "type": "rectangle",
      "x": 100, "y": 100,
      "width": 200, "height": 80,
      "backgroundColor": "#a5d8ff",
      "strokeColor": "#1971c2"
    }
  ]
}

• Evidence artifacts: код snippets (dark bg + syntax color), JSON examples, event sequences
• Depth assessment: Simple/conceptual → abstract shapes; Technical → concrete examples с real specs
• Research mandate: для технических диаграмм — изучить реальные спецификации, API endpoints, event names

Theme Application

1. Показать theme-showcase.pdf пользователю
2. Подождать выбор темы
3. Прочитать спецификацию из themes/ директории
4. Применить цвета и шрифты консистентно
5. Custom theme: сгенерировать по описанию, показать для review

WCAG 2.2 Accessibility

Semantic HTML:

<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/" aria-current="page">Home</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Title</h1>
    <section aria-labelledby="specs-heading">
      <h2 id="specs-heading">Specs</h2>
    </section>
  </article>
</main>

ARIA Patterns:

• Modal: role="dialog", aria-modal="true", aria-labelledby, Escape to close
• Tabs: role="tablist", role="tab", aria-selected, aria-controls, arrow key navigation
• Accordion: aria-expanded, aria-controls, Enter/Space to toggle
• Live regions: aria-live="polite" для updates, "assertive" для alerts

Keyboard:

• Tab: перемещение между focusable элементами
• Arrow keys: навигация внутри компонента (tabs, menus, radio groups)
• Escape: закрыть modal/dropdown
• Enter/Space: активация
• Focus trap в modals: Tab cycle внутри, restore focus on close

Color & Contrast:

• Text: ≥ 4.5:1 (AA), ≥ 7:1 (AAA)
• Large text (≥18pt / 14pt bold): ≥ 3:1
• Non-text elements: ≥ 3:1
• Никогда цвет как единственный индикатор (добавить icon/text)

ЧЕКЛИСТ

• [ ] Все интерактивные элементы доступны с клавиатуры
• [ ] Focus visible на всех focusable элементах
• [ ] Alt text на всех информативных изображениях
• [ ] Heading hierarchy без пропусков (H1 → H2 → H3)
• [ ] Color contrast проверен (axe-core / Lighthouse)
• [ ] ARIA roles корректны (не дублируют семантический HTML)
• [ ] Touch targets ≥ 44x44px
• [ ] Диаграммы: education test пройден (можно чему-то научиться)
• [ ] Темы: consistent цвета и шрифты по всему артефакту

ПРИМЕРЫ

Excalidraw architecture diagram

Задача: "нарисуй архитектуру микросервисов"
1. Research: реальные названия сервисов, event types, API endpoints
2. Layout: left-to-right flow, service boxes с real names
3. Evidence: JSON event examples в dark rectangles
4. Connections: arrows с event type labels
5. Color: service groups по цвету, consistent palette