role-frontend:build-tooling

Configure frontend builds with Vite, webpack 5, esbuild, and SWC, including monorepo management with Turborepo or Nx and linting via ESLint, Prettier, and Biome.

14|3|Updated Feb 22, 2026
One-click install
npx skills add https://github.com/rnavarych/alpha-engineer --skill role-frontend-build-tooling
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: role-frontend:build-tooling
Source: https://github.com/rnavarych/alpha-engineer/tree/main/plugins/roles/role-frontend/skills/build-tooling
Command: npx skills add https://github.com/rnavarych/alpha-engineer --skill role-frontend-build-tooling

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the complexity of setting up and optimizing modern frontend build pipelines, including choosing the right tools, configuring them for performance, and managing monorepos.

Core Features & Use Cases

  • Build Tool Configuration: Expertise in Vite, webpack 5, esbuild, and SWC for optimal build performance.
  • Monorepo Management: Guidance on using Turborepo or Nx with pnpm for efficient monorepo development.
  • Linting & Formatting: Setup and configuration for ESLint, Prettier, and Biome.
  • Use Case: You need to set up a new React project using Vite, configure ESLint with TypeScript support, and set up a monorepo structure using Turborepo and pnpm.

Quick Start

Configure Vite for a new React project with TypeScript and SWC.

Frequently Asked Questions about role-frontend:build-tooling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a Vite project with TypeScript and SWC for faster transpilation?

To set up Vite with TypeScript and SWC, configure the build pipeline to use SWC for transpilation, replacing default Babel setups to achieve optimal build performance in frontend React projects.

What is the best way to manage a monorepo using Turborepo and pnpm?

The best way to manage a monorepo with Turborepo and pnpm is to configure pnpm workspaces for package management and use Turborepo for efficient task caching and execution across the monorepo structure.

Does webpack 5 support module federation for microfrontends?

Yes, webpack 5 supports module federation, a build tooling mechanism that allows loading separate microfrontend builds at runtime to create efficient and scalable frontend architectures.

How do I configure ESLint and Prettier for a TypeScript monorepo?

To configure ESLint and Prettier for a TypeScript monorepo, set up shared linting and formatting configurations at the root level and apply them across packages using TypeScript project references.

Can I use Biome instead of ESLint and Prettier for frontend build tooling?

Yes, you can use Biome for linting and formatting as a unified alternative to ESLint and Prettier, streamlining your frontend build tooling configuration while maintaining code quality standards.

Why should I use esbuild or SWC over webpack 5 for frontend bundling?

You should use esbuild or SWC over webpack 5 for frontend bundling when prioritizing optimal build performance, as they offer significantly faster transpilation speeds compared to traditional webpack 5 configurations.