Fähigkeiten ui-skills
🎨

ui-skills

Sicher

Создание согласованных пользовательских интерфейсов с ограничениями дизайна

ИИ-агенты часто создают противоречивый UI-код в разных сессиях. Этот навык предоставляет продуманные ограничения и шаблоны дизайна для обеспечения согласованной и доступной генерации интерфейсов каждый раз.

Unterstützt: Claude Codex Code(CC)
📊 71 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "ui-skills". Сгенерируйте компонент карточки, используя шаблоны ui-skills

Erwartetes Ergebnis:

Переиспользуемый компонент Card с согласованными отступами, радиусом границ, токенами теней и поддержкой слотов для заголовка, тела и подвала. Включает состояния наведения и атрибуты доступности.

Verwendung von "ui-skills". Создайте модальный диалог, следуя ограничениям ui-skills

Erwartetes Ergebnis:

Компонент Modal с блокировкой фокуса, обработкой клавиши Escape, обнаружением клика по фону и правильными ARIA-ролями для скринридеров.

Sicherheitsaudit

Sicher
v1 • 2/25/2026

This skill contains documentation-only content (SKILL.md) with no executable code. Static analysis flagged URLs and patterns that are false positives - the URLs are GitHub repository references in documentation, not network requests. No security risks detected.

1
Gescannte Dateien
23
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
32
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

Frontend-разработчик, создающий дизайн-систему

Используйте этот навык для генерации согласованных шаблонов компонентов, следующих установленным принципам дизайна и стандартам доступности.

ИИ-агент, создающий UI-компоненты

Позвольте ИИ-ассистентам по кодированию создавать UI-код, который соответствует ограничениям и шаблонам дизайна вашей команды.

Стартап-команда, стандартизирующая UI-разработку

Создайте общий словарь UI-паттернов для небольших команд без выделенных дизайн-ресурсов.

Probiere diese Prompts

Генерация базового компонента кнопки 
Используя шаблоны ui-skills, создайте компонент кнопки с состояниями primary, secondary и disabled. Включите атрибуты доступности и состояния фокуса.
Создание формы ввода с валидацией 
Примените ограничения ui-skills для создания компонента текстового ввода с меткой, плейсхолдером, состоянием ошибки и сообщениями валидации. Следуйте рекомендациям WCAG.
Построение адаптивного компонента навигации 
Используя шаблоны ui-skills, создайте компонент навигации, который работает на десктопе и мобильных устройствах. Включите навигацию с клавиатуры и поддержку скринридеров.
Проектирование таблицы данных с сортировкой 
Примените ограничения ui-skills для генерации компонента таблицы данных с сортируемыми колонками, выбором строк и пагинацией. Обеспечьте соответствие требованиям доступности.

Bewährte Verfahren

  • Всегда определяйте токены дизайна (отступы, цвета, типографика) перед генерацией компонентов
  • Тестируйте компоненты с навигацией с клавиатуры и скринридерами во время разработки
  • Документируйте пропсы компонентов, состояния и примеры использования для согласованности команды

Vermeiden

  • Хардкод значений цветов вместо использования токенов дизайн-системы
  • Игнорирование состояний фокуса и навигации с клавиатуры в интерактивных элементах
  • Создание чрезмерно сложных компонентов, которые следует разделить на более мелкие единицы

Häufig gestellte Fragen

Какие фреймворки поддерживает этот навык?
Этот навык фокусируется на шаблонах компонентов на React, но принципы дизайна применимы к любому frontend-фреймворку.
Генерирует ли этот навык реальный CSS-код?
Нет, он предоставляет структуру и шаблоны компонентов. Стилизация должна применяться с использованием вашей существующей дизайн-системы или CSS-фреймворка.
Как интегрировать это с моей существующей дизайн-системой?
Сопоставьте ваши токены дизайна (отступы, цвета, типографика) с шаблонами в этом навыке перед генерацией компонентов.
Можно ли кастомизировать требования доступности?
Да, навык использует WCAG в качестве базового уровня, но вы можете указать дополнительные требования в ваших промптах.
Подходит ли этот навык для mobile-first разработки?
Да, шаблоны поддерживают адаптивный дизайн и подходы mobile-first с соответствующими ограничениями.
Как часто обновляются шаблоны дизайна?
Шаблоны развиваются на основе отзывов сообщества и новых лучших практик в UI-разработке.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/ui-skills

Ref

main

Dateistruktur

📄 SKILL.md