ashishop/arc-protocol
Overview
This skill is a Bundle & Import Architect focused on minimizing initial bundle size by enforcing import discipline and applying strategic lazy-loading. It guides developers to remove hidden costs from the critical path and provides concrete tactics to prevent bundle bloat. The goal is predictable, fast initial loads within a defined budget.
How this skill works
The skill inspects code imports and component usage to find barrel-file (index.ts) anti-patterns, large third-party libraries loaded on the critical path, and components that are good candidates for dynamic import. It recommends concrete fixes: direct file imports, next/dynamic or React.lazy for interaction-driven UI, and deferring non-critical libraries until after hydration. It also suggests preload and prefetch actions like import() on hover or focus.
When to use it
- When initial page load exceeds performance budget or Lighthouse score is low
- During code reviews to prevent new bundle bloat from PRs
- When adding third-party libraries (analytics, charts, machine learning)
- While refactoring UI into modular components or feature routes
- Before release to ensure first-byte and interactive times meet targets
Best practices
- Never import from barrel/index files that export the whole module; import specific files directly
- Wrap UI behind tabs, modals, and optional flows with next/dynamic or React.lazy
- Defer analytics, logging, and heavy calculators until after page interactive (use dynamic import or load on idle)
- Preload user-intent resources on hover/focus with import() to keep critical path small but responsive
- Measure with bundle analyzers and set strict budgets in CI to catch regressions early
Example use cases
- Convert a shared UI library import from '@/components/ui' to per-component imports to drop KBs from initial load
- Lazy-load a large chart component inside a dashboard tab using next/dynamic so charts load only when viewed
- Delay loading an analytics SDK until after first interaction to improve TTI
- Audit a repository to flag barrel imports and heavy direct imports in entry points
- Implement hover-triggered preload for a modal-heavy checkout flow to preserve snappy UX
FAQ
Use a static analysis tool or linter rule that flags imports from index.ts or directory paths and enforce direct file imports in CI.
When should I use next/dynamic vs React.lazy?
Use next/dynamic when working in Next.js for server-aware code-splitting and SSR options; React.lazy is fine for client-only apps.
4 skills
This skill helps optimize bundle size by enforcing tree-shaking, dynamic imports, and deferred analytics to reduce initial load.
This skill helps you boost Next.js and React performance by applying ARC-aligned layout, SVG, and typography optimizations.
This skill helps you maximize API and frontend throughput by eliminating waterfalls and orchestrating parallel tasks for faster, non-blocking execution.
This skill helps you detect vulnerabilities and enforce secure coding standards across projects, preventing secrets leakage and unsafe dependencies.
