Opinionated preferences for writing maintainable, accessible and responsive CSS in modern web apps.
# 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
Audits foreground/background color pairs for WCAG 2.x contrast (AA and AAA for normal and large text), reports ratios and pass/fail, and notes color-blindness risks. Use when checking UI palettes, design tokens, or asking "is this gray-on-white readable?". Includes a stdlib Python contrast checker with --self-test.
Checks a site's robots.txt and XML sitemap offline the way Google reads them. Picks the crawler's group, resolves longest-match Allow and Disallow with wildcards, and tests the URLs that must be crawlable or blocked. Flags whole-site blocks, sitemap URLs that robots.txt blocks, blocked CSS and JS, unsupported noindex and crawl-delay lines, off-site, duplicate or invalid sitemap entries. Includes a stdlib Python checker with --self-test.
Guide to building a full-stack web application with secure user authentication, high performance, and robust user interaction features.
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
