一键在 Manus 中运行任何 Skill

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 仓库查看创作者相关仓库

下载

在 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.