# Frontend Delivery Build Tools

> Standardized guidelines and patterns for Frontend Delivery Build Tools.

- Skill: `valec3/frontend-delivery-build-tools` (Agent Skill)
- Install (CLI): `npx skillmds@latest add valec3/frontend-delivery-build-tools`
- Raw SKILL.md: https://api.skillmd.com/api/skills/valec3/frontend-delivery-build-tools/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: valec3 (https://skillmd.com/u/valec3)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/valec3/frontend-delivery-build-tools

---


# Frontend Delivery Build Tools

## When to use this skill
- Configuring build process
- Optimizing bundle size
- Setting up Vite/Webpack

## Workflow
- [ ] Choose build tool (Vite recommended)
- [ ] Configure for production
- [ ] Optimize bundle size
- [ ] Enable code splitting
- [ ] Analyze bundle

## Instructions

### Vite Config
```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog']
        }
      }
    }
  }
});
```

### Bundle Analysis
```bash
npm install -D rollup-plugin-visualizer
```

## Resources
- Use Vite for modern apps
- Code split by route
- Analyze bundle regularly