parcel | partme-ai-full-stack-skills | ClaudePluginHub

Skill

parcel

From partme-ai-full-stack-skills

Guides Parcel bundler usage for zero-config web app bundling, HMR, code splitting, asset handling, and production builds with multi-entry and env vars.

Install

$

npx claudepluginhub partme-ai/full-stack-skills --plugin t2ui-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Use this skill whenever the user wants to:

Supporting Assets

SKILL.md

Similar Skills

using-git-worktrees

Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.

168.3k

subagent-driven-development

3 files

Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.

168.3k

dispatching-parallel-agents

Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.

168.3k

Stats

Stars328

Forks62

Last CommitMar 25, 2026

Actions

View Source View Plugin View on GitHub View README

Tags

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