agentleFS
Sign inStart free
VJDiPaolaVJDiPaola/skill-forge/interactive-artifact-generator/SKILL.md

interactive-artifact-generator

Skill0 starsChanged 30 days agoMITView on GitHub

Create standalone browser-openable interactive HTML artifacts for decision boards, curated recommendation lists, job shortlists, hackathon idea explorers, option comparisons, and other visual deliverables. Use when the user asks for interactive HTML, visual output, a list they can filter or decide from, or a non-prose artifact they can open locally.

We split this skill into the rules it gives an agent

16 rules. About 0 are common, 15 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈15

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use this skill to turn research, options, or scored candidates into a useful local HTML artifact instead of a static prose dump.

    line 8
  2. Very specific:

    Prefer a single self-contained .html file when:

    line 12
  3. Distinctive:

    Use a small app only when the artifact needs server-side APIs, uploads, auth, or persistent backend data.

    line 18
  4. Distinctive:

    Keep source links and evidence strength visible.

    line 25
  5. Distinctive:

    Use localStorage only for local decision state such as selected, saved, or pass.

    line 31
  6. Distinctive:

    Do not pad a list to meet a target count when verified supply is lower.

    line 34
  7. Distinctive:

    Put checked-but-rejected or weaker candidates in a separate panel.

    line 35
  8. Distinctive:

    Use dense but readable cards or tables.

    line 39
  9. Distinctive:

    Avoid decorative layouts that hide the content.

    line 41
  10. Distinctive:

    Ensure mobile and desktop text does not overflow controls.

    line 42
  11. Distinctive:

    Check that every primary item has a title, source or evidence, and decision-relevant metadata.

    line 47
  12. Distinctive:

    If visual layout is central, open the file or inspect screenshots where browser access is available.

    line 48
  13. Distinctive:

    Do not embed secrets or private tokens in HTML.

    line 52
  14. Distinctive:

    Do not rely on remote scripts unless the user asked for a hosted app and the dependency is justified.

    line 53
  15. Distinctive:

    Do not describe how to use the page inside the page when controls are self-evident.

    line 54
  16. Distinctive:

    Do not put nested cards inside cards.

    line 55

≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Interactive Artifact Generator

Use this skill to turn research, options, or scored candidates into a useful local HTML artifact instead of a static prose dump.

Artifact Shape

Prefer a single self-contained .html file when:

  • The user asks for interactive HTML or visual output.
  • The deliverable is a decision list, shortlist, comparison, or curated set.
  • The artifact should work by opening the file directly in a browser.

Use a small app only when the artifact needs server-side APIs, uploads, auth, or persistent backend data.

Workflow

  1. Define the decision model.
    • Identify the user's primary decision: shortlist, choose, compare, apply, visit, build, or approve.
    • Choose filters and sort keys that directly support that decision.
    • Keep source links and evidence strength visible.
  2. Build useful interactions.
    • Include search for lists over 10 items.
    • Include filters for category, evidence type, status, location, score, or decision state as appropriate.
    • Include sortable cards or tables.
    • Use localStorage only for local decision state such as selected, saved, or pass.
  3. Preserve evidence and scarcity.
    • Do not pad a list to meet a target count when verified supply is lower.
    • Put checked-but-rejected or weaker candidates in a separate panel.
    • Label official-source, secondary-source, and inferred evidence separately.
  4. Design for scanning.
    • Use dense but readable cards or tables.
    • Show the strongest next action on each item.
    • Avoid decorative layouts that hide the content.
    • Ensure mobile and desktop text does not overflow controls.
  5. Verify before handoff.
    • Parse inline JavaScript with Node using new Function(...).
    • Count expected records.
    • Check that every primary item has a title, source or evidence, and decision-relevant metadata.
    • If visual layout is central, open the file or inspect screenshots where browser access is available.

Guardrails

  • Do not embed secrets or private tokens in HTML.
  • Do not rely on remote scripts unless the user asked for a hosted app and the dependency is justified.
  • Do not describe how to use the page inside the page when controls are self-evident.
  • Do not put nested cards inside cards.

Output

Return the absolute path to the HTML file, a one-line description of the interactions, and the verification performed.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free