Nicholai/dashore-incubator
1
0
Fork 0
mirror of https://github.com/NicholaiVogel/dashore-incubator.git synced 2026-03-30 22:38:56 +00:00
Code Issues Packages Projects Releases Wiki Activity
dashore-incubator/.agents/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
Nicholai 827f13a2db feat(skills): add agent skills for claude code 
add web-perf and vercel-react-best-practices skills from skills.sh
to improve ai assistance for this next.js + cloudflare workers project.

- web-perf: core web vitals analysis and performance auditing
- vercel-react-best-practices: react/next.js optimization patterns
- wrangler: cloudflare workers cli guidance (already existed)
2026-01-22 11:40:05 -07:00

815 B
Raw Blame History

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