home / skills / ntaksh42 / agents / config-file-generator

config-file-generator skill

/.claude/skills/config-file-generator

This skill generates configuration files for ESLint, Prettier, TypeScript, and Webpack to standardize project tooling.

npx playbooks add skill ntaksh42/agents --skill config-file-generator

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

Files (1)
SKILL.md
2.0 KB
---
name: config-file-generator
description: Generate configuration files for tools like ESLint, Prettier, TypeScript, and Webpack. Use when setting up project tooling or standardizing configurations.
---

# Config File Generator Skill

各種設定ファイルを生成するスキルです。

## 主な機能

- **ESLint**: .eslintrc.js
- **Prettier**: .prettierrc
- **TypeScript**: tsconfig.json
- **Jest**: jest.config.js
- **Webpack**: webpack.config.js
- **Babel**: babel.config.js
- **EditorConfig**: .editorconfig

## ESLint

```javascript
// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'no-console': 'warn',
    '@typescript-eslint/no-unused-vars': 'error',
    'react/react-in-jsx-scope': 'off'
  }
};
```

## Prettier

```json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}
```

## tsconfig.json

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}
```

## .editorconfig

```ini
root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.py]
indent_size = 4
```

## バージョン情報
- Version: 1.0.0

Overview

This skill generates ready-to-use configuration files for common JavaScript and TypeScript tooling. It produces standard templates for ESLint, Prettier, TypeScript, Jest, Webpack, Babel, and EditorConfig to speed up project setup and enforce consistent tooling. Use it to bootstrap new projects or standardize configs across a team.

How this skill works

Provide the target tools and any preferences (for example TypeScript vs JavaScript, React support, or desired Prettier options). The skill returns configuration files as plain-text templates you can copy into your repository. Templates include sensible defaults (strict TypeScript settings, Prettier styling, ESLint rules integrated with TypeScript and React) and common editor options via .editorconfig.

When to use it

  • Creating a new project and you need baseline configs for linting, formatting, and build tooling
  • Migrating a repository to a standardized set of configurations across multiple teams
  • Onboarding a developer who needs consistent development environment settings
  • Setting up CI pipelines that rely on consistent TypeScript, ESLint, or Jest behaviors

Best practices

  • Review and adapt generated configs to fit project requirements rather than using them unchanged
  • Keep formatting and lint rules in sync by extending Prettier inside ESLint when appropriate
  • Enable strict TypeScript compiler options for safer code, then relax only if necessary
  • Place generated files at the repository root and add them to version control
  • Document any deviations from defaults in the project README or CONTRIBUTING guide

Example use cases

  • Generate .eslintrc.js and .prettierrc when initializing a React+TypeScript app
  • Produce tsconfig.json with strict compiler options for a new library package
  • Create jest.config.js and babel.config.js for a test suite that uses modern JS features
  • Add .editorconfig to enforce consistent whitespace and line endings across editors
  • Provide webpack.config.js starter for legacy build setups that need bundling

FAQ

Can I customize the templates for my project?

Yes. The skill returns editable template files meant to be adjusted to your coding standards and project needs.

Do generated ESLint and Prettier configs conflict?

The templates are designed to work together by extending Prettier in ESLint; you should still verify rule overlap for your specific setup.