# building-pigment-frames

> Claude/Codex skill by [@gopigment](https://omgskills.com/library/gopigment/index.md) · 23 stars · Updated 2026-10-23

Use this skill whenever you're building, updating, or troubleshooting a Pigment Frame — a full-page, custom-coded visualisation (JavaScript, canvas, or inline SVG) that reads Pigment data through the PigmentSDK. Reach for it any time a native View (Grid, Chart, KPI) or Board can't produce what's being asked for - a bespoke chart, a custom canvas drawing, an interactive widget, or a standalone page in the left navigation that behaves like a small app. Also use it if a Frame you've already built shows up blank or broken and needs debugging.

## Install

```sh
git clone https://github.com/gopigment/ai-plugins /tmp/ai-plugins && ln -s /tmp/ai-plugins/skills/building-pigment-frames ~/.claude/skills/building-pigment-frames
```

## From README

Building Pigment Frames A Frame is a standalone, full-page custom visualisation rendered from author-supplied JavaScript that reads Pigment data through the PigmentSDK. Use a Frame only when native Views, Boards, and chart types cannot express the required visual. When to Use Bespoke visual (canvas, inline SVG, custom DOM) that no native View mode (Grid / Chart / KPI) can produce. No CDN; inline all code. Full page in left navigation (like Boards). No Frame widget; a Frame is the page. Frames do not support scenarios. Do not attempt to build them, edit them, compare them, or provide workarounds regarding them, it won't work. If the user requests to work with scenarios, tell them early that it is not supported. Tools and Workflow The Frame JS lives in a file on your filesystem. tool:createframe and tool:updateframe take the path of that file, never the source itself. | Tool | Use | | --- | --- | | tool:writefile | Author the JS file.

## Links

- HTML page: https://omgskills.com/library/gopigment/ai-plugins/skills/building-pigment-frames/
- GitHub: https://github.com/gopigment/ai-plugins
- Author: [@gopigment](https://omgskills.com/library/gopigment/index.md)

## More from this repo

- [aggregating-view-data](https://omgskills.com/library/gopigment/ai-plugins/skills/aggregating-view-data/index.md) — Execution skill.
   - [@gopigment](https://omgskills.com/library/gopigment/index.md) · 23 stars
- [architecting-multi-application-solutions](https://omgskills.com/library/gopigment/ai-plugins/skills/architecting-multi-application-solutions/index.md) — Planning skill.
   - [@gopigment](https://omgskills.com/library/gopigment/index.md) · 23 stars
- [auditing-a-pigment-application](https://omgskills.com/library/gopigment/ai-plugins/skills/auditing-a-pigment-application/index.md) — Execution skill.
   - [@gopigment](https://omgskills.com/library/gopigment/index.md) · 23 stars