Skip to content

docs: add Prism agent skill#64

Merged
saraeloop merged 1 commit intomainfrom
docs/add-prism-agent-skill
May 7, 2026
Merged

docs: add Prism agent skill#64
saraeloop merged 1 commit intomainfrom
docs/add-prism-agent-skill

Conversation

@saraeloop
Copy link
Copy Markdown
Member

Summary

Adds a Prism Runtime agent skill for AI coding agents.

Changes

  • Added skills/prism-runtime/SKILL.md.
  • Added an Agent Skill section to the README.
  • The skill documents:
    • when to use Prism
    • when not to use Prism
    • install/import rules
    • runtime setup
    • paint pass usage
    • export readiness
    • coordinate spaces
    • invalidation
    • lifecycle cleanup
    • callback semantics
    • native/fallback behavior
    • forbidden patterns
    • recommended app structure
    • example roles

Why

The skill gives agents a clear contract for building with Prism and helps prevent common bad integrations, including:

  • using html2canvas or dom-to-image
  • calling raw HTML-in-Canvas platform APIs directly
  • deep importing Prism internals
  • exporting before runtime.paintOnce()
  • confusing CSS pixels with backing-store pixels
  • registering handlers inside render loops or React render bodies

Verification

Passed:

  • pnpm lint
  • pnpm typecheck
  • pnpm test
  • pnpm --filter @prism/docs build

Install check

Verified in /private/tmp/prism-install-check:

  • pnpm add @synthesisengineering/prism works.
  • pnpm add @synthesisengineering/prism@alpha resolves the current alpha.

Notes

  • Documentation/agent-instruction only.
  • No runtime behavior changed.
  • No public API changed.
  • No plugin marketplace manifest was added.

Follow-up: npm dist-tags should be fixed if bare pnpm add @synthesisengineering/prism is expected to install the latest alpha.

Add a Prism Runtime agent skill for AI coding agents.

The skill teaches agents how to use Prism's runtime contract correctly:

register DOM-authored HTML/CSS/SVG surfaces, compose them inside Canvas 2D

paint passes, wait for paint readiness before export, use CSS-pixel bounds,

and clean up surfaces/runtime state.

The skill also documents common forbidden patterns:

- screenshot/export libraries such as html2canvas and dom-to-image

- raw HTML-in-Canvas platform API calls in app code

- deep imports from Prism internals

- storing drawSurface() for later

- registering handlers inside render loops or React render bodies

- mixing CSS-pixel surface bounds with backing-store canvas drawing

Update the README with an Agent Skill section linking to the new skill.

Verification:

- pnpm lint

- pnpm typecheck

- pnpm test

- pnpm --filter @prism/docs build

Install check:

- pnpm add @synthesisengineering/prism works from a clean temp project.

- pnpm add @synthesisengineering/prism@alpha resolves the current alpha.

No runtime behavior changes.
@saraeloop saraeloop self-assigned this May 7, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented May 7, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
prism-docs Ready Ready Preview, Comment May 7, 2026 3:38am

@saraeloop saraeloop merged commit b2c99c7 into main May 7, 2026
10 checks passed
@saraeloop saraeloop deleted the docs/add-prism-agent-skill branch May 7, 2026 03:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant