babel-config
Generates Babel configuration for JavaScript transpilation in tests. Creates babel.config.js file.
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.
| name | babel-config |
|---|---|
| description | Generates 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.
- Check latest Babel documentation: https://babeljs.io/docs/configuration
- Verify current config file format: Run
npm view @babel/core versionto check latest Babel version - Verify current preset package names: Check if
@babel/preset-env,@babel/preset-typescriptare still current - Check for deprecation warnings: Review latest Babel release notes for breaking changes
- 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.jsondepending 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-envis deprecated, use its successor - If
.cjsextension 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@latestfor 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
- ✓ Babel config file exists at project root (any current standard extension)
- ✓ File contains current standard presets for ES6+ transpilation and TypeScript
- ✓ File contains current standard plugins (if required)
- ✓ All package names verified to exist:
npm view <package> version - ✓ 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