playbooks

home / skills / harborgrid-justin / lexiflow-premium / .github-skills

.github-skills skill

/frontend/.github-skills

This skill helps reduce client bundle size by leveraging server components and streaming to minimize JavaScript and improve perceived performance.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill .github-skills

Review the files below or copy the command above to add this skill to your agents.

Files (75)
SKILL.md
788 B
---
name: zero-bundle-size-rsc
description: Minimizing client bundles through aggressive use of Server Components and streaming protocols.
---

# Zero-Bundle-Size React Server Components

## Summary
Minimizing client bundles through aggressive use of Server Components and streaming protocols.

## Key Capabilities
- Partition application graphs into Server/Client subtrees.
- Eliminate data-fetching libraries from client bundles.
- Serialize complex data structures across the network boundary.

## PhD-Level Challenges
- Formalize the serialization constraints of Server Components.
- Analyze the bandwidth vs. CPU trade-off of RSC payloads.
- Implement a dynamic import strategy for polymorphic server components.

## Acceptance Criteria
- Show a reduction in initial JS execute time.
- Demonstrate zero client-side JS for static subtrees.
- Provide a report on payload size reduction.

Overview

This skill minimizes client bundle size by aggressively leveraging React Server Components and streaming protocols. It focuses on partitioning app graphs so static and data-heavy logic run on the server, reducing the amount of JavaScript shipped to the browser. The result is faster initial load, lower CPU on clients, and measurable reductions in payload and JS execution time.

How this skill works

The skill analyzes the component graph and splits it into server and client subtrees, converting eligible components to Server Components. It replaces client-side data-fetching libraries with server-side data resolution and serializes complex structures across the server boundary using a compact, streaming-friendly format. Streaming techniques deliver renderable chunks progressively so the browser receives HTML first and minimal hydration-related JS only when needed.

When to use it

  • Large, data-driven apps where initial JS execution time is a bottleneck
  • Pages with many static or server-renderable UI subtrees
  • Applications wanting to remove client-side data-fetching libraries from bundles
  • Projects targeting low-powered devices or constrained networks
  • When you need predictable reductions in payload sizes and startup latency

Best practices

  • Identify pure rendering components and convert them to Server Components first
  • Keep interactivity boundaries explicit and limit client components to minimal UI glue
  • Use streaming responses to prioritize above-the-fold HTML and defer client scripts
  • Serialize only the data needed for next render; avoid sending full DB models
  • Measure JS execution time and payload sizes before and after changes

Example use cases

  • A legal management dashboard where most documents and lists are read-only and server-renderable
  • Landing pages with personalized but server-computed content to avoid client bundle costs
  • Admin consoles that only require a few interactive widgets, with the rest delivered as static HTML
  • Mobile web clients on slow networks where minimizing JS improves perceived performance

FAQ

Will this eliminate all client-side JavaScript?

Not always; interactive widgets still require client components. The skill aims to reach zero client JS for static subtrees and minimize JS for interactive areas.

How do you handle complex data like class instances or circular structures?

The skill uses a serialization strategy designed for Server Components that flattens or rehydrates complex structures into a compact, transferable form and documents constraints for edge cases.