Dejank

Detect and diagnose visual jank in React UIs. Covers two modes -- static analysis of code patterns that cause flicker, layout shift, and flash of intermediate state (for pre-merge review or preventive sweeps), and runtime investigation of specific visual symptoms (flicker, blink, jump, stutter, remount churn, scroll reset, post-paint correction). Use when the user mentions jank, something feeling off, flashing, blinking, layout shifting, full repaints, or wants a render stability audit.

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add gbasin/dejank --skill dejank
Manual install
git clone --depth 1 https://github.com/gbasin/dejank.git /tmp/dejank
mkdir -p ~/.claude/skills
cp -r /tmp/dejank/. ~/.claude/skills/dejank

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

Find and fix visual instability in React and browser UIs. This skill operates in two modes depending on what is known at invocation time.

## Decision Tree

Determine the mode before doing any work:

**Is there a specific visual complaint?** (The user describes something they can see: flicker, blink, flash, jump, stutter, pop-in, scroll reset, focus loss, "the whole pane feels rebuilt.")

- **Yes** -- go to **Mode B: Runtime Investigation**
- **No** (general review, PR check, preventive sweep, or just a file/directory target) -- go to **Mode A: Static Analysis**

If unsure, start with Mode A. Its findings often explain the complaint without runtime tooling.

---

## Mode A -- Static Analysis

Use when: reviewing a PR, scanning changed files, doing a preventive sweep, or no specific symptom is reported.

1. Read [references/static-patterns.md](./references/static-patterns.md) for the full pattern catalog.
2. Read [references/scan-process.md](./references/scan-process.md) for scope rules, severity rubric, output format, and guardrails.
3. Identify scope: changed files in the current branch (`git diff --name-only` against base), or the user-specified target and its direct imports.
4. Scan each React component against all patterns.
5. Report findings grouped by component, ranked by severity.

Stop here unless a finding warrants runtime confirmation or the user escalates.

---

## Mode B -- Runtime Investigation
Read the full skill on GitHub

Details

Skill name
dejank
Repository
gbasin/dejank
Repo updated
27 March 2026

FAQ

What does the Dejank skill do?

Detect and diagnose visual jank in React UIs. Covers two modes -- static analysis of code patterns that cause flicker, layout shift, and flash of intermediate state (for pre-merge review or preventive sweeps), and runtime investigation of specific visual symptoms (flicker, blink, jump, stutter, remount churn, scroll reset, post-paint correction). Use when the user mentions jank, something feeling off, flashing, blinking, layout shifting, full repaints, or wants a render stability audit.

How do I install the Dejank skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add gbasin/dejank --skill dejank. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Dejank popular?

It lives in gbasin/dejank, which has 31 GitHub stars and 0 forks.

Related skills

Scroll Painting Animation

24

xiwan/scroll-painting-animation

把一幅长卷名画(或任何"沿一条路看过去"的全景题材)做成横向卷轴、等距游戏画风的动画短片:读原作排时间轴与功能团、 用 ComfyUI 统一风格地生产建筑/人物/船/贴图精灵、用 Python(numpy + Pillow)搭等距场景并逐帧渲染、 做疏密与聚团布局、行人车马船的运动、昼夜晨昏与万家灯火、题诗逐字晕墨显现、用 MMAudio 按画面生成环境声与场景音效, 最后用统计、抽帧、跳帧检查、响度测量验收。附可复用库 scrollkit、可运行骨架 scroll_demo 和一套工具脚本。 来源项目:《清明上河图》180 秒 1080p 等距动画(《烽火与炊烟》画风)。 触发词:清明上河图动画、名画动起来、长卷动画、卷轴动画、千里江山图、姑苏繁华图、等距卷轴、isometric scroll、 panoramic pan animation、2.5D 全景动画、横向平移长卷、ComfyUI 精灵、批量生成建筑素材、功能团布局、 万家灯火夜景、题诗渐显、MMAudio 音效、按画面配音效。

Frontend & Design

Stark

33

f0d010c/stark

Use for UI/UX design, product flows, frontend or native interface design, design audits, design translation, asset planning, motion direction, design tokens, or distinctive non-generic apps and websites. Covers web and React, Windows and WinUI/Mica, Apple and SwiftUI, Android and Jetpack Compose/Material, cross-platform UI, and token export. Route to the focused skill, then load only the references required for the selected surface and failure mode.

Frontend & Design

Theme Factory Addon

24

patrickkrebs/theme-factory-addon

Expansion pack of 100 curated color and font themes for the theme-factory skill, organized into 14 categories spanning seven aesthetic families (Earthy, Feminine, Coastal, Bold, Boho, Vintage, Luxury), Iconic Brands (Facebook, Instagram, Tesla, Nike, McDonald's, Spotify, Google, Netflix, Coca-Cola), developer/editor/terminal themes (Dracula, Nord, Gruvbox, Tokyo Night, Catppuccin, Solarized, Monokai, One Dark, Synthwave 84), Master Painters (Rothko, Pollock, Picasso, Rembrandt, Van Gogh, Monet, Klimt, Vermeer, Hokusai, Matisse, Frida Kahlo, Mondrian), and Directors & Cinematographers (Spielber

Frontend & Design

Figma to Swiftui

27

daetojemax/figma-to-swiftui-skill

Implement or update iOS SwiftUI UI from Figma designs; also use for implementation plans, token mapping, or asset export for that UI.

Frontend & Design

Webflow to React

28

dmenchaca/webflow-to-react

Converts a Webflow HTML export into a maintainable React app with TanStack Start (SSR, TanStack Router conventions) using an idiomatic React-first approach. Sets up Storybook early, builds UI primitive + page-section SOT components with variant stories before composing routes. Use when the user has a Webflow export (index.html + css/ + js/ + images/ + fonts/) and wants to migrate to React, when they mention TanStack Start, TanStack Router, SSR, Storybook, SOT components, "convert Webflow to React", or when a repo already contains a Webflow export at its root. Works in Cursor, Claude Code, GitH

Frontend & Design

SVG Character Animator

31

molauu/svg-character-animator

Generate production-quality SVG character animations — state machines that morph between N SVG states (2–10) with per-state idle motion (breathing, blinking, swaying). Use whenever the user wants to animate a character or mascot between poses/emotions, morph icons/illustrations between forms, build interactive SVG state machines, or add ambient idle motion to vector graphics. Triggers include character/mascot animation, SVG path interpolation, character emotion transitions, icon toggles with animation, multi-state vector animations, or "make this SVG come alive." Also use when the user referen

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.