metro-bundler

What This Skill Does

The metro-bundler skill is a specialized AI agent module designed to assist developers in managing, configuring, and optimizing the React Native Metro bundler. It serves as an expert consultant for resolving complex build failures, architectural configuration, and performance tuning. Whether you are dealing with 'unable to resolve module' errors, deep dependency resolution issues, or configuring custom transformers for assets like SVG or TypeScript, this skill provides actionable, syntax-accurate solutions. It understands the underlying machinery of Metro, including the Transformer, Resolver, and Serializer phases, allowing it to provide guidance on advanced topics such as monorepo path resolution, source map generation, and inline-require implementation for optimized startup performance.

Installation

To integrate this skill into your environment, run the following command in your terminal within your OpenClaw-enabled project:

clawhub install openclaw/skills/skills/anton-abyzov/sw-metro-bundler

Ensure that your environment has sufficient permissions to modify the metro.config.js file, as the agent may generate specific code snippets or configuration overrides required for your setup.

Use Cases

• Build Troubleshooting: When your project fails to bundle due to missing modules or conflicting dependencies.
• Asset Management: Configuring custom loaders for non-standard assets like SVGs or specific binary file types.
• Monorepo Optimization: Syncing paths and watchFolders to allow your React Native app to consume code from workspace-level shared libraries.
• Performance Tuning: Implementing 'inlineRequires' and adjusting transformation options to reduce Time-to-Interactive (TTI) for larger mobile applications.
• Build Pipeline Audits: Reviewing your existing metro.config.js for deprecated properties or inefficient resolution strategies.

Example Prompts

1. 'I am getting an "Unable to resolve module" error for a package located in a parent directory. How should I update my metro.config.js to include it in the resolution path?'
2. 'My React Native app startup is slow. Can you walk me through the steps to implement inline requires and explain how it impacts the bundle size?'
3. 'How do I configure the transformer settings in Metro to correctly handle .svg files using react-native-svg-transformer?'

Tips & Limitations

• Context is Key: Always share your existing metro.config.js snippet when asking for modifications; this prevents the AI from making assumptions about your setup.
• Cache Integrity: Often, Metro errors persist due to cached artifacts. If the recommended configuration doesn't work, ensure you explicitly run npx react-native start --reset-cache to force a clean state.
• Platform Specifics: Remember that Metro configurations are often platform-specific. If your issues only affect iOS or Android, specify this in your prompt to get more tailored resolution settings.