AgentSkillsCN

css-accessible

编写符合WCAG 2.2 AA级别的易用且高效的CSS代码，用于UI组件的样式化与整体布局设计。

SKILL.md
--- frontmatter
name: css-accessible
description: Написання доступного та продуктивного CSS коду, що відповідає стандартам WCAG 2.2 Level AA. Використовуй для стилізації UI-компонентів та загального лейауту.
version: 1.0.0

Інструкція генерації CSS

Протокол та Філософія

  1. •Mobile-First: Завжди починай стилізацію для найменших екранів. Використовуй min-width для медіа-запитів.
  2. •Змінні CSS: Використовуй CSS Custom Properties (--variable-name) для кольорів, шрифтів та відступів.
  3. •Препроцесори: Використання Sass/Less/Stylus заборонено. Використовуй нативний CSS Nesting (якщо це підтримується в vite.config.js).

Критерії Доступності (WCAG 2.2)

  1. •Контраст (1.4.3): Завжди перевіряй, що контраст тексту до фону складає мінімум 4.5:1 (для звичайного тексту).
  2. •Focus Not Obscured (2.4.11, 2.4.12): При створенні sticky-елементів (хедерів, футерів), завжди додавай scroll-padding-top до контейнера html або body, що дорівнює висоті sticky-елемента. Це гарантує, що при табуляції контент не сховається під хедером.
css
html {
  scroll-padding-top: 80px; /* Висота хедера */
}
  1. •Target Size (Розмір цілі) (2.5.8): Всі інтерактивні елементи (button, a, input) повинні мати мінімальну область кліку 24x24px (рекомендовано 44px для мобільних). Якщо візуально елемент малий (наприклад, іконка 16px), використовуй padding або псевдоелементи, щоб розширити активну зону.
css
.icon-btn {
  width: 16px;
  height: 16px;
  padding: 12px; /* Розширює зону кліку */
  box-sizing: content-box;
}
  1. •Видимий Фокус (2.4.13): Фокус має бути завжди видимим і мати високий контраст.
    • •ЗАБОРОНЕНО: outline: none; без чіткої та висококонтрастної заміни.