菜单
Frontend UI checklist — CSS specificity, dark/light themes, visual testing, mobile responsiveness, i18n parity. Apply when editing HTML/CSS.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| 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.Schema and migration semantics for /dr-doctor — thin one-liner contract, 6-pass migration, data-loss safety, conflict resolution. Loaded by self-heal.
Core Datarim rules. Load this entry first, then only the fragment needed for paths, storage, numbering, backlog, routing, or archive behavior.
Post-QA hardening — detects task type (code, docs, research, legal, content, infra) and applies the matching verification checklist before archiving.
Testing pyramid, frameworks, mocking. Load first; then the fragment for the active gate (live smoke, silent failure, bats, legacy triage).
Preserve Datarim task continuity while orchestrated Claude Code or Codex sessions compact or clear context at deterministic pressure thresholds.
Immutability contract for all pipeline stages: artefact freeze, V-AC parity, non-code parity, anti-tautological rule, and return-to-source transition.