livecodes: Skill for Claude Code

LiveCodes — GitHub Action: Preview in LiveCodes

The Preview in LiveCodes GitHub Action generates preview links to LiveCodes playgrounds for code changes in pull requests and posts them as PR comments.

Use case: Library authors can preview changes in the playground before merging PRs.

How It Works

1. PR is created or updated
2. Action optionally installs dependencies and builds the project
3. Action scans .livecodes/ folder for playground configurations
4. Generates playground URLs with your new code
5. Posts comment with preview links to the PR

Setup

Two Required Workflow Files

The action requires two workflow files that must be merged to the default branch first.

1. Trigger workflow .github/workflows/livecodes-preview.yml:

name: livecodes

on: [pull_request]

jobs:
  build_and_prepare:
    runs-on: ubuntu-latest
    name: Generate Playgrounds
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Build and generate
        uses: live-codes/preview-in-livecodes@v1
        with:
          # Optional: install-command: "npm install"
          # Optional: build-command: "npm run build"
          # Optional: base-url: "https://{{LC::REF}}.my-project.pages.dev"

2. Comment workflow .github/workflows/livecodes-post-comment.yml:

name: comment

on:
  workflow_run:
    workflows: ['livecodes']
    types:
      - completed

jobs:
  upload:
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write
    if: >
      github.event.workflow_run.event == 'pull_request' &&
      github.event.workflow_run.conclusion == 'success'
    steps:
      - uses: live-codes/pr-comment-from-artifact@v1
        with:
          GITHUB_TOKEN: ${{ github.token }}

Two separate workflows are needed because each runs in a different security context. See GitHub security article for details.