Menu
Frontend UI checklist — CSS specificity, dark/light themes, visual testing, mobile responsiveness, i18n parity. Apply when editing HTML/CSS.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Question Suppression Ladder + L1 Inline Resolution Rule + Hard-gated Action Boundary. Activated by DATARIM_AUTO_MODE=1 + a per-task autonomous-mode marker.
Use when implementation is complete and all tests pass. Decides how to integrate the work via merge, PR, or cleanup with structured options.
Canonical S1–S9 security rule reference cited from CLAUDE.md § Security Mandate. Load for plan/qa/compliance/do touching shipped artefacts.
Technical rules for publishing content to social media and websites — platform limits, formatting, API patterns, OG tags, multi-platform workflow.
Testing pyramid, frameworks, mocking. Load first; then the fragment for the active gate (live smoke, silent failure, bats, legacy triage).
Operator wishlist checklist seeded at /dr-prd or /dr-plan; verified at /dr-qa and /dr-compliance with BLOCKED routing on missed/partial without override.
| name | frontend-ui |
| description | Frontend UI checklist — CSS specificity, dark/light themes, visual testing, mobile responsiveness, i18n parity. Apply when editing HTML/CSS. |
| model | inherit |
| current_aal | 1 |
| target_aal | 2 |
Use when task modifies HTML, CSS, templates, or visual components. Catches recurring UI bugs missed by HTTP/syntax checks.
Rule: Light mode = default. .dark class = override. Never use :not(.dark) selectors.
.dark .component { background: #0f172a; }
:not(.dark) .component { background: #ffffff; } /* ← matches <body>, <section>, <div> */
:not(.dark) matches any ancestor without the class, including <body> / <section> / <div>. Since these are also ancestors of .component, the selector ALWAYS matches, overriding .dark rules due to cascade order. Result: light colors leak into dark mode.
.component { background: #ffffff; } /* default = light */
.dark .component { background: #0f172a; } /* override = dark */
Checklist:
darkMode: 'class'<html class="dark"> initial state from localStorage:not(.dark) selectors in any CSS file.dark .component patternHTTP 200 + valid HTML is insufficient for UI tasks. A page can render with broken visual state and still return 200.
Required checks before marking UI task complete:
If unable to capture screenshots, explicitly ask the user to verify visually before closing.
For bilingual/multilingual sites:
/en/, /ru/ respected on all internal links (lang_url() helper)grep in templates for English/Russian leaks on wrong-language pagesmax-width: 100%)<button> has accessible label (aria-label if icon-only)aria-label that reflects current stateprefers-reduced-motion respected for animations* { animation: ... })loading="lazy" where below foldfont-display: swap<head> (use defer or async)<title> per page<meta description> present and relevantog:title, og:description, og:image, og:url, og:typeog:image file actually exists (not just referenced)hreflang in sitemap.xml for multilingual sites/dr-do that modifies .html, .php templates, .css, .vue, .tsx files touching UI/dr-complianceBefore generating lists of framework components (agents, skills, commands, use cases) for content, documentation, or marketing:
ls $HOME/.claude/agents/*.md | wc -l # actual agent count
ls $HOME/.claude/commands/*.md | wc -l # actual command count
ls $HOME/.claude/skills/*.md | wc -l # actual skill count
documentation/tutorials/use-cases.md in the Datarim repo for the canonical use case list.md files for accurate capability descriptionsWhy: A prior incident showed stale counts on the site ("15 agents / 18 skills" while actuals were 16/22, and 6 use cases instead of 13). Both errors came from relying on stale session data instead of querying the source.
/dr-qaWhen the task changes any file under § 1–4 above, /dr-qa runs an
automated Playwright pass against the local dev surface or a static
fixture. Contract: $HOME/.claude/skills/playwright-qa/SKILL.md (resolution
chain CLI → MCP → env-browser, three headed states, per-task flock,
datarim/qa/playwright-{ID}/run-<ts>/ artifact layout). Missing tooling
is a finding, not a block; --headed-strict without a display fails the
QA pass.
Two operator-facing knobs:
/dr-qa --headed (lenient) or /dr-qa --headed-strict (fail-fast)qa_browser_mode: headed | headed-strict | skipInspect datarim/qa/playwright-{ID}/latest/summary.md for the most
recent pass. Visual review (does the screenshot match intent?) remains an
operator step — the automated pass captures evidence, it does not
adjudicate aesthetic correctness.
tester agent: include this checklist in Web UI testing modedeveloper agent: consult before completing frontend tasksreviewer agent: verify compliance during /dr-qaplaywright-qa.md: detailed contract for the automated browser pass
invoked at /dr-qa Step 4fskills/immutability/SKILL.md § Frontend-UI
Rules — defines the visual baseline immutability rule, deviation
recording, and operator-approval requirement. Frontend-UI tasks that
change visual output MUST NOT silently accept regressions; visual
deviations require operator diff review per the Frontend-UI Rules
fragment.