Checkliste zur Überprüfung von KI-generiertem Tailwind UI

[ ] Classes exist in the installed Tailwind version — v3 and v4 class names differ
[ ] Arbitrary values use valid CSS (e.g. w-[320px] not w-[320]) — unitless pixel values are invalid
[ ] Responsive prefixes (sm:, md:, lg:, xl:) are used mobile-first — base styles target mobile
[ ] Dark mode classes use dark: prefix and the project's darkMode config (class vs media)
[ ] Container has max-width and horizontal padding — bare container class has no padding by default
[ ] Flex and grid children do not overflow their parents on small screens
[ ] Text truncation (truncate) is applied to the element, not a parent without overflow-hidden
[ ] Dynamic class names are complete strings — no string interpolation like `text-${color}-500` (purged)
[ ] Arbitrary class values that use CSS variables are declared in the CSS or Tailwind config
[ ] No duplicate conflicting classes on the same element (e.g. text-sm and text-lg together)
[ ] ring and outline classes are not both removed on focus — at least one must remain for keyboard users
[ ] border-radius on parent clips children — add overflow-hidden if rounded corners should clip content

[ ] Interactive elements are focusable and have a visible focus ring — do not use outline-none without a replacement
[ ] Buttons and links have descriptive accessible labels — not just an icon with no aria-label
[ ] Icon-only buttons have aria-label or aria-labelledby
[ ] Color contrast meets WCAG AA — 4.5:1 for text, 3:1 for large text and UI components
[ ] Text color is not the only indicator of meaning — do not rely on red/green alone
[ ] sr-only is used for screen-reader-only labels, not hidden (which removes from accessibility tree)
[ ] Images have meaningful alt text — not empty alt="" unless truly decorative
[ ] Modal dialogs trap focus and restore it on close — check for focus-trap implementation
[ ] Skeleton loaders have aria-busy="true" and a descriptive aria-label
[ ] Disabled states use the disabled attribute on form elements, not just pointer-events-none
[ ] Animated elements respect prefers-reduced-motion — add motion-reduce: variants
[ ] Skip-to-content link is present and is the first focusable element on the page

[ ] Layout does not break at 320px viewport width (minimum supported mobile width)
[ ] Horizontal scrollbar is not introduced at any common breakpoint
[ ] Navigation collapses to a hamburger or similar pattern below md: breakpoint
[ ] Tables are scrollable horizontally on mobile — not truncated or overflowing
[ ] Font sizes are readable on mobile — minimum 16px (text-base) for body text
[ ] Touch targets are at least 44x44px — small icon buttons need padding added
[ ] Fixed-position elements (headers, modals) do not cover content on small screens
[ ] Image aspect ratios are maintained at all breakpoints — use aspect-ratio utilities

[ ] All text, background, and border colors have dark: variants
[ ] SVG icons with hardcoded fill colors have dark: fill variants or use currentColor
[ ] Box shadows are softened or removed in dark mode — dark:shadow-none where appropriate
[ ] Images with white backgrounds have dark:invert or are replaced with dark-mode variants
[ ] Third-party embeds (maps, charts) are dark-mode compatible or wrapped with a light-mode override

[ ] AI has not used Tailwind v2 classes removed in v3 (e.g. transform, filter, ring-opacity-*)
[ ] AI has not used Tailwind v3 classes that changed in v4 — review the v4 upgrade guide
[ ] AI has not used class: directive syntax from Svelte in a React/Astro project
[ ] Dynamic class strings built with template literals are safelisted in tailwind.config.js
[ ] AI has not assumed cn() or clsx() is available without the package being installed
[ ] AI-generated component does not import from @headlessui/react if the project uses a different component library
[ ] No inline styles mixed with Tailwind classes for the same property — one source of truth
[ ] AI has not added conflicting Tailwind plugins (e.g. typography and custom prose overrides)