The frontend-ui Skill — The Checklist HTTP 200 Cannot Replace
How Datarim catches recurring UI bugs that pass syntax checks — dark mode specificity traps, broken mobile viewports, i18n key drift, accessibility gaps, and stale component counts — with a structured nine-section checklist.
A page that returns HTTP 200 with valid HTML can still render with broken dark mode, overflowing text on a 375px screen, missing Open Graph tags, or hardcoded strings appearing in the wrong language. The frontend-ui skill is a structured checklist for any task that touches HTML, CSS, templates, or visual components. It catches the recurring class of UI bugs that unit and HTTP checks miss.
The skill loads for any /dr-do that modifies .html, .php templates, .css, .vue, or .tsx files touching the UI, and for any task with type "Website Development" or "Frontend". It is also the compliance reference before closing UI tasks with /dr-compliance.
Dark mode specificity — the silent breakage
The most common CSS failure in dark/light theming is the :not(.dark) selector. It matches any ancestor element that does not carry the dark class — which includes <body>, <section>, and every other container. Because those ancestors are also ancestors of the targeted component, the selector always matches regardless of theme state, and light colors leak into dark mode based on cascade order.
The correct pattern is to write light styles as the default with no class prefix, and dark overrides as .dark .component. The checklist verifies that Tailwind is configured with darkMode: 'class', that no :not(.dark) selectors appear in any CSS file, and that the initial dark class on <html> is sourced from localStorage.
Visual and viewport verification
The checklist requires screenshots of both dark and light modes, and viewport checks at 320px and 375px (no horizontal scroll, readable text), 768px (layout adapts), and 1280px and above (max-width containers work). For multilingual sites, the i18n section checks that all language files have identical keys, that the language switcher works from every page, that /en/ and /ru/ URL prefixes are respected on all internal links, and that text layout handles the approximately 20–30% extra length Russian text carries compared to English.
At /dr-qa, an automated Playwright pass runs against the local dev surface when any of the visual sections are touched. The pass captures screenshots and records findings under datarim/qa/playwright-{ID}/. Visual review of whether the screenshot matches intent remains an operator step — the automated pass captures evidence, it does not adjudicate aesthetics.
Component counts as a source of truth
The skill includes a rule about generating counts of framework components — agents, skills, commands — for content or documentation. Those counts must come from a live filesystem query at write time, never from session memory. A prior incident produced a page showing "15 agents / 18 skills" while the actual counts were 16 and 22 respectively, and 6 use cases instead of 13. All three errors came from cached data rather than a ls ... | wc -l call.
Performance, accessibility, and SEO
The remaining sections cover accessibility (WCAG AA color contrast, accessible button labels, visible focus states, reduced-motion support), performance hygiene (no unbounded CSS animations, lazy-loaded images, font-display swap, deferred scripts), and SEO and social preview (unique page titles, meta descriptions, Open Graph and Twitter Card tags, canonical URLs, hreflang in the sitemap for multilingual sites). Each section is a short, actionable checklist rather than a style guide.
Read more about the Datarim pipeline in what Datarim is, or see how the health-controller-stub-detector skill catches a different class of silent-pass bugs at implementation time.