teachingai/parcel
skills/build-skills/parcel/SKILL.md
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 --global
skillsauthnpx skillsauth add teachingai/agent-skills parcelInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 10, 2026, 8:43 AM4.8s2 files scanned
SKILL.md
- name:
- parcel
- description:
- 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.
- license:
- Complete terms in LICENSE.txt
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
Related Skills
teachingai/nextjs
development
VerifiedTrustedCommunity
Guidance for Next.js using the official docs at nextjs.org/docs. Use when the user needs Next.js concepts, configuration, routing, data fetching, or API reference details.
284SKILL.mdUpdated Apr 14, 2026
teachingai/flask
tools
VerifiedTrustedCommunity
Provides comprehensive guidance for Flask framework including routing, templates, forms, database integration, extensions, and deployment. Use when the user asks about Flask, needs to create web applications, implement routes, or build Python web services.
284SKILL.mdUpdated Apr 14, 2026
teachingai/fastapi
development
VerifiedTrustedCommunity
Provides comprehensive guidance for FastAPI framework including routing, request validation, dependency injection, async operations, OpenAPI documentation, and database integration. Use when the user asks about FastAPI, needs to create REST APIs, or build high-performance Python web services.
284SKILL.mdUpdated Apr 14, 2026
teachingai/django
development
VerifiedTrustedCommunity
Provides comprehensive guidance for Django framework including models, views, templates, forms, admin, REST framework, and deployment. Use when the user asks about Django, needs to create web applications, implement models and views, or build Django REST APIs.
284SKILL.mdUpdated Apr 14, 2026