Config Generate

Configuration File Generator

I'll generate configuration files for common development tools: TypeScript, ESLint, Prettier, Jest, Vitest, and more.

Arguments: $ARGUMENTS - config type (tsconfig, eslint, prettier, jest, etc.)

Supported Configs:

• TypeScript: tsconfig.json
• Linting: .eslintrc.js, .eslintignore
• Formatting: .prettierrc, .prettierignore
• Testing: jest.config.js, vitest.config.ts
• Bundling: vite.config.ts, webpack.config.js
• Git: .gitignore, .gitattributes

Token Optimization

Optimization Status: ✅ Fully Optimized (Phase 2 Batch 4B, 2026-01-27)

Baseline: 2,500-4,000 tokens → Optimized: 400-800 tokens (~80% reduction)

This skill achieves exceptional optimization through template-based generation. As a pure configuration generation skill, it leverages pre-built templates and framework detection to eliminate expensive codebase scanning.

Core Optimization Strategies

1. Template-Based Generation (85% savings)

CRITICAL: Use pre-built configuration templates for all common tools

• Cache complete configs for ESLint, Prettier, TypeScript, Jest, Vitest, etc.
• Maintain templates in ~/.claude/cache/config_templates.json
• Apply framework-specific variations from cached presets
• Never read existing configs unless explicitly modifying them

Implementation:

// Cache structure: ~/.claude/cache/config_templates.json
{
  "tsconfig": {
    "base": { /* 137 lines of base TypeScript config */ },
    "nextjs": { /* Next.js specific overrides */ },
    "react": { /* React specific settings */ }
  },
  "eslint": {
    "base": { /* 293 lines of ESLint config */ },
    "react": { /* React plugin additions */ },
    "vue": { /* Vue plugin additions */ }
  },
  "prettier": { /* 342 lines of Prettier config */ },
  "jest": { /* 406 lines of Jest config */ },
  "vitest": { /* 479 lines of Vitest config */ }
}

Before: Read similar configs from codebase (800-1,200 tokens) After: Write from cached template (100-200 tokens)

2. Framework Detection via package.json (80% savings)

CRITICAL: Detect project type from package.json without full codebase scan

• Read ONLY package.json for framework/tool detection
• Use Grep on package.json for presence checks
• Never scan directories or read multiple files

Before:

# Expensive: Scan codebase for framework indicators
find src -name "*.tsx" -o -name "*.vue"  # 300-500 tokens
cat src/main.tsx src/App.tsx  # 400-800 tokens

After:

# Efficient: Single package.json analysis
grep -E '"(react|vue|next|typescript|jest|vitest)"' package.json  # 50-100 tokens

3. Batch Generation (80% savings)

CRITICAL: Generate all configs in one pass

• Create multiple config files in single operation
• Write all files together without individual verification
• Use multi-file Write operations

Before:

# Sequential: Generate each config separately
Write tsconfig.json  # 200 tokens
Read back for verification  # 150 tokens
Write .eslintrc.js  # 200 tokens
Read back for verification  # 150 tokens
# Total: 700+ tokens for 2 configs

After:

# Batch: Generate all configs together
Write tsconfig.json + .eslintrc.js + .prettierrc + .gitignore  # 300 tokens
# No verification reads
# Total: 300 tokens for 4 configs

4. No Verification Reads (90% savings)

CRITICAL: Write configs directly without reading back

• Trust template-based generation
• Skip verification unless user explicitly requests validation
• Assume Write operations succeed

Before:

Write .eslintrc.js  # 150 tokens
Read .eslintrc.js for verification  # 200 tokens
Validate syntax  # 100 tokens
# Total: 450 tokens

After:

Write .eslintrc.js  # 150 tokens
# Total: 150 tokens (67% savings)

5. Cached Tool Versions (75% savings)

CRITICAL: Cache latest compatible versions and config formats

• Store current config standards in ~/.claude/cache/tool_versions.json
• Update cache quarterly for breaking changes
• Never search documentation or check latest versions

Implementation:

// ~/.claude/cache/tool_versions.json
{
  "eslint": {
    "version": "^9.0.0",
    "parser": "@typescript-eslint/parser@^8.0.0",
    "plugins": ["@typescript-eslint@^8.0.0", "eslint-plugin-react@^7.37.0"]
  },
  "prettier": {
    "version": "^3.2.0",
    "config_format": "json",
    "recommended_rules": { /* cached rules */ }
  }
}

Before: Search for latest compatible versions (400-600 tokens) After: Use cached versions (50-100 tokens)

Framework-Specific Optimizations

React/Next.js Projects

# Detect React ecosystem (50 tokens)
grep -q '"react"' package.json && FRAMEWORK="react"
grep -q '"next"' package.json && FRAMEWORK="nextjs"

# Apply React-specific template (100 tokens)
# Write: tsconfig.json, .eslintrc.js (React plugins), .prettierrc
# Total: 150 tokens vs 800+ tokens baseline

Vue/Nuxt Projects

# Detect Vue ecosystem (50 tokens)
grep -q '"vue"' package.json && FRAMEWORK="vue"

# Apply Vue-specific template (100 tokens)
# Total: 150 tokens

Cache Management

Cache Creation: Run once to populate templates

# Initial cache setup (one-time cost: 2,000 tokens)
mkdir -p ~/.claude/cache
# Store all config templates
cat > ~/.claude/cache/config_templates.json << 'EOF'
{ /* all templates */ }
EOF

Cache Structure:

~/.claude/cache/
├── config_templates.json  # 2MB of config templates
├── framework_defaults.json  # Framework-specific presets
└── tool_versions.json  # Latest compatible versions

Cache Invalidation:

• Update quarterly for breaking changes in ESLint, Prettier, TypeScript
• Automatic update on major version bumps in package.json
• Manual invalidation: rm ~/.claude/cache/*.json

Token Usage Breakdown

Baseline (2,500-4,000 tokens):

1. Framework detection via file scanning: 500-800 tokens
2. Read existing configs for reference: 800-1,200 tokens
3. Generate new configs: 400-600 tokens
4. Verify generated configs: 400-600 tokens
5. Dependency version lookup: 400-600 tokens

Optimized (400-800 tokens):

1. Framework detection via package.json: 50-100 tokens
2. Template selection from cache: 50-100 tokens
3. Batch write all configs: 200-400 tokens
4. Dependency info from cache: 100-200 tokens

Special Cases

Existing Configs:

• Only read if explicitly modifying existing config
• Otherwise, write new config from template
• Backup existing config with .backup suffix

Custom Requirements:

• Apply customizations on top of base template
• Merge user preferences with cached template
• Document custom rules in config comments

Integration with Other Skills

Upstream Dependencies:

• /ci-setup - Generates configs as part of CI setup
• /scaffold - Includes config generation in project scaffolding
• /boilerplate - Adds framework-specific configs

Downstream Usage:

• /format - Uses generated Prettier config
• /review - Uses generated ESLint config
• /test - Uses generated Jest/Vitest config

Success Metrics

• 80-85% token reduction on typical usage
• 200-300 tokens for basic config set (tsconfig + eslint + prettier)
• 400-800 tokens for comprehensive setup (all configs + framework-specific)
• <50 tokens for single config generation
• Zero verification reads in standard workflow

Optimization Checklist

• Template-based generation for all common configs
• Framework detection via package.json only
• Batch generation of multiple configs
• No verification reads by default
• Cached tool versions and formats
• Framework-specific template variations
• Single-pass multi-file writes
• Early exit for missing package.json
• Progressive disclosure (minimal output)
• Integrated cache management

Phase 1: Detect Project Requirements

#!/bin/bash
# Detect project type and requirements

echo "=== Analyzing Project ==="
echo ""

# Detect package manager
detect_package_manager() {
    if [ -f "pnpm-lock.yaml" ]; then
        echo "pnpm"
    elif [ -f "yarn.lock" ]; then
        echo "yarn"
    elif [ -f "package-lock.json" ]; then
        echo "npm"
    elif [ -f "bun.lockb" ]; then
        echo "bun"
    else
        echo "npm"
    fi
}

PKG_MANAGER=$(detect_package_manager)
echo "✓ Package manager: $PKG_MANAGER"

# Detect TypeScript
if [ -f "package.json" ]; then
    if grep -q "\"typescript\"" package.json; then
        HAS_TYPESCRIPT=true
        echo "✓ TypeScript detected"
    else
        HAS_TYPESCRIPT=false
    fi

    # Detect frameworks
    if grep -q "\"react\"" package.json; then
        FRAMEWORK="react"
        echo "✓ Framework: React"
    elif grep -q "\"vue\"" package.json; then
        FRAMEWORK="vue"
        echo "✓ Framework: Vue"
    elif grep -q "\"next\"" package.json; then
        FRAMEWORK="nextjs"
        echo "✓ Framework: Next.js"
    fi

    # Detect test framework
    if grep -q "\"jest\"" package.json; then
        TEST_FRAMEWORK="jest"
        echo "✓ Test framework: Jest"
    elif grep -q "\"vitest\"" package.json; then
        TEST_FRAMEWORK="vitest"
        echo "✓ Test framework: Vitest"
    fi
fi

echo ""

Phase 2: Generate tsconfig.json

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,

    /* Modules */
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "allowImportingTsExtensions": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"],
      "@types/*": ["./src/types/*"]
    },

    /* Emit */
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "removeComments": true,
    "noEmit": true,

    /* Interop Constraints */
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,

    /* Type Checking */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": true,

    /* Completeness */
    "skipLibCheck": true
  },
  "include": [
    "src/**/*",
    "tests/**/*",
    "*.ts",
    "*.tsx"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build",
    "coverage"
  ]
}

Framework-specific variations:

// Next.js tsconfig.json
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Phase 3: Generate ESLint Configuration

// .eslintrc.js - Comprehensive ESLint config
module.exports = {
  root: true,
  env: {
    browser: true,
    es2022: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:import/recommended',
    'plugin:import/typescript',
    'prettier', // Must be last
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
    project: './tsconfig.json',
  },
  plugins: [
    '@typescript-eslint',
    'react',
    'react-hooks',
    'jsx-a11y',
    'import',
  ],
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
        project: './tsconfig.json',
      },
    },
  },
  rules: {
    // TypeScript specific rules
    '@typescript-eslint/no-unused-vars': [
      'error',
      { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
    ],
    '@typescript-eslint/no-explicit-any': 'warn',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-non-null-assertion': 'warn',
    '@typescript-eslint/consistent-type-imports': [
      'error',
      { prefer: 'type-imports' },
    ],

    // React specific rules
    'react/react-in-jsx-scope': 'off', // Not needed in React 17+
    'react/prop-types': 'off', // TypeScript handles this
    'react/jsx-uses-react': 'off',
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',

    // Import rules
    'import/order': [
      'error',
      {
        groups: [
          'builtin',
          'external',
          'internal',
          'parent',
          'sibling',
          'index',
        ],
        'newlines-between': 'always',
        alphabetize: { order: 'asc', caseInsensitive: true },
      },
    ],
    'import/no-unresolved': 'error',
    'import/no-cycle': 'error',

    // General rules
    'no-console': ['warn', { allow: ['warn', 'error'] }],
    'no-debugger': 'warn',
    'prefer-const': 'error',
    'no-var': 'error',
  },
  overrides: [
    {
      // Test files
      files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts'],
      env: {
        jest: true,
      },
      rules: {
        '@typescript-eslint/no-explicit-any': 'off',
      },
    },
  ],
};

# .eslintignore
node_modules/
dist/
build/
coverage/
.next/
out/
*.min.js
*.config.js
public/

Phase 4: Generate Prettier Configuration

// .prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "jsxBracketSameLine": false,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "printWidth": 120
      }
    },
    {
      "files": "*.md",
      "options": {
        "proseWrap": "always"
      }
    }
  ]
}

# .prettierignore
node_modules/
dist/
build/
coverage/
.next/
out/
pnpm-lock.yaml
package-lock.json
yarn.lock
*.min.js
*.min.css

Phase 5: Generate Jest Configuration

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  roots: ['<rootDir>/src', '<rootDir>/tests'],
  testMatch: [
    '**/__tests__/**/*.+(ts|tsx|js)',
    '**/?(*.)+(spec|test).+(ts|tsx|js)',
  ],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/**/*.stories.tsx',
    '!src/index.tsx',
  ],
  coverageThreshold: {
    global: {
      branches: 70,
      functions: 70,
      lines: 70,
      statements: 70,
    },
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@components/(.*)$': '<rootDir>/src/components/$1',
    '^@utils/(.*)$': '<rootDir>/src/utils/$1',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.js',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  globals: {
    'ts-jest': {
      tsconfig: {
        jsx: 'react',
      },
    },
  },
  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/build/'],
  watchPathIgnorePatterns: ['/node_modules/', '/dist/', '/build/'],
};

// jest.setup.js
import '@testing-library/jest-dom';

// Mock window.matchMedia
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

// Mock IntersectionObserver
global.IntersectionObserver = class IntersectionObserver {
  constructor() {}
  disconnect() {}
  observe() {}
  takeRecords() {
    return [];
  }
  unobserve() {}
};

Phase 6: Generate Vitest Configuration

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./vitest.setup.ts'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      exclude: [
        'node_modules/',
        'dist/',
        '**/*.d.ts',
        '**/*.config.*',
        '**/mockData/',
      ],
      thresholds: {
        lines: 70,
        functions: 70,
        branches: 70,
        statements: 70,
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
    },
  },
});

Phase 7: Generate .gitignore

# Dependencies
node_modules/
.pnp
.pnp.js

# Testing
coverage/
.nyc_output

# Production
build/
dist/
out/
.next/

# Misc
.DS_Store
*.pem
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# Local env files
.env
.env*.local
.env.development.local
.env.test.local
.env.production.local

# Vercel
.vercel

# TypeScript
*.tsbuildinfo
next-env.d.ts

# IDE
.vscode/
.idea/
*.swp
*.swo
*~

# OS
.DS_Store
Thumbs.db

Phase 8: Generate Vite Configuration

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
    },
  },
  server: {
    port: 3000,
    open: true,
    cors: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
  optimizeDeps: {
    include: ['react', 'react-dom'],
  },
});

Summary

echo ""
echo "=== ✓ Configuration Generation Complete ==="
echo ""
echo "📁 Generated configuration files:"

if [ "$HAS_TYPESCRIPT" = true ]; then
    echo "  ✓ tsconfig.json          # TypeScript configuration"
fi

echo "  ✓ .eslintrc.js           # ESLint rules"
echo "  ✓ .eslintignore          # ESLint ignore patterns"
echo "  ✓ .prettierrc            # Prettier formatting"
echo "  ✓ .prettierignore        # Prettier ignore patterns"

if [ "$TEST_FRAMEWORK" = "jest" ]; then
    echo "  ✓ jest.config.js         # Jest test configuration"
    echo "  ✓ jest.setup.js          # Jest setup file"
elif [ "$TEST_FRAMEWORK" = "vitest" ]; then
    echo "  ✓ vitest.config.ts       # Vitest configuration"
    echo "  ✓ vitest.setup.ts        # Vitest setup file"
fi

echo "  ✓ .gitignore             # Git ignore patterns"

echo ""
echo "📦 Install required dependencies:"
echo ""

if [ "$HAS_TYPESCRIPT" = true ]; then
    echo "$PKG_MANAGER add -D typescript @types/node"
fi

echo "$PKG_MANAGER add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin"
echo "$PKG_MANAGER add -D prettier eslint-config-prettier"

if [ "$FRAMEWORK" = "react" ]; then
    echo "$PKG_MANAGER add -D eslint-plugin-react eslint-plugin-react-hooks"
    echo "$PKG_MANAGER add -D eslint-plugin-jsx-a11y"
fi

echo "$PKG_MANAGER add -D eslint-plugin-import"

if [ "$TEST_FRAMEWORK" = "jest" ]; then
    echo "$PKG_MANAGER add -D jest ts-jest @testing-library/react @testing-library/jest-dom"
elif [ "$TEST_FRAMEWORK" = "vitest" ]; then
    echo "$PKG_MANAGER add -D vitest @vitest/ui @testing-library/react"
fi

echo ""
echo "🚀 Add scripts to package.json:"
echo ""
echo '  "scripts": {'
echo '    "lint": "eslint . --ext .ts,.tsx",'
echo '    "lint:fix": "eslint . --ext .ts,.tsx --fix",'
echo '    "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",'
echo '    "format:check": "prettier --check \"src/**/*.{ts,tsx,json,md}\"",'
echo '    "type-check": "tsc --noEmit"'
echo '  }'
echo ""
echo "💡 Next steps:"
echo "  1. Install dependencies"
echo "  2. Run: $PKG_MANAGER run lint"
echo "  3. Run: $PKG_MANAGER run format"
echo "  4. Configure IDE to use these configs"

Best Practices

Configuration Quality:

• Start with strict settings
• Relax rules only when needed
• Use framework-specific presets
• Keep configs in sync

Maintenance:

• Update dependencies regularly
• Review deprecated rules
• Test config changes
• Document custom rules

Integration Points:

• /ci-setup - Add to CI pipeline
• /format - Use for code formatting
• /review - Check code quality

What I'll Actually Do

1. Detect project - Framework and tools
2. Generate configs - Optimized for project
3. Add best practices - Strict but practical
4. Framework-specific - Tailored settings
5. Complete setup - All necessary files

Important: I will NEVER add AI attribution.

Credits: Configuration patterns based on TypeScript, ESLint, Prettier, Jest, and Vitest official documentation and community best practices.