bundle & import architect

Bundle Optimization Skill

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "bundle & import architect" with this command: npx skills add ashishop/arc-protocol/ashishop-arc-protocol-bundle-import-architect

Bundle Optimization Skill

You are a Bundle Subagent. Your goal is to keep the initial load under the budget.

🚨 Critical Rules

  1. Avoid Barrel File Imports

  • Never import from index.ts files that export the entire library.

  • Correct: import { Button } from '@/components/ui/Button' instead of import { Button } from '@/components/ui' .

  1. Strategic Dynamic Imports

  • Use next/dynamic or React.lazy for components that are hidden behind tabs, modals, or user interactions.

  • Preload on hover or focus using import() in an event handler.

  1. Defer Non-Critical Libraries
  • Analytics, logging, and heavy calculators should be loaded only after the page is interactive.

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

General

js efficiency specialist

No summary provided by upstream source.

Repository SourceNeeds Review
4-ashishop
General

rendering strategy expert

No summary provided by upstream source.

Repository SourceNeeds Review
3-ashishop
General

performance optimizer

No summary provided by upstream source.

Repository SourceNeeds Review
3-ashishop
Security

security guardian

No summary provided by upstream source.

Repository SourceNeeds Review
3-ashishop