Frontend UI
Frontend UI checklist — CSS specificity, dark/light themes, visual testing, mobile responsiveness, i18n parity. Apply when editing HTML/CSS.
Overview
Frontend UI is a quality checklist loaded whenever a task modifies HTML, CSS, templates, or visual components. It catches recurring UI bugs that pass HTTP/syntax checks but break the visual experience — dark mode light leaks, broken mobile layouts, missing accessibility labels, and incorrect social previews.
CSS Dark/Light Mode
Light mode is the default, .dark class is the override. The skill enforces a strict ban on :not(.dark) selectors, which is a common anti-pattern that causes light colors to leak into dark mode because :not(.dark) matches any ancestor without the class, including <body> and <section>.
Visual Verification
HTTP 200 + valid HTML is insufficient for UI tasks. Required checks include screenshots in both dark and light modes, mobile viewport (320px, 375px), tablet (768px), desktop (1280px+), and instant theme toggle without flashing the wrong theme.
Checklist Areas
- i18n UI Parity — identical translation keys across languages, working language switcher, URL prefix support, text length handling (Russian text is 20-30% longer than English)
- Mobile Responsiveness — hamburger navigation, 44x44px tap targets, no content overflow, scaled images, minimum 14px base font
- Accessibility Baseline — WCAG AA color contrast, accessible button labels, visible focus states, skip-to-content link, reduced motion support
- Performance Hygiene — lazy-loaded below-fold images, font-display swap, deferred scripts, no unbounded CSS animations
- SEO & Social Preview — unique titles and descriptions, Open Graph and Twitter Card tags, existing og:image file, canonical URLs, hreflang in sitemap
Source of Truth for Component Counts
Before generating lists of framework components (agents, skills, commands) for content or documentation, always query the filesystem — never rely on cached numbers from previous sessions. Stale counts have caused errors on production sites (e.g., showing "15 agents / 18 skills" when actuals were 16/22).
When It's Used
Applied during /dr-do for any task modifying .html, .php, .css, .vue, or .tsx files. The tester agent includes this checklist in Web UI testing mode, and the reviewer agent verifies compliance during /dr-qa.