multiAI Summary Pending
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.
223 stars
Installation
Claude Code / Cursor / Codex
$curl -o ~/.claude/skills/parcel/SKILL.md --create-dirs "https://raw.githubusercontent.com/partme-ai/full-stack-skills/main/skills/build-skills/parcel/SKILL.md"
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/parcel/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How parcel Compares
| Feature / Agent | parcel | Standard Approach |
|---|---|---|
| Platform Support | multi | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Which AI agents support this skill?
This skill is compatible with multi.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
## 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
1. **Install** — add Parcel as a dev dependency
2. **Point to entry** — specify HTML or JS entry file
3. **Develop** — run `parcel` for dev server with HMR
4. **Build** — run `parcel build` for optimized production output
5. **Validate** — check output size and asset hashing
### Quick Start Example
```bash
# 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
```
```json
// package.json
{
"source": "src/index.html",
"scripts": {
"dev": "parcel",
"build": "parcel build"
}
}
```
```html
<!-- 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
```bash
# 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
```json
// .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