CSS taste — ChatGPT prompt: what it does, how to install
Guides LLMs to write clean frontend code using Tailwind utility classes, CSS custom property tokens, and WCAG AA accessibility standards.
Open on GitHubWhat CSS taste does
This prompt sets strict frontend rules for AI code generation. It directs the assistant to style interfaces with Tailwind CSS classes while anchoring colors and spacing to CSS custom properties. Hardcoded hex values inside components are forbidden. Layouts rely on flexbox or grid with gap instead of sibling margins. Fluid typography uses clamp() instead of repetitive breakpoint overrides.
The rules enforce mobile-first responsive layouts down to 320px viewports without horizontal scrolling. Interactive elements must preserve focus styling with :focus-visible and pass WCAG AA contrast checks. Animations stay limited to transform and opacity, shutting down non-essential motion when prefers-reduced-motion is active.
When class lists repeat across markup, the prompt forbids @apply and demands extracting a component instead. Automatic Tailwind class ordering requires the Prettier plugin to work.
What it helps with
- Enforce Tailwind CSS utility classes and design tokens across UI components
- Eliminate hardcoded hex colors by referencing CSS custom properties
- Maintain WCAG AA contrast standards and explicit
:focus-visibleoutlines - Prevent horizontal scrolling on screens down to 320px width
Example prompts for the agent
- Build a responsive profile card in Tailwind CSS using CSS custom properties for theme colors
- Create an accessible login form that meets WCAG AA contrast and styles focus with
:focus-visible - Refactor this repeating group of Tailwind action buttons into components without using
@apply
How to install CSS taste
How to use
Paste the text at the start of a chat or into project instructions
Manually: put the files in place
.claude/commands/prompts.csv.mdQuestions about CSS taste
How do I install CSS taste in ChatGPT?
In ChatGPT or Claude.ai, paste the prompt instructions into your custom instructions or at the start of a session. For Claude Code, save the file to .claude/commands/prompts.csv.md.
What does the CSS taste prompt do?
It instructs the AI to follow strict frontend conventions, including mobile-first responsive design down to 320px, CSS custom property tokens, flexbox and grid spacing with gap, and WCAG AA accessibility compliance.
Why does the prompt avoid the @apply directive?
It requires extracting repetitive markup into separate components instead of generating @apply utility abstractions, keeping selector specificity flat.
Source text
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
