Agent skill
webpack-config-builder
Generate Webpack configuration files for bundling JavaScript/TypeScript applications with loaders, plugins, and optimization settings. Triggers on "create webpack config", "generate webpack configuration", "webpack setup for", "bundle config".
Install this agent skill to your Project
npx add-skill https://github.com/ehtbanton/ClaudeSkillsRepo/tree/main/webpack-config-builder
SKILL.md
Webpack Config Builder
Generate production-ready Webpack configuration files with appropriate loaders, plugins, and optimization settings.
Output Requirements
File Output: webpack.config.js or webpack.config.ts
Format: Valid Webpack 5 configuration
Standards: Webpack 5.x
When Invoked
Immediately generate a complete Webpack configuration with development and production modes, loaders for common file types, and optimization settings.
Configuration Template
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env, argv) => {
const isProduction = argv.mode === 'production';
return {
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: isProduction ? '[name].[contenthash].js' : '[name].js',
clean: true,
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: { '@': path.resolve(__dirname, 'src') },
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({ template: './public/index.html' }),
isProduction && new MiniCssExtractPlugin(),
].filter(Boolean),
devServer: {
port: 3000,
hot: true,
},
};
};
Example Invocations
Prompt: "Create webpack config for React TypeScript"
Output: Complete webpack.config.js with TypeScript, React, CSS support.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
ehtbanton/ClaudeSkillsRepo
esbuild-config-generator
Generate esbuild configuration files for ultra-fast JavaScript/TypeScript bundling. Triggers on "create esbuild config", "generate esbuild configuration", "esbuild setup", "fast bundler config".
ehtbanton/ClaudeSkillsRepo
lint-staged-config-generator
Generate lint-staged configuration for running linters on staged Git files. Triggers on "create lint-staged config", "generate lint staged", "lint-staged setup", "staged file linting".
ehtbanton/ClaudeSkillsRepo
rollup-config-generator
Generate Rollup configuration files for bundling JavaScript libraries. Triggers on "create rollup config", "generate rollup configuration", "rollup setup", "library bundler config".
ehtbanton/ClaudeSkillsRepo
eslint-config-generator
Generate ESLint configuration files (.eslintrc.js, eslint.config.js) for JavaScript/TypeScript projects with framework-specific rules. Triggers on "create ESLint config", "generate eslint configuration", "eslint setup for", "linting rules for".
ehtbanton/ClaudeSkillsRepo
csp-header-generator
Generate Content Security Policy (CSP) header configurations for web security. Triggers on "create csp header", "generate content security policy", "csp config", "security headers".
ehtbanton/ClaudeSkillsRepo
prisma-schema-builder
Generate Prisma schema files with models, relations, enums, and database configuration for TypeScript ORM setup. Triggers on "create Prisma schema", "generate Prisma model", "prisma.schema for", "database schema Prisma".
Didn't find tool you were looking for?