ワンクリックでManusで任意のスキルを実行

cgpt-interactive-html-export-hardening

スター6

フォーク0

更新日2026年6月17日 10:41

Harden self-contained editable HTML artifacts so export/import, localStorage, controls, and re-opened HTML round trips preserve user edits without JavaScript parse failures.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

pvsundar

pvsundar/CGPT-CODEX-SKILLS

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

CGPT Interactive HTML Export Hardening

Use this skill before building or repairing any single-file HTML artifact that lets the user edit in-browser and export JSON or a re-openable HTML file. Typical targets are dashboards, trackers, forms, configurators, and teaching tools.

Core Rules

Treat JSON as canonical state and HTML as the interface. Provide both Export JSON and Import JSON.
Never put a raw newline inside a single-quoted or double-quoted JavaScript string. Use \n or template literals.
Call applyStateToDOMForExport() before cloneNode() or outerHTML.
Mirror runtime properties into attributes before serialization:
- checkboxes: set/remove checked
- selects: set selected on the chosen option only
- ranges: set value and update adjacent output text
- text inputs/textareas: set value, and set textarea text content
- contenteditable nodes: write innerText back to textContent
Wrap export and download functions in try/catch; log with console.error and alert the user on failure.
Validate controlled dropdown values on load. If a stored value is not in the option set, map it through a legacy-value table, log a warning, and show a visible badge.
Autosave on input and change with a short debounce. Reset local edits by clearing the artifact-specific localStorage key only.
Clearing localStorage must not erase state already preserved in exported HTML.

Required Pattern

function applyStateToDOMForExport(){
  document.querySelectorAll('[data-field], [data-task]').forEach(el => {
    if (el.type === 'checkbox') {
      if (el.checked) el.setAttribute('checked', 'checked');
      else el.removeAttribute('checked');
    } else if (el.tagName === 'SELECT') {
      el.querySelectorAll('option').forEach(opt => {
        if (opt.value === el.value) opt.setAttribute('selected', 'selected');
        else opt.removeAttribute('selected');
      });
    } else if (el.type === 'range') {
      el.setAttribute('value', el.value);
      const out = el.parentElement && el.parentElement.querySelector('output');
      if (out) out.textContent = el.value + '%';
    } else if (el.isContentEditable) {
      el.textContent = el.innerText;
    } else if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
      el.setAttribute('value', el.value);
      if (el.tagName === 'TEXTAREA') el.textContent = el.value;
    }
  });
}

function exportHTML(){
  try {
    saveState();
    applyStateToDOMForExport();
    const clone = document.documentElement.cloneNode(true);
    const html = '<!doctype html>\n' + clone.outerHTML;
    download('artifact_EDITED.html', html, 'text/html;charset=utf-8');
  } catch (err) {
    console.error('Export HTML failed:', err);
    alert('Export edited HTML failed. Open DevTools Console for details.');
  }
}

function exportJSON(){
  try {
    const json = JSON.stringify(collect(), null, 2);
    download('artifact_STATE.json', json, 'application/json;charset=utf-8');
  } catch (err) {
    console.error('Export JSON failed:', err);
    alert('Export JSON failed. Open DevTools Console for details.');
  }
}

function download(name, content, type){
  try {
    const blob = new Blob([content], { type: type || 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = name;
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }, 1000);
  } catch (err) {
    console.error('Download failed:', err);
    alert('Download failed. Open DevTools Console for details.');
  }
}

Validation

Before reporting done:

Extract the inline script block and run node --check.
Open the HTML from file:/// when practical and check the console.
Change a checkbox, select, range, and editable text field; export HTML; reopen in a fresh browser context; confirm all four changes persist.
Export JSON, edit one field, import it, and verify the UI updates.
Clear localStorage and reopen the exported HTML; preserved exported state should remain visible.
Test an invalid dropdown value; the page should warn, map, and badge the affected card or control.

このリポジトリの他の Skills

同じリポジトリ

cgpt-jm-jmr-docx

pvsundar/CGPT-CODEX-SKILLS

Convert, format, post-process, and verify Word DOCX manuscripts for Journal of Marketing, Journal of Marketing Research, APA-style management/marketing submissions, and PVB academic manuscript style. Use when the user asks to convert a Word docx into JM or JMR style, format a manuscript for submission, fix APA-style tables or references, run the PVB DOCX formatter, clean a Quarto/Pandoc-rendered DOCX, style bibliography entries, or prepare a submission-ready Word file.

2026-07-156

cgpt-canvas-flipcards

pvsundar/CGPT-CODEX-SKILLS

Create self-contained HTML study flipcards and Canvas LMS embed instructions for teaching modules. Use when the user asks for flip cards, study cards, interactive HTML review tools, Canvas iframe embeds, or troubleshooting Canvas pages that strip JavaScript.

2026-06-176

cgpt-onedrive-git-safety

pvsundar/CGPT-CODEX-SKILLS

Work safely with Git repositories stored under OneDrive, Google Drive, Dropbox, iCloud Drive, or other synced Windows folders. Use before git status/add/commit/diff/reset/checkout in synced repos, when handling dirty worktrees, no-touch sibling repos, line-ending phantoms, stuck index.lock files, or closeout claims about tests/builds on synced filesystems.

2026-06-176

cgpt-portfolio-dashboard-interactive

pvsundar/CGPT-CODEX-SKILLS

Build and maintain the editable PVB research portfolio dashboard with v4 operating-state taxonomy, JSON-canonical state, hardened export/import, autosave, and validation.

2026-06-176

cgpt-quarto-render-windows

pvsundar/CGPT-CODEX-SKILLS

Diagnose and harden Quarto render automation on Windows, especially from spawned PowerShell, Codex, Desktop Commander, scheduled tasks, Cowork handoffs, or CI. Use when quarto render fails because cmd/quarto/R is not on PATH, PATHEXT is stripped, artifacts are stale despite exit code 0, output paths are wrong, rBinaryPath/checkRBinary/cmd.exe spawn errors appear, or when creating reusable Windows render scripts for `.qmd` projects.

2026-06-176

cgpt-adversarial-reviewer

pvsundar/CGPT-CODEX-SKILLS

Produce report-only adversarial academic manuscript reviews modeled on a skeptical Reviewer 2. Use for pre-submission stress tests, hostile-but-constructive referee simulation, empirical research audits, contribution/methodology/framing critiques, or quick devil's-advocate challenges before revision.

2026-05-146

name	cgpt-interactive-html-export-hardening
description	Harden self-contained editable HTML artifacts so export/import, localStorage, controls, and re-opened HTML round trips preserve user edits without JavaScript parse failures.

CGPT Interactive HTML Export Hardening

Core Rules

Treat JSON as canonical state and HTML as the interface. Provide both Export JSON and Import JSON.
Never put a raw newline inside a single-quoted or double-quoted JavaScript string. Use \n or template literals.
Call applyStateToDOMForExport() before cloneNode() or outerHTML.
Mirror runtime properties into attributes before serialization:
- checkboxes: set/remove checked
- selects: set selected on the chosen option only
- ranges: set value and update adjacent output text
- text inputs/textareas: set value, and set textarea text content
- contenteditable nodes: write innerText back to textContent
Wrap export and download functions in try/catch; log with console.error and alert the user on failure.
Validate controlled dropdown values on load. If a stored value is not in the option set, map it through a legacy-value table, log a warning, and show a visible badge.
Autosave on input and change with a short debounce. Reset local edits by clearing the artifact-specific localStorage key only.
Clearing localStorage must not erase state already preserved in exported HTML.

Required Pattern

function applyStateToDOMForExport(){
  document.querySelectorAll('[data-field], [data-task]').forEach(el => {
    if (el.type === 'checkbox') {
      if (el.checked) el.setAttribute('checked', 'checked');
      else el.removeAttribute('checked');
    } else if (el.tagName === 'SELECT') {
      el.querySelectorAll('option').forEach(opt => {
        if (opt.value === el.value) opt.setAttribute('selected', 'selected');
        else opt.removeAttribute('selected');
      });
    } else if (el.type === 'range') {
      el.setAttribute('value', el.value);
      const out = el.parentElement && el.parentElement.querySelector('output');
      if (out) out.textContent = el.value + '%';
    } else if (el.isContentEditable) {
      el.textContent = el.innerText;
    } else if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
      el.setAttribute('value', el.value);
      if (el.tagName === 'TEXTAREA') el.textContent = el.value;
    }
  });
}

function exportHTML(){
  try {
    saveState();
    applyStateToDOMForExport();
    const clone = document.documentElement.cloneNode(true);
    const html = '<!doctype html>\n' + clone.outerHTML;
    download('artifact_EDITED.html', html, 'text/html;charset=utf-8');
  } catch (err) {
    console.error('Export HTML failed:', err);
    alert('Export edited HTML failed. Open DevTools Console for details.');
  }
}

function exportJSON(){
  try {
    const json = JSON.stringify(collect(), null, 2);
    download('artifact_STATE.json', json, 'application/json;charset=utf-8');
  } catch (err) {
    console.error('Export JSON failed:', err);
    alert('Export JSON failed. Open DevTools Console for details.');
  }
}

function download(name, content, type){
  try {
    const blob = new Blob([content], { type: type || 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = name;
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }, 1000);
  } catch (err) {
    console.error('Download failed:', err);
    alert('Download failed. Open DevTools Console for details.');
  }
}

Validation

Before reporting done:

Extract the inline script block and run node --check.
Open the HTML from file:/// when practical and check the console.
Change a checkbox, select, range, and editable text field; export HTML; reopen in a fresh browser context; confirm all four changes persist.
Export JSON, edit one field, import it, and verify the UI updates.
Clear localStorage and reopen the exported HTML; preserved exported state should remain visible.
Test an invalid dropdown value; the page should warn, map, and badge the affected card or control.