skills.rest
gbasin
gbasinCOMMUNITY
Explore all skills by this author →
Website𝕏@garybasinGitHub

dejank

Detect and diagnose visual jank in React UIs via static analysis and runtime investigation.

30|Updated Mar 25, 2026
Search Tags:#react#performance analysis#jank#static code analysis#ui stability
One-click install
npx skills add https://github.com/gbasin/dejank --skill dejank
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dejank
Source: https://github.com/gbasin/dejank/tree/main
Command: npx skills add https://github.com/gbasin/dejank --skill dejank

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pasky/chrome-cdp-skill, sawyerhood/dev-browser, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill detects and diagnoses visual jank in React UIs, providing both static analysis and runtime investigation to ensure UI stability and improve user experience.

Core Features & Use Cases

  • Static Analysis: Pre-merge review for common anti-patterns that cause visual jank.
  • Runtime Investigation: Classify and investigate specific visual symptoms like flicker, layout shift, or flash.
  • Use Case: When a user reports a UI issue such as flicker or layout shift, use this Skill to determine the cause and apply appropriate fixes.

Quick Start

Run the dejank skill on the current file for static analysis or on a specific symptom for runtime investigation.

Frequently Asked Questions about dejank

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

FAQPage Schema
What causes visual jank in React UIs and how do I detect it?▼

Visual jank in React UIs is caused by rendering anti-patterns leading to flicker, layout shift, or flash. Detect and diagnose these issues using static code analysis to identify anti-patterns and runtime investigation to classify visual symptoms.

How do I investigate React layout shift and flicker issues?▼

Investigate React layout shift and flicker by using runtime investigation mode, which classifies specific visual symptoms and routes them to appropriate investigation paths to determine the root cause and apply fixes.

Can I detect React performance anti-patterns before merging code?▼

Yes, you can detect React performance anti-patterns before merging by running static analysis mode, which reviews code for common anti-patterns that cause visual jank and UI instability.

Does this React jank analysis work with browser automation tools?▼

Yes, runtime investigation of React UI jank works with browser automation dependencies like Chrome CDP and dev-browser tools to classify visual symptoms and route them to appropriate investigation paths.

What is the difference between static analysis and runtime investigation for UI jank?▼

Static analysis identifies common code anti-patterns pre-merge, while runtime investigation classifies specific visual symptoms like flicker or layout shift at runtime and routes them to appropriate investigation paths.

Related Skills

Explore More Software Engineering Skills→
paidethonpaidethon

use-my-browser

Interact with a live browser session via Chrome DevTools Protocol.

Community
Advanced
mdmagnuson-creatormdmagnuson-creator

e2e-quality

A utility library for detecting and measuring in web applications.

Community
Advanced
gwpjpgwpjp
3

visual-qa-react-devtools-profiler

Profile React component rendering with React DevTools Profiler to identify render causes.

Community
Intermediate
arcasilesgrouparcasilesgroup
54

ai-performance

Scan codebases for performance anti-patterns across multiple languages.

Official
Advanced