Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
Browsers perform a costly operation called reflow whenever the geometric properties or layout of a DOM element change. When developers modify inline styles sequentially—such as setting height, then width, then padding—the browser may force a synchronous recalculation for every property update. This skill optimizes render performance by batching these mutations into a single operation. By applying CSS classes or rewriting the cssText property in one execution, the engine minimizes style recalculation cycles and layout thrashing. This approach ensures the browser performs only one reflow per update, significantly improving frame rates during animations or complex UI transitions. Prioritizing stylesheet updates over individual style object properties maintains a cleaner separation between visual presentation and application logic while reducing main-thread overhead during interaction-heavy tasks.
When to Use This Skill
- •Dynamic animation sequences that update multiple box model properties
- •Switching complex themes or state-based layouts
- •Batching style changes triggered by rapid scroll or mouse move events
- •Transitioning elements between visible and hidden states involving multiple dimensions
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Batch my DOM style changes to fix layout thrashing
- “Convert my inline style updates to a single CSS class
- “Optimize sequential element style updates in my code
- “Help me refactor individual style assignments to reduce reflows
- “Clean up messy inline styles into performant CSS declarations
What this skill does
- •Reduces document reflow counts during style updates
- •Consolidates multiple CSS property changes into single browser paint cycles
- •Automates migration from fragmented inline style blocks to class-based toggles
- •Wraps sequential style mutations into single cssText assignments
- •Optimizes React component rendering by eliminating direct style object manipulation
When not to use it
- ✕When updating a single, isolated CSS property that changes infrequently
- ✕When runtime-computed variables (like mouse coordinates) must be mapped to styles per-frame
Example workflow
- Analyze current codebase for sequential element.style assignments
- Group related visual properties into a descriptive CSS class
- Replace individual JavaScript style assignments with classList.add or toggle
- Refactor fallback logic to use cssText if static classes are insufficient
- Verify performance gain using browser developer tool rendering metrics
Prerequisites
- –Existing DOM-heavy JavaScript or TypeScript project
- –Access to CSS files or style blocks
Pitfalls & limitations
- !Overwriting existing inline styles when assigning to cssText
- !Creating CSS specificity conflicts by mixing classes and inline styles
- !Difficulty managing dynamic values that cannot be pre-defined in a class
FAQ
Why is changing styles one by one slow?
Every modification to layout properties triggers a browser reflow; sequential changes force the browser to recalculate the document structure multiple times.
Is cssText better than classList?
classList is preferred for static styling, while cssText is more appropriate for dynamic values that must be calculated at runtime but should still be applied together.
Does this impact React component performance?
Yes, using classes instead of direct DOM manipulation in refs prevents unnecessary manual reconciliation and aligns with the declarative nature of the framework.
How it compares
While manual coding often results in scattered, reactive-style property setting, this skill systematically enforces batching patterns that ensure structural integrity and maximum browser efficiency.
📄 Full skill instructions — original source: vercel-labs/agent-skills
## Batch DOM CSS Changes
Avoid changing styles one property at a time. Group multiple CSS changes together via classes or
**Incorrect (multiple reflows):**
**Correct (add class - single reflow):**
**Correct (change cssText - single reflow):**
**React example:**
Prefer CSS classes over inline styles when possible. Classes are cached by the browser and provide better separation of concerns.
Avoid changing styles one property at a time. Group multiple CSS changes together via classes or
cssText to minimize browser reflows.**Incorrect (multiple reflows):**
function updateElementStyles(element: HTMLElement) {
// Each line triggers a reflow
element.style.width = '100px'
element.style.height = '200px'
element.style.backgroundColor = 'blue'
element.style.border = '1px solid black'
}**Correct (add class - single reflow):**
// CSS file
.highlighted-box {
width: 100px;
height: 200px;
background-color: blue;
border: 1px solid black;
}
// JavaScript
function updateElementStyles(element: HTMLElement) {
element.classList.add('highlighted-box')
}**Correct (change cssText - single reflow):**
function updateElementStyles(element: HTMLElement) {
element.style.cssText =
width: 100px;
height: 200px;
background-color: blue;
border: 1px solid black;
}**React example:**
// Incorrect: changing styles one by one
function Box({ isHighlighted }: { isHighlighted: boolean }) {
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
if (ref.current && isHighlighted) {
ref.current.style.width = '100px'
ref.current.style.height = '200px'
ref.current.style.backgroundColor = 'blue'
}
}, [isHighlighted])
return <div ref={ref}>Content</div>
}
// Correct: toggle class
function Box({ isHighlighted }: { isHighlighted: boolean }) {
return (
<div className={isHighlighted ? 'highlighted-box' : ''}>
Content
</div>
)
}Prefer CSS classes over inline styles when possible. Classes are cached by the browser and provide better separation of concerns.
How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/js-batch-dom-css/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/vercel-labs/agent-skills/js-batch-dom-css/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/js-batch-dom-css/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/js-batch-dom-css/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
Recommended Rules
View more rules →Web Performance Optimization Expert
PerformanceJavaScriptWeb Development
You are an expert in web performance optimization. Key Principles: - Measure first, optimize second - Focus on Core Web Vitals (LCP, FID, CLS) - Opti...
Web Animation & Motion Design Expert
AnimationMotion DesignCSS
You are an expert in web animation and motion design. Key Principles: - Use animations purposefully - Respect prefers-reduced-motion - Optimize for p...
⚡ Performance Optimization Agent - Speed Expert
Agentic AIPerformanceOptimization
You are an expert performance optimization agent specialized in identifying and fixing performance bottlenecks. Apply systematic reasoning to measure,...
Recommended Workflows
View more workflows →React Performance Profiling
ReactPerformanceDebugging
--- description: Identify slow components using React Profiler --- 1. **Install DevTools**: - Install React Developer Tools extension for Chrome/F...
Debug Slow API Routes (Performance Profiling)
PerformanceAPIProfiling
--- description: Profile and optimize slow API endpoints --- 1. **Add Timing Logs**: - Measure execution time. ```ts export async function G...
Debugging Infinite Re-renders
ReactDebuggingPerformance
--- description: Track down and fix infinite loops in useEffect and component rendering --- 1. **Check `useEffect` Dependencies**: - The most comm...
