Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

teachingai/parcel

Name: parcel
Author: teachingai

skills/build-skills/parcel/SKILL.md

npx skillsauth add teachingai/full-stack-skills parcel

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

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

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.

349 stars

tools

Updated May 2, 2026

$ install --global

skillsauth

npx skillsauth add teachingai/full-stack-skills parcel

Install 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.

Scanners Passed

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 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

Related Skills

teachingai/agent-browser

tools

VerifiedTrustedCommunity

Automates browser interactions via CLI using agent-browser by Vercel Labs. Covers navigation, clicking, form filling, snapshots, refs-based selectors, agent mode with JSON output, session management, and CDP integration. Use when the user needs to automate web browsing, scrape pages, fill forms, or integrate browser automation into AI agent workflows.

379SKILL.mdUpdated May 12, 2026

teachingai/agent-browser

teachingai/canvas-design

testing

VerifiedTrustedCommunity

Creates museum-quality visual art as .png or .pdf by first generating a design philosophy manifesto, then expressing it on canvas with precise composition, color palettes, and typography. Use when the user asks to create a poster, art piece, visual design, or static creative piece. Outputs original designs using design-forward principles.

379SKILL.mdUpdated May 12, 2026

teachingai/canvas-design

teachingai/brand-guidelines

development

VerifiedTrustedCommunity

Applies Anthropic brand colors (dark #141413, orange #d97757, blue #6a9bcc, green #788c5d), Poppins headings, and Lora body text to artifacts such as presentations, documents, or visuals. Use when the user needs Anthropic brand styling, brand color application, corporate typography, or visual formatting following Anthropic design standards.

379SKILL.mdUpdated May 12, 2026

teachingai/brand-guidelines

teachingai/algorithmic-art

development

VerifiedTrustedCommunity

Creates gallery-quality algorithmic art using p5.js with seeded randomness, interactive parameter controls, and seed navigation, outputting a single self-contained HTML artifact with Anthropic branding. Use when the user requests generative art, algorithmic art, flow fields, particle systems, or code-based visual art using p5.js.

379SKILL.mdUpdated May 12, 2026

teachingai/algorithmic-art

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/teachingai/full-stack-skills.git

# Copy into Claude Code skills folder (global)
cp -r full-stack-skills/skills/build-skills/parcel ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

teachingai/full-stack-skills

349 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT