skills.rest
live-codes
live-codesOFFICIAL
Explore all skills by this author →
Website𝕏@livecodes_ioGitHub

livecodes/module-resolution

Resolve bare module imports to CDN URLs via import maps.

1.5k|262|Updated Jan 10, 2021
Search Tags:#frontend#javascript#cdn#module-resolution#import-map#bare-imports
One-click install
npx skills add https://github.com/live-codes/livecodes --skill livecodes-module-resolution
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: livecodes/module-resolution
Source: https://github.com/live-codes/livecodes/tree/main/.agents/skills/livecodes/module-resolution
Command: npx skills add https://github.com/live-codes/livecodes --skill livecodes-module-resolution

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Eliminates manual setup for loading JavaScript modules by automatically resolving bare imports to CDN URLs via import maps, enabling instant prototyping without package installations.

Core Features & Use Cases

  • Resolve npm and other module specifiers through configurable CDN providers.
  • Create and customize import maps to control module URLs.
  • Use with Deno, GitHub, and inline URLs without bundling or build steps.
  • Use Case: Rapid prototyping of web apps and teaching CDN-based module loading.

Quick Start

Create a playground and import a package like React from a CDN without npm install.

Frequently Asked Questions about livecodes/module-resolution

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use bare imports in JavaScript without running npm install?▼

You can resolve bare imports without npm install by mapping module specifiers directly to CDN URLs using import maps. This eliminates manual setup and enables instant frontend prototyping directly in the browser.

What is CDN-based module resolution for bare imports?▼

CDN-based module resolution automatically maps bare module specifiers like React to their corresponding CDN URLs. It uses import maps to control these URLs, allowing seamless JavaScript module loading without local package installations.

Can I resolve bare imports from Deno, GitHub, and URL sources?▼

Yes, bare import resolution supports Deno, GitHub, and direct URL-based sources alongside standard npm packages. You can configure multiple CDN providers and use custom import maps to control how these diverse sources are loaded.

How do I create a custom import map to control CDN URLs?▼

You create a custom import map by defining specific module specifiers and their desired CDN URLs. This allows you to override default provider prefixes and precisely control which CDN serves your JavaScript modules during prototyping.

Does CDN module resolution require a build step or bundler?▼

No, CDN module resolution via import maps requires no bundling or build steps. It allows you to use npm-like imports directly in the browser by fetching modules from configured CDN providers instantly.

When should I use CDN import maps instead of local package installation?▼

Use CDN import maps for rapid prototyping of web apps or teaching CDN-based module loading. It is ideal for projects that require npm-like imports without the overhead of local package installation or complex build tooling.

Related Skills

Explore More Software Engineering Skills→
Kabilan108Kabilan108
2

playground

Create interactive single-file HTML playgrounds with inline CSS and JavaScript.

Community
Basic
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced
WhatIfWeDigDeeperWhatIfWeDigDeeper
1

fix-build

Diagnoses and fixes build, TypeScript, and compilation errors in software projects, verifying with build and test commands.

Community
Intermediate
e-burgose-burgos
2

link-workspace-packages

Link workspace dependencies across pnpm, yarn, npm, and bun in a monorepo.

Community
Intermediate