CSS taste — промпт для ChatGPT: что делает и как установить
Промпт задаёт правила вёрстки для фронтенд-разработки: учит модель использовать Tailwind, дизайн-токены в CSS custom properties и верстать интерфейсы с учётом требований доступности WCAG AA.
Открыть на GitHubЧто делает CSS taste
Промпт задаёт системные инструкции для вёрстки компонентов и стилизации интерфейсов. Модель ориентируется на Tailwind CSS, токены в CSS custom properties и запрещает хардкодить hex-цвета. Разметка строится на flexbox и grid с отступами через gap без использования margin между соседями. Для типографики используется функция clamp(), а размеры шрифтов и отступы задаются в rem.
Свод правил делает упор на адаптивность и доступность. Вёрстка проектируется от мобильных экранов к десктопным, исключая горизонтальную прокрутку при ширине окна 320px. Промпт требует соблюдать контрастность WCAG AA и не удалять контуры фокуса, настраивая их через :focus-visible. Тёмная тема поддерживается через prefers-color-scheme и дизайн-токены без дублирования стилей. Анимации разрешены только для transform и opacity с отключением лишней динамики при prefers-reduced-motion.
При частом повторении длинных списков классов промпт запрещает директиву @apply и требует выносить код в отдельный компонент. Без установленного плагина Prettier автоматическая сортировка утилит Tailwind работать не будет.
Какие задачи решает
- Задать правила стилизации компонентов через утилиты Tailwind CSS
- Вынести цвета и отступы в CSS custom properties без явных hex-значений
- Обеспечить доступность интерфейса по WCAG AA и настроить контуры
:focus-visible - Адаптировать вёрстку под экраны от 320px без горизонтальной полосы прокрутки
Примеры запросов агенту
- Сверстай адаптивную карточку профиля на Tailwind CSS с поддержкой тёмной темы через CSS custom properties
- Оформи форму входа с проверкой доступности WCAG AA, фокусом через
:focus-visibleи анимацией наopacity - Разбей повторяющийся блок кнопок на компоненты без использования директивы
@apply
Как установить CSS taste
Как использовать
Вставьте текст в начало диалога или в инструкции проекта
Вручную: положить файлы
.claude/commands/prompts.csv.mdВопросы о CSS taste
Как установить CSS taste в ChatGPT?
Для ChatGPT и Claude.ai скопируйте текст промпта в системные инструкции или отправьте первым сообщением в чат. В Claude Code эти правила можно сохранить в файл .claude/commands/prompts.csv.md.
Что делает промпт CSS taste?
Он задаёт модели стандарты современного фронтенда: вёрстку на flexbox и grid с отступами gap, мобильную адаптивность от 320px, использование дизайн-токенов вместо hex-цветов и соблюдение доступности по WCAG AA.
Почему промпт запрещает использовать директиву @apply?
Промпт рекомендует при повторении длинных списков утилит Tailwind сразу выделять код в отдельный переиспользуемый компонент, сохраняя плоскую специфичность селекторов.
Исходный текст
prompts.csv · CC0-1.0
# CSS taste of a design-minded frontend developer - Use Tailwind CSS utility classes for component styling in application code. Confidence: 0.80 - Define colors, spacing, radii and fonts as design tokens in CSS custom properties. Confidence: 0.90 - Never hardcode hex colors inside components; always reference a token. Confidence: 0.85 - Build layouts with flexbox and grid, with gap for spacing instead of margins between siblings. Confidence: 0.90 - Design mobile first and add min-width breakpoints for larger screens. Confidence: 0.85 - Use container queries for components that live in containers of different widths. Confidence: 0.75 - Use rem for font sizes and spacing, and px only for hairline borders. Confidence: 0.80 - Use clamp() for fluid typography instead of many breakpoint overrides. Confidence: 0.75 - Keep specificity flat: single class selectors, no IDs, and no !important outside utilities. Confidence: 0.90 - Use cascade layers to order reset, base, components and utilities. Confidence: 0.70 - Support dark mode with prefers-color-scheme plus tokens, not duplicated component styles. Confidence: 0.85 - Respect prefers-reduced-motion and disable non-essential animation when it is set. Confidence: 0.90 - Never remove focus outlines; style them with :focus-visible instead. Confidence: 0.95 - Meet WCAG AA contrast for all text and interactive elements. Confidence: 0.90 - Animate only transform and opacity for smooth, cheap transitions. Confidence: 0.85 - Use logical properties such as margin-inline so layouts work in right-to-left languages. Confidence: 0.75 - Use the system font stack or self-hosted variable fonts with font-display: swap. Confidence: 0.80 - Set aspect-ratio and width and height on media to prevent layout shift. Confidence: 0.85 - Use native CSS nesting sparingly and never more than two levels deep. Confidence: 0.70 - Sort Tailwind classes automatically with the Prettier plugin. Confidence: 0.80 - Extract a component when the same long class list repeats, not an @apply class. Confidence: 0.75 - Make sure nothing scrolls horizontally at a 320px viewport width. Confidence: 0.85
© f · CC0-1.0 · f/prompts.chat
