ReddRadar
Agent skill
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 this agent skill to your Project
npx add-skill https://github.com/partme-ai/full-stack-skills/tree/main/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
parcelfor dev server with HMR - Build — run
parcel buildfor 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 buildwith content hashing (default) for production caching - Configure targets in
package.jsonfor library builds vs. app builds - For large projects, evaluate performance against Vite or Webpack
- Use
.envfiles for environment-specific configuration
Reference
- Official documentation: https://parceljs.org/
Keywords
parcel, bundler, zero-config, HMR, hot module replacement, code splitting, web bundling
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
partme-ai/full-stack-skills
ocrmypdf-batch
OCRmyPDF batch processing skill — process multiple PDFs, Docker automation, shell scripting, and CI/CD integration. Use when the user needs to OCR many PDFs, set up automated OCR pipelines, or integrate OCR into workflows.
partme-ai/full-stack-skills
ocrmypdf-optimize
OCRmyPDF optimization skill — compress PDFs, configure PDF/A output, JBIG2 encoding, and lossless optimization. Use when the user needs to reduce PDF file size, create archival PDF/A files, or optimize OCR output.
partme-ai/full-stack-skills
ocrmypdf-image
OCRmyPDF image processing skill — deskew, rotate, clean, despeckle, remove border from scanned documents. Use when the user needs to improve scanned PDF quality, fix skewed pages, remove noise, or clean up scanned documents before OCR.
partme-ai/full-stack-skills
ocrmypdf-api
OCRmyPDF Python API and plugin skill — use OCRmyPDF programmatically from Python, integrate with applications, and extend with plugins (EasyOCR, PaddleOCR, AppleOCR). Use when the user needs to call OCRmyPDF from Python code, build OCR pipelines, or use alternative OCR engines.
partme-ai/full-stack-skills
ocrmypdf
OCRmyPDF core skill — add searchable OCR text layer to scanned PDFs, convert images to searchable PDFs, support 100+ languages via Tesseract. Use when the user needs to OCR a PDF, make a scanned PDF searchable, or extract text from scanned documents.
partme-ai/full-stack-skills
svelte
Guides Svelte and SvelteKit development including reactive components, stores, transitions, lifecycle hooks, SSR, file-based routing, and deployment. Use when the user needs to build Svelte components, create SvelteKit applications, implement reactivity patterns, or configure Svelte with Vite.
Didn't find tool you were looking for?