skills.rest
raphaelsalaja
raphaelsalajaCOMMUNITY
Explore all skills by this author →
Website𝕏@raphaelsalajaGitHub

pseudo-elements

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

869|42|Updated Sep 24, 2025
Search Tags:#frontend#code-quality#best-practices#css-audit#view-transitions#pseudo-elements
One-click install
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill pseudo-elements
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pseudo-elements
Source: https://github.com/raphaelsalaja/userinterface-wiki/tree/main/skills/pseudo-elements
Command: npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill pseudo-elements

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify and fix misuse of pseudo-elements and inconsistent View Transitions usage to reduce fragile UI markup and improve accessibility and performance.

Core Features & Use Cases

  • Detect missing content on ::before/::after and flag non-semantic decorative content
  • Enforce proper usage of View Transitions API and ensure smooth, accessible UI transitions
  • Generate file:line findings to streamline code reviews and remediation

Quick Start

Run an audit across your frontend codebase to surface pseudo-element and transition issues in CSS and TSX/MDX files.

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 missing content in my frontend codebase?▼

You can audit CSS pseudo-elements by scanning CSS and TSX/MDX files to identify missing content on ::before/::after. The audit flags non-semantic decorative content and outputs file:line findings for targeted remediation.

What is non-semantic decorative content in CSS pseudo-elements and why does it matter?▼

Non-semantic decorative content in CSS pseudo-elements refers to visual styling applied via ::before or ::after without proper semantic context. Identifying and fixing this misuse reduces fragile UI markup and improves accessibility and performance.

How do I check View Transitions API usage for accessibility and performance violations?▼

Check View Transitions API usage by scanning frontend files to enforce proper implementation and ensure smooth, accessible UI transitions. The audit identifies usage violations and outputs file:line findings to resolve inconsistent transition behavior.

Can I audit hover effects and page transitions in TSX and MDX files?▼

Yes, you can audit hover effects, decorative layers, and page transitions in TSX and MDX files. The audit scans these file types to report pseudo-element and View Transitions API issues aligned with DOM usage and transition rules.

What's the best way to enforce proper View Transitions API usage during a code review?▼

The best way to enforce View Transitions API usage during a code review is to run an audit that surfaces inconsistent implementations. This generates file:line findings aligned with transition rules to ensure smooth, accessible UI transitions and reduce fragile markup.

Related Skills

Explore More Software Engineering Skills→
JaylaelikeJaylaelike

web-design-guidelines

Analyze HTML, CSS, and JavaScript files against Web Interface Guidelines.

Community
Intermediate
nayyirahsannayyirahsan

vercel-react-view-transitions

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

Community
Advanced
IgorWarzochaIgorWarzocha

component-engineering

Audit React components for accessibility and composition using asChild and data-slot patterns.

Community
Intermediate
Clay-HHKClay-HHK
2

exploratory-data-analysis

Detect scientific file types and generate markdown EDA reports with quality metrics.

Community
Advanced