contain-audit

Detects DOM elements where CSS containment improves rendering performance via Playwright audits.

2.0k|679|Updated Jun 13, 2024

Search Tags:#playwright #Vue #performance audit #ComfyUI #DOM analysis #rendering performance #css containment

Ready to run

npx skills add https://github.com/Comfy-Org/ComfyUI_frontend --skill contain-audit

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: contain-audit
Source: https://github.com/Comfy-Org/ComfyUI_frontend/tree/main/.claude/skills/contain-audit
Command: npx skills add https://github.com/Comfy-Org/ComfyUI_frontend --skill contain-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Large ComfyUI workflows cause excessive browser style recalculations and layout passes, and developers lack a systematic way to find which DOM elements would benefit from CSS containment.

Core Features & Use Cases

Automated Candidate Scoring: Walks the DOM of a 245-node workflow and scores every element by subtree size and sizing constraints to rank containment candidates.
Measured Performance Impact: Applies contain: layout style at runtime and measures style recalcs, layout counts, and task duration before and after.
Visual Regression Checks: Captures before/after screenshots to detect visual breakage caused by containment.
Use Case: After adding new Vue components to the node rendering pipeline, run the audit to find high-scoring elements like the node inner wrapper and verify that adding containment reduces recalcs without visual changes.

Quick Start

Run the CSS containment audit on a large workflow with the dev server running and show me the ranked report of containment candidates.

Frequently Asked Questions about contain-audit

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

FAQPage Schema

How do I find DOM elements that benefit from CSS containment?▼

Run the Playwright-based audit against a large workflow; it walks the DOM tree, scores each element by subtree size and sizing constraints, and outputs a ranked table of containment candidates with measured performance deltas.

How to run the CSS containment audit in ComfyUI frontend?▼

Start the dev server with pnpm dev, then run pnpm exec playwright test browser_tests/tests/containAudit.spec.ts --project=audit. View results in the console table or the Playwright HTML report.

What makes an element a good CSS containment candidate?▼

Good candidates have large subtrees, externally constrained size via CSS variables or flex, no existing containment, and several child elements. Elements with overflowing children or content-determined height affecting siblings should be excluded.

Can CSS containment break the visual layout of nodes?▼

Yes, containment can break layouts when children overflow beyond element bounds. The audit takes before/after screenshots and flags pixel differences, but manual visual review is still required to confirm safety.

What are the limitations of automated CSS containment audits?▼

The audit cannot fully guarantee containment safety, measurements have natural variance, and it only tests idle and pan scenarios. Runtime style injection also ignores Tailwind purging and build-time optimizations.