Full-stack-skills parcel

Provides comprehensive guidance for Parcel bundler including zero-configuration setup, asset handling, hot module replacement, code splitting, and production builds. Use when the user asks about Parcel, needs a zero-config build tool, or wants to bundle web applications quickly.

install

source · Clone the upstream repo

git clone https://github.com/partme-ai/full-stack-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/partme-ai/full-stack-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/build-skills/parcel" ~/.claude/skills/partme-ai-full-stack-skills-parcel && rm -rf "$T"

manifest: skills/build-skills/parcel/SKILL.md

When to use this skill

Use this skill whenever the user wants to:

Set up a zero-configuration bundler for web applications
Bundle JavaScript, CSS, HTML, images, and other assets automatically
Use hot module replacement (HMR) for fast development
Configure multi-entry builds, environment variables, and production output
Migrate from or compare with Webpack/Vite

How to use this skill

Workflow

Install — add Parcel as a dev dependency
Point to entry — specify HTML or JS entry file
Develop — run
```
parcel
```
for dev server with HMR
Build — run
```
parcel build
```
for optimized production output
Validate — check output size and asset hashing

Quick Start Example

# Install
npm install --save-dev parcel

# Development server with HMR
npx parcel src/index.html

# Production build
npx parcel build src/index.html --dist-dir dist

// package.json
{
  "source": "src/index.html",
  "scripts": {
    "dev": "parcel",
    "build": "parcel build"
  }
}

<!-- src/index.html — Parcel resolves dependencies automatically -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./index.js"></script>
</body>
</html>

Multi-Entry and Environment Variables

# Multiple entry points
npx parcel src/index.html src/admin.html

# Environment variables (available as process.env.API_URL)
API_URL=https://api.example.com npx parcel src/index.html

Custom Configuration

// .parcelrc — override default plugins when needed
{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.svg": ["@parcel/transformer-svg-react"]
  }
}

Best Practices

Keep entry files and asset structure clear; Parcel auto-resolves dependencies
Use
```
parcel build
```
with content hashing (default) for production caching
Configure targets in
```
package.json
```
for library builds vs. app builds
For large projects, evaluate performance against Vite or Webpack
Use
```
.env
```
files for environment-specific configuration

Reference

Official documentation: https://parceljs.org/

Keywords

parcel, bundler, zero-config, HMR, hot module replacement, code splitting, web bundling