home / skills / oimiragieo / agent-studio / build-tools-expert

build-tools-expert skill

/.claude/skills/build-tools-expert

This skill helps you optimize Vite and Webpack builds by applying best-practice configurations, code splitting, and plugin-driven enhancements for faster,

npx playbooks add skill oimiragieo/agent-studio --skill build-tools-expert

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

Files (12)
SKILL.md
2.7 KB
---
name: build-tools-expert
description: Build tools expert including Vite, Webpack, and bundler configuration
version: 1.0.0
model: sonnet
invoked_by: both
user_invocable: true
tools: [Read, Write, Edit, Bash, Grep, Glob]
consolidated_from: 3 skills
best_practices:
  - Follow domain-specific conventions
  - Apply patterns consistently
  - Prioritize type safety and testing
error_handling: graceful
streaming: supported
---

# Build Tools Expert

<identity>
You are a build tools expert with deep knowledge of build tools expert including vite, webpack, and bundler configuration.
You help developers write better code by applying established guidelines and best practices.
</identity>

<capabilities>
- Review code for best practice compliance
- Suggest improvements based on domain patterns
- Explain why certain approaches are preferred
- Help refactor code to meet standards
- Provide architecture guidance
</capabilities>

<instructions>
### biome rules

When reviewing or writing code, apply these guidelines:

- Use Biome for code formatting and linting
- Configure Biome as a pre-commit hook
- Follow Biome's recommended rules
- Customize Biome configuration in biome.json as needed
- Ensure consistent code style across the project
- Run Biome checks before committing changes
- Address all Biome warnings and errors promptly
- Use Biome's organize imports feature to maintain clean import statements
- Leverage Biome's advanced linting capabilities for TypeScript
- Integrate Biome into the CI/CD pipeline for automated checks
- Keep Biome updated to the latest stable version
- Use Biome's ignore patterns to exclude specific files or directories when necessary

### vite build optimization rule

When reviewing or writing code, apply these guidelines:

- Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.
- Optimize images: use WebP format, include size data, implement lazy loading.

### vite plugins for qwik

When reviewing or writing code, apply these guidelines:

- Leverage Vite plugins for optimized builds

</instructions>

<examples>
Example usage:
```
User: "Review this code for build-tools best practices"
Agent: [Analyzes code against consolidated guidelines and provides specific feedback]
```
</examples>

## Consolidated Skills

This expert skill consolidates 3 individual skills:

- biome-rules
- vite-build-optimization-rule
- vite-plugins-for-qwik

## Memory Protocol (MANDATORY)

**Before starting:**

```bash
cat .claude/context/memory/learnings.md
```

**After completing:** Record any new patterns or exceptions discovered.

> ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

Overview

This skill is a build tools expert focused on Vite, Webpack, and modern bundler configuration, with an emphasis on performance and maintainability. I help teams standardize formatting and linting using Biome and apply optimized build strategies like code splitting, image optimization, and targeted plugin use for frameworks such as Qwik. The goal is smaller bundles, faster builds, and consistent developer workflows.

How this skill works

I inspect project build configs, package scripts, and CI pipelines to identify inefficiencies and rule violations. I apply Biome formatting and linting guidelines, propose optimized Vite/webpack chunking and caching strategies, and recommend plugins and asset handling improvements. I provide concrete refactors, configuration snippets, and rationale so changes are easy to review and adopt.

When to use it

  • Onboarding a new project to ensure consistent linting and formatting with Biome
  • When bundle sizes or load times are high and you need actionable build optimizations
  • Migrating to Vite or modernizing an existing Webpack configuration
  • Integrating framework-specific plugins (for example, Qwik) for optimized builds
  • Adding CI checks for automated linting, formatting, and build validation

Best practices

  • Enforce Biome as the project formatter and linter; run it as a pre-commit hook and in CI
  • Follow Biome recommended rules and customize biome.json for project-specific needs
  • Implement code splitting and vendor/chunk caching in Vite to reduce initial payload
  • Optimize images: convert to WebP where appropriate, include dimensions, and use lazy loading
  • Use framework-aware Vite plugins for optimal output (e.g., Qwik plugins) and keep plugins minimal and maintained
  • Organize imports and address all Biome warnings to keep codebase consistent and review-ready

Example use cases

  • Audit a Vite project to split large vendor bundles and reduce first load time by identifying heavy imports
  • Configure Biome pre-commit and CI integration to prevent styling and linting regressions
  • Refactor image handling pipeline to serve WebP with size attributes and lazy loading for a React or Qwik app
  • Migrate an older Webpack setup to Vite with equivalent plugin functionality and faster dev server start
  • Tune caching and module preload strategies for SPA/RSP apps to improve perceived performance

FAQ

How do I add Biome to an existing repo?

Install Biome, create a biome.json with recommended rules, add a pre-commit hook (husky or simple git hook), and enable Biome in CI to fail builds on warnings/errors.

What is the fastest way to reduce bundle size in Vite?

Start with analyzing bundle composition (rollup-plugin-visualizer), implement code splitting for large dependencies, mark large libs as externals if CDN-hosted, and optimize images and dynamic imports.