mcpField
P
pseudo-elements

pseudo-elements

github.com/raphaelsalaja其他42251 次安装今天更新
代码仓库

关于 pseudo-elements

审查 CSS 伪元素和 View Transitions API 的技能。它检查装饰层、原生伪元素样式及共享元素转场，并报告问题和汇总。

主要功能

  1. 01检查伪元素的生成内容
  2. 02审查装饰节点与伪元素层级
  3. 03检查原生背景、占位符和选区样式
  4. 04审查 View Transitions 命名与清理
  5. 05报告问题严重性并提供汇总

适用场景

  1. 01审查装饰性悬停层和点击区域
  2. 02检查对话框背景与输入占位符
  3. 03审计共享元素页面转场
  4. 04检查列表标记和首行样式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/raphaelsalaja/skills --skill pseudo-elements

安装后在 Claude Code 中输入/pseudo-elements确认已加载。

附带文件agents/openai.yaml

详细介绍

伪元素

此技能会检查 CSS 伪元素和 View Transitions API。当图层仅用于装饰时，优先使用伪元素，而不是额外添加节点。

每项检查都由一对内容组成：有问题的代码行与替换它的代码行并列呈现。

必须设置 content: ""，否则 ::before 和 ::after 不会渲染。这是明确要求。如果额外的 DOM 节点仅用于实现遮罩或扩大可点击区域，而伪元素也能实现，则应记录为问题。最小目标尺寸属于 laws-of-ux。通过伪元素实现阴影动画属于 visual-design。组件退出时的挂载属于 exit-animations。

使用时机

为悬停图层、点击区域、占位符、选中内容、对话框背景遮罩或共享元素页面切换设置样式时，请使用此技能。对于在原位挂载和卸载的 Motion 树，请使用 exit-animations。

1. 检查装饰图层

读取范围内的文件。列出 ::before、::after、::backdrop、::placeholder、::selection、::marker、::first-line，以及任何 view-transition-name 或 startViewTransition 调用。

2. 检查生成的盒子

::before 和 ::after 必须设置 content，通常为 ""。这属于 pseudo-content-required。装饰性遮罩、下划线和点击区域应使用伪元素，而不是空的 span。这属于 pseudo-over-dom-node。绝对定位的伪元素必须有一个 position: relative 的父元素。这属于 pseudo-position-relative-parent。如果伪元素覆盖了文本，应将文本置于其上方，通常为伪元素设置 z-index: -1。这属于 pseudo-z-index-layering。

通过在伪元素上设置负值内边距扩展点击区域，例如 inset: -8px -12px。这属于 pseudo-hit-target-expansion。32px 的最小目标尺寸属于 laws-of-ux。

使用 ::marker 设置列表标记的样式，而不是用伪造的项目符号元素。这属于 pseudo-marker-styling。使用 ::first-line 设置段落首行的样式。这属于 pseudo-first-line-styling。

3. 检查原生伪元素和视图过渡

dialog 或弹出框应使用 ::backdrop 使页面变暗，而不是使用同级的遮罩 div。这属于 native-backdrop-styling。占位符文本应使用 ::placeholder。这属于 native-placeholder-styling。选中内容的颜色应使用 ::selection。这属于 native-selection-styling。

需要在页面切换中变形的元素，应在唯一的参与元素上设置 view-transition-name。这属于 transition-name-required。过渡运行期间，该名称必须唯一。这属于 transition-name-unique。目标元素接管名称后，应从源元素上清除该名称。这属于 transition-name-cleanup。对于这种共享元素页面切换，应优先使用 document.startViewTransition，而不是 Motion 的 layoutId。这属于 transition-over-js-library。自定义时间设置应放在 ::view-transition-group 上，而不是只使用默认交叉淡入淡出效果。这属于 transition-style-pseudo-elements。

4. 报告并停止

先写出发现的问题，再写摘要。不要用伪元素替代语义元素。

配对

每项检查都是一对。问题代码行旁边就是替换它的代码行。

规则问题代码替换代码
pseudo-content-required.button::before { position: absolute }添加 content: ""
pseudo-over-dom-node按钮内的 <span className={styles.background} />用于该背景效果的 .button::before
pseudo-position-relative-parent静态父元素上的绝对定位 ::before.button { position: relative }
pseudo-z-index-layering标签上方没有 z-index 的 ::before 背景效果在伪元素上设置 z-index: -1
pseudo-hit-target-expansion与字形大小相同的点击区域在 ::before 上设置 inset: -8px -12px
pseudo-marker-styling模拟项目符号的元素li::marker
pseudo-first-line-styling用于换行首行的 spanp::first-line
native-backdrop-styling<dialog> 后方的同级覆盖层dialog::backdrop
native-placeholder-styling输入框为空时显示的占位 <span>input::placeholder
native-selection-styling在包装元素上设置的选中颜色::selection
transition-name-unique每张卡片上都有 .card { view-transition-name: card }在活动元素上设置唯一名称
transition-name-cleanup交换后源元素仍保留 viewTransitionName在回调中清除它
transition-over-js-library用于跨页面共享元素的 layoutIddocument.startViewTransition

报告

严重程度。 HIGH 表示伪元素因缺少 content 而无法渲染，或视图过渡名称发生冲突。MEDIUM 表示多余的装饰性节点、背景 div、未清除的名称，或未扩展的点击区域。LOW 表示未设置样式的 ::selection 或 ::marker，而 UI 的其余部分已设置样式。

验证。 阅读范围内文件中声明的值。浏览器验证可选。将无法运行的检查标记为 Not verified。

格式。 每个根本原因列出一项发现：

file:line - [rule-id] what is wrong

然后给出摘要：

规则数量严重程度

只要仍有任何 HIGH，就执行 Block。否则执行 Approve，并将较低严重程度的行保留在表格中。不得对未阅读的文件执行 Approve。如果没有需要报告的内容，请写明“No actionable findings”，并列出未验证的项目。

评论

支持 Markdown