ui-design-system

Before generating any UI code, check the project for existing tokens:

If no design tokens exist, generate a starter set and ask the user to confirm before proceeding (see Edge Cases).

Define colors as CSS custom properties consumed by Tailwind. Never use hardcoded hex/rgb values in components.

Создает согласованные компоненты пользовательского интерфейса, макеты и токены дизайна в соответствии с системой дизайна. Обеспечивает соблюдение стандартов интервалов, цвета, типографики и доступности в проектах React/TypeScript. Используйте при создании новых компонентов пользовательского интерфейса, создании макетов страниц, выборе цветов или типографики, настройке токенов дизайна или проверке кода пользовательского интерфейса на предмет единообразия дизайна. Охватывает сетку с интервалами 8 пунктов, использование токенов CSS Tailwind, примитивы shadcn/ui, соответствие WCAG 2.1 AA, адаптивные точки останова, семантическую структуру HTML и интерфейсы компонентов TypeScript. НЕ охватывает реализацию серверной части (используйте python-backend-expert), тестирование (используйте шаблоны реагирования-тестирования) или развертывание (используйте конвейер развертывания). Источник: hieutrtr/ai1-skills.