home / skills / ehtbanton / claudeskillsrepo / babel-config-builder

babel-config-builder skill

safe

This skill helps you generate Babel configuration files for JavaScript/TypeScript projects with presets and plugins tailored to your target environment.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill babel-config-builder

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

Files (2)

SKILL.md

1.1 KB

---
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

```javascript
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.

Overview

This skill generates complete Babel 7 configuration files for JavaScript and TypeScript projects, including presets and common plugins. It outputs ready-to-use files such as babel.config.js, babel.config.json, or .babelrc tailored to the target environment and framework (React, Node, etc.). The configuration follows Babel 7 standards and is suitable for modern tooling and build pipelines.

How this skill works

When triggered, the skill inspects the requested target (browser, Node, React, TypeScript) and produces a valid Babel config with appropriate presets and plugin options. It can emit different file formats (CommonJS JS file, JSON file, or .babelrc) and includes sensible defaults like @babel/preset-env and transform runtime. The output is minimal, practical, and intended to be dropped into the project root.

When to use it

Setting up transpilation for a new React + TypeScript project
Adding Babel to a Node.js project to use modern JavaScript features
Creating CI/build configs that require a standardized Babel config file
Migrating legacy build setups to Babel 7 standards
Generating configs for frameworks that need automatic JSX runtime support

Best practices

Choose babel.config.js when you need project-wide (monorepo) configuration and dynamic options
Prefer @babel/preset-env with explicit targets to limit transpilation and polyfills
Include @babel/preset-typescript only when compiling TypeScript to JS; keep type checking separate
Use @babel/plugin-transform-runtime to avoid duplicating helper code and to support regenerator/runtime
Keep plugin and preset versions aligned with Babel 7.x to avoid compatibility issues

Example use cases

Create babel config for React TypeScript: outputs babel.config.js with @babel/preset-react (automatic) and @babel/preset-typescript
Generate babel configuration for a Node CLI: sets @babel/preset-env targets.node to current and includes plugin-transform-runtime
Produce a .babelrc JSON for a browser app with explicit browserslist targets and corejs polyfill handling
Create minimal babel.config.json for a TypeScript library intended for publishing to npm

FAQ

Which file format should I pick?

Use babel.config.js for monorepos or when you need dynamic logic; use .babelrc or babel.config.json for simple, static project configs.

Should I include TypeScript preset and type checking?

@babel/preset-typescript strips types during transpilation but does not do type checking. Keep a separate tsc or ESLint type-check step for validation.