livecodes: Skill for Claude Code

LiveCodes — Resolve Modules

LiveCodes automatically resolves bare module imports to CDN URLs using import maps. Use npm packages and other modules without npm install or build steps.

Setup

import { createPlayground } from 'livecodes';

// Bare imports work automatically
createPlayground('#container', {
  config: {
    script: {
      language: 'javascript',
      content: `
import { v4 } from 'uuid';           // npm module
import React from 'react';            // npm module
import { useState } from 'react';     // Named import
console.log(v4());
      `,
    },
  },
});

Core Patterns

Import npm packages

// Default: uses esm.sh CDN
import { v4 } from 'uuid';
import React from 'react';
import { useState, useEffect } from 'react';
import { format } from 'date-fns';

// Specifying version
import React from 'react@18'; // React 18.x
import React from '[email protected]'; // Exact version
import _ from '[email protected]'; // Lodash specific version

Use different CDN providers

// esm.sh (default)
import React from 'react';
import React from 'esm.sh:react';

// Skypack
import React from 'skypack:react';

// jsDelivr
import React from 'jsdelivr:react';

// unpkg
import React from 'unpkg:react';

// Deno bundle
import { uuid } from 'deno:uuid';

// Full URL imports work too
import React from 'https://esm.sh/react@18';

Import from Deno, GitHub, JSR

// Deno.land/x (TS files auto-bundled)
import { uuid } from 'https://deno.land/x/uuid/mod.ts';

// JSR (Deno's npm-compatible registry)
import { yassify } from 'jsr:@kwhinnery/yassify';

// GitHub files (auto-bundled)
import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts';

// Skip bundling with #nobundle
import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts#nobundle';

// pkg.pr.new (unpublished packages)
import { Bench } from 'pr:tinybench@a832a55';

Custom import maps