babel-config-builder
Generate Babel configuration files for JavaScript/TypeScript transpilation with presets and plugins. Triggers on "create babel config", "generate babel configuration", "babel setup", "transpilation config".
When & Why to Use This Skill
The Babel Config Builder is a specialized Claude skill designed to automate the generation of Babel configuration files for JavaScript and TypeScript development. It streamlines the setup of transpilation environments by providing optimized, ready-to-use templates for presets and plugins, ensuring modern code compatibility across various platforms and environments.
Use Cases
- React & TypeScript Integration: Quickly generate a babel.config.js file tailored for modern React applications using TypeScript and the automatic JSX runtime.
- Cross-Browser Compatibility: Create configurations using @babel/preset-env to transpile modern ES6+ syntax into backwards-compatible JavaScript for older browser support.
- Node.js Backend Optimization: Configure Babel to target specific Node.js versions, reducing unnecessary polyfills and improving execution speed for server-side applications.
- Project Migration: Easily upgrade or migrate build systems to Babel 7 standards with standardized configuration structures.
| name | babel-config-builder |
|---|---|
| description | Generate Babel configuration files for JavaScript/TypeScript transpilation with presets and plugins. Triggers on "create babel config", "generate babel configuration", "babel setup", "transpilation config". |
Babel Config Builder
Generate Babel configuration files for JavaScript transpilation with appropriate presets and plugins.
Output Requirements
File Output: babel.config.js, babel.config.json, or .babelrc
Format: Valid Babel 7 configuration
Standards: Babel 7.x
When Invoked
Immediately generate a complete Babel configuration with presets for the target environment and necessary plugins.
Configuration Template
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
'@babel/preset-typescript',
['@babel/preset-react', { runtime: 'automatic' }],
],
plugins: [
'@babel/plugin-transform-runtime',
],
};
Example Invocations
Prompt: "Create babel config for React TypeScript"
Output: Complete babel.config.js with React, TypeScript presets.