pseudo-elements_skill

Overview

This skill audits CSS and TypeScript for pseudo-element best practices and View Transitions API usage. It identifies missing content, improper positioning, layering issues, native pseudo-element use, and view-transition misconfigurations. Findings are reported in file:line format with rule IDs and concise descriptions.

How this skill works

The scanner reads the specified files or patterns and checks each file against a set of rules covering ::before/::after, View Transitions, and native pseudo-elements. It flags missing content, improper parent positioning, z-index problems, view-transition name issues, and misuse of native pseudo-elements. Results are emitted as file:line entries and an aggregated summary table showing counts and severity.

When to use it

• Review hover and decorative effects that use ::before or ::after
• Audit page and shared-element transitions using the View Transitions API
• Check for unnecessary DOM nodes that could be replaced by pseudo-elements
• Validate dialogs, inputs, and selection styling against native pseudo-elements
• Before shipping UI changes that affect layering, hit targets, or transitions

Best practices

• Always set content for ::before/::after when used as visual elements
• Ensure absolutely positioned pseudo-elements have a positioned parent (position: relative/absolute)
• Provide explicit z-index layering so pseudo-elements do not obscure interactive content
• Assign and clean up unique view-transition-name values when using startViewTransition
• Prefer ::backdrop, ::placeholder, and ::selection for native UI styling instead of added markup

Example use cases

• Find ::before rules missing content and report file:line for quick fixes
• Detect extra DOM nodes used for decoration and recommend converting to pseudo-elements
• Identify elements lacking position: relative while their pseudo-element is absolute
• Locate duplicate or persistent view-transition-name values that will conflict during transitions
• Flag usages of JS animation libraries for page transitions where View Transitions API would be preferred