Automation Scripts Generator

Expert skill for creating automation scripts and CLI tools for UI library development. Specializes in component generators, bulk operations, code transformers, project scaffolding, and custom development workflows.

Core Capabilities

1. Component Generation Scripts

• New Component: Generate complete component with tests, styles, docs
• Variant Generator: Create component variants automatically
• Bulk Creation: Generate multiple components at once
• Template Customization: Configurable component templates
• File Organization: Auto-organize files in correct structure
• Index Updates: Auto-update barrel exports

2. Code Transformation

• Refactoring Scripts: Automated code refactoring
• Migration Tools: Migrate between patterns/libraries
• Import Organizer: Sort and clean imports
• Props Transformer: Convert prop patterns
• Type Generator: Generate TypeScript types from data
• Style Converter: Convert CSS to different formats

3. Bulk Operations

• Mass Rename: Rename files/components in bulk
• Batch Update: Update props across components
• Global Replace: Smart search and replace
• Delete Unused: Find and remove unused code
• Add Feature: Add feature to multiple components
• Update Dependencies: Batch dependency updates

4. Project Scaffolding

• New Project: Initialize complete UI library
• Documentation Site: Set up Storybook/docs site
• Testing Setup: Configure testing infrastructure
• CI/CD Pipeline: Set up GitHub Actions
• Package Configuration: Set up build and publish
• Monorepo Setup: Configure Turborepo/Nx

5. CLI Tools

• Interactive Prompts: User-friendly CLI interface
• Command Framework: Build custom commands
• Configuration: Load/save preferences
• Validation: Input validation and error handling
• Progress Indicators: Show progress for long operations
• Logging: Structured logging and debugging

6. Quality Automation

• Linting Scripts: Auto-fix lint issues
• Format All: Format entire codebase
• Type Check: Run TypeScript checks
• Test Runner: Execute test suites
• Coverage Reports: Generate coverage analysis
• Performance Audit: Analyze bundle sizes

Workflow

Phase 1: Script Planning

1. Identify Task

   • What needs automation?
   • How often is it done?
   • What's the manual process?
   • What can go wrong?

2. Design Solution

   • Command interface?
   • Input parameters?
   • Output format?
   • Error handling?

3. Choose Tools

   • Node.js script?
   • Shell script?
   • CLI framework?
   • Dependencies needed?

Phase 2: Implementation

1. Build Core Logic

   • File operations
   • Code generation
   • Validation
   • Error handling

2. Add CLI Interface

   • Argument parsing
   • Interactive prompts
   • Progress indicators
   • Output formatting

3. Test Thoroughly

   • Happy path
   • Edge cases
   • Error scenarios
   • Dry run mode

Phase 3: Integration

1. Document Script

   • Usage instructions
   • Examples
   • Options reference
   • Troubleshooting

2. Add to Workflow

   • npm scripts
   • package.json
   • CI/CD pipeline
   • Developer docs

3. Optimize

   • Performance
   • Error messages
   • User experience
   • Logging

Script Templates

Component Generator (Node.js)

#!/usr/bin/env node
// scripts/generate-component.ts
import fs from 'fs/promises'
import path from 'path'
import { prompts } from 'prompts'
import chalk from 'chalk'

interface ComponentOptions {
  name: string
  type: 'basic' | 'compound' | 'polymorphic'
  withTests: boolean
  withStories: boolean
  withDocs: boolean
}

async function generateComponent(options: ComponentOptions) {
  const { name, type, withTests, withStories, withDocs } = options

  console.log(chalk.blue(`\n🚀 Generating ${type} component: ${name}\n`))

  const componentDir = path.join(process.cwd(), 'src', 'components', name)

  // Create directory
  await fs.mkdir(componentDir, { recursive: true })

  // Generate component file
  const componentCode = generateComponentCode(name, type)
  await fs.writeFile(path.join(componentDir, `${name}.tsx`), componentCode)
  console.log(chalk.green(`✓ Created ${name}.tsx`))

  // Generate types file
  const typesCode = generateTypesCode(name)
  await fs.writeFile(path.join(componentDir, `${name}.types.ts`), typesCode)
  console.log(chalk.green(`✓ Created ${name}.types.ts`))

  // Generate tests
  if (withTests) {
    const testCode = generateTestCode(name)
    await fs.writeFile(path.join(componentDir, `${name}.test.tsx`), testCode)
    console.log(chalk.green(`✓ Created ${name}.test.tsx`))
  }

  // Generate Storybook story
  if (withStories) {
    const storyCode = generateStoryCode(name)
    await fs.writeFile(path.join(componentDir, `${name}.stories.tsx`), storyCode)
    console.log(chalk.green(`✓ Created ${name}.stories.tsx`))
  }

  // Generate README
  if (withDocs) {
    const readmeCode = generateReadmeCode(name)
    await fs.writeFile(path.join(componentDir, 'README.md'), readmeCode)
    console.log(chalk.green(`✓ Created README.md`))
  }

  // Generate index file
  const indexCode = generateIndexCode(name)
  await fs.writeFile(path.join(componentDir, 'index.ts'), indexCode)
  console.log(chalk.green(`✓ Created index.ts`))

  // Update barrel export
  await updateBarrelExport(name)
  console.log(chalk.green(`✓ Updated src/components/index.ts`))

  console.log(chalk.green.bold(`\n✨ Component ${name} generated successfully!\n`))
}

function generateComponentCode(name: string, type: string): string {
  const templates = {
    basic: `import React from 'react'
import { ${name}Props } from './${name}.types'

export function ${name}({ children, ...props }: ${name}Props) {
  return (
    <div {...props}>
      {children}
    </div>
  )
}`,
    compound: `import React, { createContext, useContext } from 'react'
import { ${name}Props, ${name}ContextValue } from './${name}.types'

const ${name}Context = createContext<${name}ContextValue | undefined>(undefined)

export function ${name}({ children, ...props }: ${name}Props) {
  const value: ${name}ContextValue = {
    // Add context value here
  }

  return (
    <${name}Context.Provider value={value}>
      <div {...props}>{children}</div>
    </${name}Context.Provider>
  )
}

export function use${name}() {
  const context = useContext(${name}Context)
  if (!context) {
    throw new Error('use${name} must be used within ${name}')
  }
  return context
}

${name}.Item = function ${name}Item({ children }: { children: React.ReactNode }) {
  const context = use${name}()
  return <div>{children}</div>
}`,
    polymorphic: `import React from 'react'
import { ${name}Props } from './${name}.types'

export function ${name}<C extends React.ElementType = 'div'>({
  as,
  children,
  ...props
}: ${name}Props<C>) {
  const Component = as || 'div'
  return <Component {...props}>{children}</Component>
}`,
  }

  return templates[type] || templates.basic
}

function generateTypesCode(name: string): string {
  return `import React from 'react'

export interface ${name}Props extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode
  // Add your props here
}

export interface ${name}ContextValue {
  // Add context value types here
}`
}

function generateTestCode(name: string): string {
  return `import { render, screen } from '@testing-library/react'
import { ${name} } from './${name}'

describe('${name}', () => {
  it('renders children', () => {
    render(<${name}>Hello World</${name}>)
    expect(screen.getByText('Hello World')).toBeInTheDocument()
  })
})`
}

function generateStoryCode(name: string): string {
  return `import type { Meta, StoryObj } from '@storybook/react'
import { ${name} } from './${name}'

const meta: Meta<typeof ${name}> = {
  title: 'Components/${name}',
  component: ${name},
  tags: ['autodocs'],
}

export default meta
type Story = StoryObj<typeof ${name}>

export const Default: Story = {
  args: {
    children: '${name} content',
  },
}`
}

function generateReadmeCode(name: string): string {
  return `# ${name}

## Usage

\`\`\`tsx
import { ${name} } from '@your-library/components'

function App() {
  return (
    <${name}>
      Content here
    </${name}>
  )
}
\`\`\`

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | ReactNode | - | The content |

## Examples

### Basic Usage

\`\`\`tsx
<${name}>Hello World</${name}>
\`\`\`
`
}

function generateIndexCode(name: string): string {
  return `export { ${name} } from './${name}'
export type { ${name}Props } from './${name}.types'`
}

async function updateBarrelExport(name: string) {
  const indexPath = path.join(process.cwd(), 'src', 'components', 'index.ts')

  try {
    let content = await fs.readFile(indexPath, 'utf-8')
    const exportLine = `export * from './${name}'\n`

    // Check if export already exists
    if (!content.includes(exportLine)) {
      // Add export in alphabetical order
      const exports = content.split('\n').filter(line => line.startsWith('export'))
      exports.push(exportLine.trim())
      exports.sort()

      content = exports.join('\n') + '\n'
      await fs.writeFile(indexPath, content)
    }
  } catch (error) {
    // If index doesn't exist, create it
    await fs.writeFile(indexPath, `export * from './${name}'\n`)
  }
}

// CLI Interface
async function main() {
  console.log(chalk.cyan.bold('\n📦 Component Generator\n'))

  const response = await prompts([
    {
      type: 'text',
      name: 'name',
      message: 'Component name (PascalCase):',
      validate: (value) =>
        /^[A-Z][a-zA-Z0-9]*$/.test(value) || 'Must be PascalCase (e.g., Button)',
    },
    {
      type: 'select',
      name: 'type',
      message: 'Component type:',
      choices: [
        { title: 'Basic', value: 'basic' },
        { title: 'Compound', value: 'compound' },
        { title: 'Polymorphic', value: 'polymorphic' },
      ],
    },
    {
      type: 'confirm',
      name: 'withTests',
      message: 'Generate tests?',
      initial: true,
    },
    {
      type: 'confirm',
      name: 'withStories',
      message: 'Generate Storybook story?',
      initial: true,
    },
    {
      type: 'confirm',
      name: 'withDocs',
      message: 'Generate README?',
      initial: true,
    },
  ])

  if (!response.name) {
    console.log(chalk.red('\n❌ Cancelled\n'))
    process.exit(0)
  }

  try {
    await generateComponent(response as ComponentOptions)
  } catch (error) {
    console.error(chalk.red('\n❌ Error generating component:'), error)
    process.exit(1)
  }
}

main()

Bulk Rename Script

#!/bin/bash
# scripts/bulk-rename.sh

# Bulk rename components
# Usage: ./scripts/bulk-rename.sh old-pattern new-pattern

set -e

OLD_PATTERN=$1
NEW_PATTERN=$2

if [ -z "$OLD_PATTERN" ] || [ -z "$NEW_PATTERN" ]; then
  echo "Usage: ./scripts/bulk-rename.sh old-pattern new-pattern"
  echo "Example: ./scripts/bulk-rename.sh UIButton Button"
  exit 1
fi

echo "🔄 Renaming $OLD_PATTERN → $NEW_PATTERN"
echo ""

# Find all files containing the old pattern
FILES=$(grep -rl "$OLD_PATTERN" src/)

if [ -z "$FILES" ]; then
  echo "❌ No files found containing '$OLD_PATTERN'"
  exit 0
fi

echo "Files to update:"
echo "$FILES"
echo ""

read -p "Continue? (y/n) " -n 1 -r
echo ""

if [[ ! $REPLY =~ ^[Yy]$ ]]; then
  echo "❌ Cancelled"
  exit 0
fi

# Replace in file contents
for file in $FILES; do
  sed -i "" "s/$OLD_PATTERN/$NEW_PATTERN/g" "$file"
  echo "✓ Updated $file"
done

# Rename files
find src/ -name "*$OLD_PATTERN*" | while read file; do
  new_file=$(echo "$file" | sed "s/$OLD_PATTERN/$NEW_PATTERN/g")
  mv "$file" "$new_file"
  echo "✓ Renamed $file → $new_file"
done

echo ""
echo "✨ Rename complete!"

Code Formatter Script

#!/usr/bin/env node
// scripts/format-all.ts
import { exec } from 'child_process'
import { promisify } from 'util'
import ora from 'ora'
import chalk from 'chalk'

const execAsync = promisify(exec)

interface FormatOptions {
  fix: boolean
  check: boolean
  staged: boolean
}

async function formatCode(options: FormatOptions) {
  const { fix, check, staged } = options

  console.log(chalk.cyan.bold('\n🎨 Code Formatter\n'))

  // Get files to format
  let files = 'src/**/*.{ts,tsx,js,jsx,css,scss,json,md}'

  if (staged) {
    const spinner = ora('Getting staged files...').start()
    try {
      const { stdout } = await execAsync('git diff --cached --name-only --diff-filter=ACMR')
      files = stdout
        .split('\n')
        .filter((f) => /\.(ts|tsx|js|jsx|css|scss|json|md)$/.test(f))
        .join(' ')

      if (!files) {
        spinner.succeed('No staged files to format')
        return
      }
      spinner.succeed(`Found ${files.split(' ').length} staged files`)
    } catch (error) {
      spinner.fail('Failed to get staged files')
      throw error
    }
  }

  // Run Prettier
  const prettierSpinner = ora('Running Prettier...').start()
  try {
    const prettierCmd = check
      ? `prettier --check ${files}`
      : `prettier --write ${files}`

    await execAsync(prettierCmd)
    prettierSpinner.succeed('Prettier complete')
  } catch (error) {
    prettierSpinner.fail('Prettier found issues')
    if (!fix) {
      console.log(chalk.yellow('\nRun with --fix to auto-fix issues'))
    }
    throw error
  }

  // Run ESLint
  const eslintSpinner = ora('Running ESLint...').start()
  try {
    const eslintCmd = fix
      ? `eslint ${files.replace(/\{.*\}/, '{ts,tsx,js,jsx}')} --fix`
      : `eslint ${files.replace(/\{.*\}/, '{ts,tsx,js,jsx}')}`

    await execAsync(eslintCmd)
    eslintSpinner.succeed('ESLint complete')
  } catch (error) {
    eslintSpinner.fail('ESLint found issues')
    if (!fix) {
      console.log(chalk.yellow('\nRun with --fix to auto-fix issues'))
    }
    throw error
  }

  console.log(chalk.green.bold('\n✨ Formatting complete!\n'))
}

// CLI
const args = process.argv.slice(2)
const options: FormatOptions = {
  fix: args.includes('--fix'),
  check: args.includes('--check'),
  staged: args.includes('--staged'),
}

formatCode(options).catch((error) => {
  console.error(chalk.red('\n❌ Formatting failed\n'))
  process.exit(1)
})

Migration Script

#!/usr/bin/env node
// scripts/migrate-to-tailwind.ts
import fs from 'fs/promises'
import path from 'path'
import { glob } from 'glob'
import chalk from 'chalk'

// CSS to Tailwind class mappings
const cssToTailwind: Record<string, string> = {
  'display: flex': 'flex',
  'flex-direction: column': 'flex-col',
  'justify-content: center': 'justify-center',
  'align-items: center': 'items-center',
  'padding: 1rem': 'p-4',
  'margin: 1rem': 'm-4',
  'background-color: #3b82f6': 'bg-blue-500',
  'color: white': 'text-white',
  'font-weight: bold': 'font-bold',
  'border-radius: 0.5rem': 'rounded-lg',
}

async function migrateToTailwind() {
  console.log(chalk.cyan.bold('\n🎨 Migrating to Tailwind CSS\n'))

  // Find all component files
  const files = await glob('src/components/**/*.tsx')

  let totalChanges = 0

  for (const file of files) {
    let content = await fs.readFile(file, 'utf-8')
    let changes = 0

    // Find style objects
    const styleRegex = /style=\{\{([^}]+)\}\}/g
    const matches = content.matchAll(styleRegex)

    for (const match of matches) {
      const styleContent = match[1]
      const classes: string[] = []

      // Convert each CSS property
      for (const [css, tailwind] of Object.entries(cssToTailwind)) {
        if (styleContent.includes(css)) {
          classes.push(tailwind)
          changes++
        }
      }

      if (classes.length > 0) {
        // Replace style with className
        const replacement = `className="${classes.join(' ')}"`
        content = content.replace(match[0], replacement)
      }
    }

    if (changes > 0) {
      await fs.writeFile(file, content)
      console.log(chalk.green(`✓ ${file} (${changes} changes)`))
      totalChanges += changes
    }
  }

  console.log(chalk.green.bold(`\n✨ Migration complete! (${totalChanges} total changes)\n`))
}

migrateToTailwind().catch((error) => {
  console.error(chalk.red('\n❌ Migration failed:'), error)
  process.exit(1)
})

Best Practices

Script Design

1. Single Responsibility: One script, one task
2. Idempotent: Safe to run multiple times
3. Dry Run: Preview changes before applying
4. Validation: Validate inputs and state
5. Error Handling: Graceful error messages

CLI UX

1. Clear Messages: What's happening and why
2. Progress Indicators: Show progress for long tasks
3. Confirmation Prompts: Ask before destructive actions
4. Colorized Output: Use colors meaningfully
5. Help Text: Always provide --help

Code Quality

1. TypeScript: Type-safe scripts
2. Error Recovery: Handle failures gracefully
3. Logging: Log important operations
4. Testing: Test scripts with various inputs
5. Documentation: Document usage and options

Performance

1. Parallel Operations: Run independent tasks concurrently
2. Caching: Cache expensive operations
3. Incremental: Process only changed files
4. Streaming: Stream large file operations
5. Debouncing: Avoid duplicate operations

When to Use This Skill

Activate this skill when you need to:

• Generate new components with boilerplate
• Create CLI tools for developers
• Automate repetitive tasks
• Migrate code between patterns
• Scaffold new projects
• Bulk update code across files
• Transform code automatically
• Set up automation workflows
• Build custom dev tools
• Optimize development workflow

Output Format

When creating automation scripts, provide:

1. Complete Script: Production-ready code
2. Installation Instructions: Dependencies and setup
3. Usage Guide: How to run the script
4. Options Reference: All available flags/options
5. Examples: Common use cases
6. Error Handling: How errors are reported

Always build scripts that save time, prevent errors, and improve developer experience.