kennethnym/aris
1
0
Fork 0
mirror of https://github.com/kennethnym/aris.git synced 2026-02-02 13:11:17 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
1893c516f341f6dae65c37a0c0b1a5f38b3fce33
aris/.claude/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
kenneth 331a2596fa Add Claude skills for React best practices and web design 
- react-best-practices: Performance optimization patterns (client-side only)
- web-design-guidelines: UI review against Web Interface Guidelines

Co-authored-by: Ona <no-reply@ona.com>
2026-01-17 11:53:08 +00:00

815 B
Raw Blame History

title, impact, impactDescription, tags
title impact impactDescription tags
CSS content-visibility for Long Lists HIGH faster initial render rendering, css, content-visibility, long-lists

CSS content-visibility for Long Lists

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).