add gh-action skill

Author: hatemhosny

skills/_artifacts/domain_map.yaml

@@ -572,6 +572,81 @@ skills:
         status: 'active'
         skills: ['self-hosting']
 
+  - name: 'Use GitHub Action'
+    slug: 'gh-action'
+    domain: 'integration'
+    description: 'Use the "Preview in LiveCodes" GitHub Action to generate preview playground links for pull request code changes'
+    type: 'composition'
+    covers:
+      - 'Workflow file setup (livecodes-preview.yml)'
+      - 'Comment workflow (livecodes-post-comment.yml)'
+      - 'Playground configuration JSON files'
+      - 'Dynamic values (LC::REF, LC::SHA, etc.)'
+      - 'File placeholders (TO_URL, TO_DATA_URL)'
+      - 'Deploy preview strategies'
+    tasks:
+      - 'Set up GitHub Action workflow'
+      - 'Configure playground JSON files'
+      - 'Use dynamic values in configurations'
+      - 'Link deployed assets to playgrounds'
+    failure_modes:
+      - mistake: 'Workflow files not on default branch'
+        mechanism: 'GitHub Actions workflow_run event requires workflow files to be on default branch before PRs can trigger them'
+        wrong_pattern: |
+          # Creating PR with workflow files in same PR
+          # Action won't run until merged to default branch
+        correct_pattern: |
+          # First merge workflow files to default branch
+          git checkout main
+          git merge feature/add-gh-action
+          git push
+          # Now PRs can trigger the action
+        source: 'GitHub Actions documentation on workflow_run event'
+        priority: 'HIGH'
+        status: 'active'
+        skills: ['gh-action']
+
+      - mistake: 'Missing permissions for PR comments'
+        mechanism: 'Comment workflow needs pull-requests: write permission to post comments'
+        wrong_pattern: |
+          jobs:
+            upload:
+              runs-on: ubuntu-latest
+              # Missing permissions!
+        correct_pattern: |
+          jobs:
+            upload:
+              runs-on: ubuntu-latest
+              permissions:
+                pull-requests: write  # Required!
+        source: 'GitHub Actions permissions'
+        priority: 'MEDIUM'
+        status: 'active'
+        skills: ['gh-action']
+
+      - mistake: 'Using data URLs for large files'
+        mechanism: 'Data URLs stored at dpaste.com have 1M character limit; large builds will fail'
+        wrong_pattern: |
+          {
+            "imports": {
+              "my-lib": "{{LC::TO_DATA_URL(./dist/bundle.js)}}"  // Too large!
+            }
+          }
+        correct_pattern: |
+          # Use base-url and TO_URL for large files
+          # In workflow:
+          base-url: "https://{{LC::REF}}.my-project.pages.dev"
+          # In project JSON:
+          {
+            "imports": {
+              "my-lib": "{{LC::TO_URL(./dist/bundle.js)}}"
+            }
+          }
+        source: 'Action: dpaste.com limits'
+        priority: 'MEDIUM'
+        status: 'active'
+        skills: ['gh-action']
+
   - name: 'Import and Export Code'
     slug: 'import-export'
     domain: 'configuration'

skills/_artifacts/skill_spec.md

@@ -27,6 +27,7 @@ LiveCodes is a feature-rich, open-source, client-side code playground that runs
 | testing              | core        | languages     | Jest, Testing Library, watch mode, running tests programmatically            | 0             |
 | markdown-integration | composition | integration   | remark-livecodes, markdown-it-livecodes, Docusaurus, Astro, VitePress        | 0             |
 | self-hosting         | composition | integration   | Deploying to static servers, Docker, BASE_URL, SDK appUrl config             | 1             |
+| gh-action            | composition | integration   | Preview in LiveCodes GitHub Action, PR comments, workflow setup              | 3             |
 | import-export        | core        | configuration | GitHub/GitLab imports, URL imports, DOM imports, export formats              | 0             |
 | getting-started      | lifecycle   | -             | Quick start for standalone, embedding, and self-hosting                      | 0             |
 
@@ -99,6 +100,14 @@ LiveCodes is a feature-rich, open-source, client-side code playground that runs
 | --- | ------------------------------------------------- | -------- | ---------------------------------------- | ------------ |
 | 1   | Not configuring BASE_URL for subdirectory hosting | MEDIUM   | Documentation: features/self-hosting.mdx | self-hosting |
 
+### gh-action (3 failure modes)
+
+| #   | Mistake                              | Priority | Source                             | Cross-skill |
+| --- | ------------------------------------ | -------- | ---------------------------------- | ----------- |
+| 1   | Workflow files not on default branch | HIGH     | GitHub Actions: workflow_run event | gh-action   |
+| 2   | Missing permissions for PR comments  | MEDIUM   | GitHub Actions: permissions        | gh-action   |
+| 3   | Using data URLs for large files      | MEDIUM   | Action: dpaste.com limits          | gh-action   |
+
 ## Tensions
 
 | Tension                                            | Skills                              | Agent implication                                                                               |

skills/_artifacts/skill_tree.yaml

@@ -225,3 +225,16 @@ skills:
       - 'sdk-embedding'
     sources:
       - 'live-codes/livecodes:docs/docs/features/self-hosting.mdx'
+
+  - name: 'Use GitHub Action'
+    slug: 'gh-action'
+    type: 'composition'
+    domain: 'integration'
+    path: 'skills/gh-action/SKILL.md'
+    description: >
+      Use the "Preview in LiveCodes" GitHub Action to generate preview playground links
+      for pull request code changes. Automates playground creation and PR comments.
+    requires: []
+    sources:
+      - 'live-codes/preview-in-livecodes:README.md'
+      - 'live-codes/livecodes:docs/docs/gh-action.mdx'

skills/livecodes/SKILL.md

@@ -34,6 +34,7 @@ LiveCodes is a feature-rich, open-source, client-side code playground that runs
 | Use with React, Vue, Svelte, Solid, Preact       | [livecodes/framework-wrappers/SKILL.md](./framework-wrappers/SKILL.md)     |
 | Integrate with docs sites (Docusaurus, Astro)    | [livecodes/markdown-integration/SKILL.md](./markdown-integration/SKILL.md) |
 | Self-host on your own server                     | [livecodes/self-hosting/SKILL.md](./self-hosting/SKILL.md)                 |
+| Preview PRs in LiveCodes (GitHub Action)         | [livecodes/gh-action/SKILL.md](./gh-action/SKILL.md)                       |
 
 ## Quick Decision Tree
 
@@ -76,6 +77,9 @@ Need to add playgrounds to markdown docs?
 
 Need to host LiveCodes on your own server?
   → livecodes/self-hosting
+
+Need to preview PR changes in playgrounds?
+  → livecodes/gh-action
 ```
 
 ## Minimal Working Example