CSS content-visibility for Long Lists
Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
The content-visibility property optimizes browser rendering by skipping the layout and painting phases for elements currently outside the viewport. When applied to large collections of repetitive UI components, this CSS rule instructs the browser engine to treat off-screen items as non-existent until they approach the user's field of view. By setting contain-intrinsic-size, you provide a placeholder dimension that prevents the scrollbar from jumping as content renders into view, maintaining a stable layout. This technique is effective for long lists where DOM overhead typically causes significant frame drops during initial page loading or rapid scrolling. By reducing the work required for items hidden from the user, you maintain responsiveness and improve interactivity metrics without removing essential data from the document structure.
When to Use This Skill
- •Rendering extensive chat message histories in messaging interfaces
- •Displaying infinite-scroll social media feeds
- •Managing large product catalogs or grid views in e-commerce sites
- •Optimizing long-form documentation pages with hundreds of sections
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Optimize long list rendering performance
- “Fix slow scrolling in my message component
- “Reduce layout shift and paint time for big lists
- “Implement content-visibility for my React list
- “Make my long scrollable feed load faster
What this skill does
- •Skips layout and painting calculations for off-screen nodes
- •Maintains scroll position stability via estimated intrinsic dimensions
- •Reduces initial DOM processing time by suppressing background rendering
- •Decreases memory usage by limiting active rendering tasks
- •Automatically triggers re-rendering when an element nears the viewport
When not to use it
- ✕Elements that must be visible for search engine indexers
- ✕Components that require immediate visual updates while off-screen
- ✕Short lists where the overhead of the browser engine is already negligible
Example workflow
- Identify a container element rendering a large array of repetitive items
- Apply content-visibility: auto to the individual item class
- Measure the item height or use a standardized average height
- Define contain-intrinsic-size with the measured height dimensions
- Verify scroll stability by quickly scrolling through the list
- Analyze paint times in browser dev tools to confirm reduction
Pitfalls & limitations
- !Incorrect contain-intrinsic-size values lead to erratic scrollbar behavior
- !Requires browsers that support the CSS containment module
- !Content inside the elements might not be findable via browser 'Find in Page' until scrolled into view
FAQ
How it compares
Unlike manual virtualization that requires complex JavaScript logic for index tracking, this is a native CSS-only solution that handles rendering states automatically without external dependencies.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Apply
content-visibility: auto to defer off-screen rendering.**CSS:**
.message-item {
content-visibility: auto;
contain-intrinsic-size: 0 80px;
}**Example:**
function MessageList({ messages }: { messages: Message[] }) {
return (
<div className="overflow-y-auto h-screen">
{messages.map(msg => (
<div key={msg.id} className="message-item">
<Avatar user={msg.author} />
<div>{msg.content}</div>
</div>
))}
</div>
)
}For 1000 messages, browser skips layout/paint for ~990 off-screen items (10× faster initial render).
How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/rendering-content-visibility/ - 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/rendering-content-visibility/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/rendering-content-visibility/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/rendering-content-visibility/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
