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

Ready to run

npx skills add https://github.com/gbasin/dejank --skill dejank

💬 Prompt for ChatGPT / Claude Chat▼

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.