skills.rest
JuanJoseGonGi
JuanJoseGonGiCOMMUNITY
Explore all skills by this author →
𝕏@JuanJoseGonGiGitHub

pseudo-elements

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

Updated Aug 23, 2026
Search Tags:#best practices#performance#web development#css#pseudo-elements#view transitions
One-click install
npx skills add https://github.com/JuanJoseGonGi/skills --skill pseudo-elements-juanjosegongi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pseudo-elements
Source: https://github.com/JuanJoseGonGi/skills/tree/main/pseudo-elements
Command: npx skills add https://github.com/JuanJoseGonGi/skills --skill pseudo-elements-juanjosegongi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure your CSS code adheres to best practices for pseudo-elements and effectively utilizes the View Transitions API, preventing common styling and animation pitfalls.

Core Features & Use Cases

  • Pseudo-element Auditing: Checks for correct usage of ::before and ::after, including content property, positioning, and layering.
  • View Transitions API Validation: Verifies correct implementation of view-transition-name, uniqueness, and cleanup.
  • Use Case: Review your project's CSS files to identify and fix issues with decorative elements or to ensure smooth page transitions are implemented correctly using the native View Transitions API.

Quick Start

Audit the CSS files in the 'src/components' directory for pseudo-element and View Transitions API best practices.

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 pseudo-elements for best practices?▼

To audit CSS pseudo-elements, review your codebase for rules like content property presence, parent positioning, z-index layering, and hit target expansion. This validates correct usage of ::before and ::after for decorative layers and hover effects.

What is the correct way to implement the View Transitions API?▼

Implementing the View Transitions API correctly requires assigning unique view-transition-name values, ensuring proper cleanup, and preferring the native API over JavaScript libraries for smooth page transitions.

Why do my CSS pseudo-elements not show up without a content property?▼

CSS pseudo-elements require the content property to render properly. Auditing your stylesheets validates content property presence alongside correct DOM node replacement and parent positioning for reliable rendering.

Can I use the native View Transitions API instead of JavaScript animation libraries?▼

Yes, you can use the native View Transitions API instead of JavaScript libraries. Auditing your implementation validates unique view-transition-name assignment and proper cleanup to ensure efficient page transitions.

How do I fix z-index layering issues with decorative pseudo-elements?▼

Fixing z-index layering issues involves auditing pseudo-element CSS to validate parent positioning and stacking contexts. This ensures decorative layers and hover effects render correctly without overlapping content.

Does pseudo-element auditing work for JavaScript code?▼

Yes, pseudo-element auditing evaluates both CSS and JavaScript code. It checks JavaScript for correct View Transitions API implementation and validates that DOM node replacement follows best practices.

Related Skills

Explore More Design & Creative Skills→
raphaelsalajaraphaelsalaja
869

pseudo-elements

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

Community
Intermediate
kimmyxpowkimmyxpow

12-principles-of-animation

Audit web animation code for compliance with the 12 principles of animation.

Community
Basic
nayyirahsannayyirahsan

vercel-react-view-transitions

Implement and optimize view transitions in React and Next.js applications.

Community
Advanced
bromankobromanko

elm-performance-review

Analyze Elm code for virtual DOM rendering and update function performance issues.

Community
Intermediate