css-design-tdd

用途

CSS Design System TDD 用于对 CSS 设计系统进行测试驱动式的修改。它把 TDD 的 RED-GREEN-REFACTOR 循环搬到 CSS 设计系统工作中：

技能提供以下检查类别，均以命令行方式执行：

未定义变量检查（Undefined Variable Check）：提取所有 var(--name) 使用处与所有 --name: 定义处，用 comm -23 找出「被使用但从未定义」的变量。
缺失回退值检查（Missing Fallback Check）：查找容器块中没有回退值的 var(--name)，例如 var(--list-indent) 应为 var(--list-indent, 1em)。
硬编码颜色检查（Hardcoded Color Check）：查找 :root 定义之外的十六进制/ rgba 颜色，这些本应使用 Token；例如硬编码的 rgba(255, 255, 255...) 在暗色模式下应使用 Token。
容器一致性检查（Container Consistency Check）：核对容器块的 margin、padding 与列表乘数是否一致（覆盖 editor.css、alertBlock、detailsBlock 等）。
焦点指示器检查（Focus Indicator Check）：找出有 :hover 但没有 :focus-visible 或 :focus 的文件，提示缺失焦点样式。
Token 使用审计（Token Usage Audit）：检查特定 Token 是否被一致使用，例如 border-radius 是否使用 var(--radius...、box-shadow 是否使用 var(--shadow... / var(--popup-shadow...。

技能给出的检查以 grep/comm 等命令形式提供，可直接在终端运行或保存到本地。文中明确说明：这些脚本是内联示例，不提交为项目脚本。

TDD 工作流分三个阶段：

Phase 1: RED（建立基线）——运行全部检查并把结果写入基线文件（如 /tmp/css-baseline.txt），并统计问题数量。
Phase 2: GREEN（修复问题）——针对每个问题类别：读取目标文件理解上下文、做最小修复（如添加回退值、改用 Token）、重新运行对应检查验证修复。示例：将 var(--list-indent) 改为 var(--list-indent, 1em)，再重新 grep 验证。
Phase 3: REFACTOR（验证无回归）——再次运行完整检查套件，与基线对比，问题数应减少而不是增加；并进行视觉验证（如 pnpm dev 在浏览器中检查 light mode、dark mode 与所有容器类型）。

文中还提供了两个脚本示例：

Quick Check（scripts/css-quick-check.sh）：变更前后快速运行，检查缺失回退值、硬编码暗色 hover、容器 margin 一致性、焦点状态。
Full Audit（scripts/css-full-audit.sh）：较大变更前运行，检查未定义变量、:root 外硬编码十六进制颜色、硬编码 z-index、未使用 Token 的 border-radius、缺失焦点指示器。

修改容器块（blockquote、alert、details）样式时，可参照文中的 Container Block Checklist：margin 使用 1em 0、padding 使用 Token 或 0.75em 1em 模式、所有 var() 调用带回退值、交互元素定义 :focus-visible、存在嵌套内容规则（p、ul、ol、code、table）、border radius 使用 --radius-md、颜色使用 Token（应用 CSS 中不出现硬编码十六进制）。
与 pnpm check:all 集成使用。