livecodes: Skill for Claude Code

LiveCodes — Work with Languages

LiveCodes supports 90+ languages across three editors: markup (HTML/templating), style (CSS/preprocessors), and script (JS/compiled languages).

Setup

import { createPlayground } from 'livecodes';

// Basic language setup
createPlayground('#container', {
  config: {
    markup: { language: 'markdown', content: '# Hello' },
    style: { language: 'scss', content: '$color: blue; body { color: $color; }' },
    script: { language: 'typescript', content: 'const x: number = 1;' },
  },
});

// WASM language (Python)
createPlayground('#container', {
  config: {
    script: { language: 'python-wasm', content: 'print("Hello from Python")' },
  },
});

// Framework template
createPlayground('#container', { template: 'react' });

Core Patterns

Set language for each editor

// Markup languages
markup: { language: 'html', content: '...' }        // HTML
markup: { language: 'markdown', content: '...' }    // Markdown
markup: { language: 'mdx', content: '...' }         // MDX
markup: { language: 'pug', content: '...' }         // Pug
markup: { language: 'handlebars', content: '...' }   // Handlebars

// Style languages
style: { language: 'css', content: '...' }          // CSS
style: { language: 'scss', content: '...' }         // SCSS/Sass
style: { language: 'less', content: '...' }        // Less
style: { language: 'stylus', content: '...' }       // Stylus

// Script languages
script: { language: 'javascript', content: '...' } // JavaScript
script: { language: 'typescript', content: '...' }  // TypeScript
script: { language: 'jsx', content: '...' }         // JSX
script: { language: 'tsx', content: '...' }         // TSX

Use CSS processors

const config = {
  style: { language: 'css', content: '...' },
  processors: [
    'tailwindcss', // Tailwind CSS
    'autoprefixer', // Add vendor prefixes
    'postcssPresetEnv', // Use future CSS
    'cssmodules', // CSS Modules
    'cssnano', // Minify
  ],
};

// Processors run in order listed
// Tailwind should come before PostCSS tools