babel-config

sayali-ingle-pdl's avatarfrom sayali-ingle-pdl

Generates Babel configuration for JavaScript transpilation in tests. Creates babel.config.js file.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025

When & Why to Use This Skill

This Claude skill automates the generation of Babel configuration files specifically optimized for JavaScript and TypeScript transpilation within testing environments. It streamlines the setup of test runners like Jest and Vitest by researching current industry standards and creating up-to-date configuration files (e.g., babel.config.js) with the appropriate presets and plugins.

Use Cases

  • Initial Test Suite Setup: Quickly generate a valid Babel configuration when setting up Jest or Vitest in a new project to ensure modern JavaScript syntax is correctly processed.
  • TypeScript Migration: Automatically configure @babel/preset-typescript and related plugins to enable seamless testing of TypeScript codebases.
  • Standardizing Build Pipelines: Ensure consistent transpilation across different development environments and CI/CD pipelines by generating standard-compliant config files.
  • Resolving Transpilation Errors: Fix 'Unexpected token' or syntax errors in test environments by regenerating configurations based on the latest Babel documentation and package versions.
namebabel-config
descriptionGenerates Babel configuration for JavaScript transpilation in tests. Creates babel.config.js file.

Babel Config Skill

Purpose

Generate a Babel configuration file for transpilation in tests.

🔍 BEFORE GENERATING - RESEARCH CURRENT STANDARDS

⚠️ CRITICAL: Always verify current standards before generating. This skill may reference outdated conventions.

  1. Check latest Babel documentation: https://babeljs.io/docs/configuration
  2. Verify current config file format: Run npm view @babel/core version to check latest Babel version
  3. Verify current preset package names: Check if @babel/preset-env, @babel/preset-typescript are still current
  4. Check for deprecation warnings: Review latest Babel release notes for breaking changes
  5. If standards have changed: Use NEW standards from official docs, NOT the examples below

🚨 MANDATORY FILE COUNT

Total Required: 1 file

  • Babel config file (1 file) - extension may be .cjs, .mjs, .js, or .json depending on current standards

If this file is not created, test transpilation will FAIL.

Requirements (Dynamic - Verify Current Standards)

  • Check current Babel best practices before generating
  • Use latest recommended presets from official Babel documentation
  • Use current standard file extension for Babel configs
  • Verify package names exist in npm registry before adding: npm view <package> version
  • If @babel/preset-env is deprecated, use its successor
  • If .cjs extension is outdated, use current standard

Output

Create a Babel configuration file with the currently recommended format

Example Configuration (As of December 2025 - May be outdated)

⚠️ VERIFY these packages and conventions are still current before using:

Example File: babel.config.cjs

  • Extension: .cjs (CommonJS format - verify this is still standard)
  • Presets:
    • @babel/preset-env (for ES6+ transpilation - check if deprecated)
    • @babel/preset-typescript (for TypeScript - check if deprecated)
  • Plugins:
    • @babel/plugin-transform-runtime (check if still recommended)

If any of these are deprecated or outdated:

  • Check: https://babeljs.io/docs/ for current replacements
  • Check: npm view @babel/core@latest for latest version info
  • Check: Babel migration guides for breaking changes

Execution Checklist

Use this checklist to ensure the file is created:

  • FIRST: Research current Babel standards (see "BEFORE GENERATING" section)
  • Create Babel config file at project root (verify correct extension)
  • File includes current standard presets for ES6+ and TypeScript
  • File includes current standard plugins (if any)
  • Verify packages exist in npm: npm view <package> version
  • Verify file exists: ls babel.config.*

🛑 BLOCKING VALIDATION CHECKPOINT

STOP AND VERIFY before proceeding to the next skill:

Automated Verification (Flexible for any extension)

Run this command to verify the file exists:

# Check for babel config file (any valid extension)
if [ ! -f babel.config.cjs ] && [ ! -f babel.config.mjs ] && [ ! -f babel.config.js ] && [ ! -f babel.config.json ]; then
  echo "❌ MISSING: babel config file (expected: .cjs, .mjs, .js, or .json)"
  exit 1
fi
echo "✅ Babel config file present"

Manual Verification

  1. ✓ Babel config file exists at project root (any current standard extension)
  2. ✓ File contains current standard presets for ES6+ transpilation and TypeScript
  3. ✓ File contains current standard plugins (if required)
  4. ✓ All package names verified to exist: npm view <package> version
  5. ✓ Configuration follows latest Babel documentation standards

If Validation Fails

DO NOT PROCEED to the next skill. Create the missing file immediately.

Notes

  • Babel configuration for test environment transpilation (Jest/Vitest with Babel)
  • Transpiles modern JavaScript for Node test environment
  • File format depends on current Babel standards (check docs)
  • Presets automatically determine necessary transformations
  • Enables use of modern syntax in test files
  • Required for test frameworks to process ES modules and modern JavaScript features
  • Always verify current standards - Babel ecosystem evolves over time