skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

pseudo-elements

Audit CSS and JavaScript for pseudo-element best practices and View Transitions API usage.

3|Updated Apr 20, 2026
Search Tags:#code review#frontend#css#audit#web components#pseudo-elements#view transitions
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill pseudo-elements-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pseudo-elements
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/pseudo-elements
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill pseudo-elements-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Decorative CSS implemented with extra DOM nodes, missing content properties, broken z-index layering, and JavaScript animation libraries used where the native View Transitions API would work all create maintenance burden and subtle rendering bugs. This Skill audits stylesheets and components against a defined rule set and reports each violation with a file:line location. ## Core Features & Use Cases - Pseudo-element linting: Checks ::before/::after rules for required content properties, parent positioning, z-index layering, and hit-target expansion patterns. - View Transitions auditing: Verifies view-transition-name assignment, uniqueness, cleanup after transitions, and custom styling of ::view-transition-group pseudo-elements. - Native styling detection: Flags cases where ::backdrop, ::placeholder, or ::selection should replace wrapper elements or extra markup. - Use Case: While reviewing a pull request that adds a hover effect to a button component, run the audit to catch a missing content property on ::before and an unnecessary wrapper span before merge. ## Quick Start Review the CSS and TSX files in the components directory for pseudo-element and View Transitions API issues and list findings with file and line numbers.

Frequently Asked Questions about pseudo-elements

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit CSS for pseudo-element best practices?▼

Run the audit against your CSS or component files and it checks rules like required content properties on ::before/::after, parent position: relative for absolute pseudo-elements, and z-index layering. Findings are reported in file:line format with rule identifiers.

When should I use View Transitions API instead of a JavaScript animation library?▼

Use the View Transitions API for page and shared-element transitions instead of libraries like motion's layoutId when targeting browsers that support document.startViewTransition. Assign a unique view-transition-name to the transitioning element and clean it up after the transition completes.

Why is my ::before pseudo-element not rendering?▼

A ::before or ::after pseudo-element does not render without a content property, even an empty string like content: "". Also verify the parent has position: relative if the pseudo-element uses position: absolute.

Can I style a dialog backdrop without an extra overlay div?▼

Yes, use the native ::backdrop pseudo-element on the dialog element instead of a separate overlay div. It supports properties like background and backdrop-filter, and removes the need for extra markup and click handlers.

What are the limitations of view-transition-name?▼

Each view-transition-name must be unique on the page during a transition, so shared class-based names break with multiple elements. Names must also be removed after the transition completes, otherwise they conflict with subsequent transitions.

Related Skills

Explore More Software Engineering Skills→
raphaelsalajaraphaelsalaja
869

pseudo-elements

Audit CSS pseudo-element misuse and View Transitions API violations in TSX/MDX files.

Community
Intermediate
itallstartedwithaideaitallstartedwithaidea
31

view-transitions

Animate React and Next.js route navigation with shared element transitions.

Community
Intermediate
beardcoderbeardcoder

css-a11y

Audit CSS for accessibility issues and fix focus, motion, and contrast patterns.

Community
Advanced
andregusman-raizandregusman-raiz
19

ag-referencia-qualidade

Enforce quality gates, post-execution checklists, and CI metrics in software projects.

Community
Advanced