Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/thinkex-oss/thinkex/widget-authoringnpx skills add ThinkEx-OSS/thinkex --skill widget-authoringgit clone --depth 1 https://github.com/ThinkEx-OSS/thinkexWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/thinkex-oss/thinkex/widget-authoring)<a href="https://agentmods.dev/skills/thinkex-oss/thinkex/widget-authoring"><img src="https://agentmods.dev/badge/skills/thinkex-oss/thinkex/widget-authoring.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00049 | $0.01024 |
| Opus 5 | $0.00024 | $0.00512 |
| Sonnet 5 | $0.00010 | $0.00205 |
| Haiku 4.5 | $0.00005 | $0.00102 |
Grade A, and why
widget-authoring scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 51 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Author ThinkEx widgets
A widget is a document block whose HTML-escaped text content is one interactive HTML fragment:
<div data-type="widget" title="Short title"><style>...</style>...</div>
There is no separate widget item type. A document containing only this block acts as a standalone widget.
Create
Follow this contract:
- Supply fragment content only: HTML plus inline
<style>and<script>elements. Omit<!doctype>,<html>,<head>, and<body>because the runtime supplies the document shell. - Write vanilla JavaScript inline. The opaque-origin frame cannot read ThinkEx cookies, storage, parent DOM, or workspace data. Its policy blocks connection APIs and external subresources. A script can still navigate its own frame, so keep all behavior local and never navigate.
- Use a native shell and expressive core. Let the runtime style structural UI such as type, controls, focus, spacing, and panels. Give the diagram, simulation, chart, game, or other central experience the custom SVG, canvas, color, and motion it needs.
- Fit the host chrome. The block already provides its title, border, background, and gutter, so never repeat the widget title or wrap the entire source in another card. Reserve panels and borders for distinct internal regions.
- Let normal content determine height and fill the available width. Give only elements without natural height, such as a canvas or chart area, an explicit pixel height. The host clamps the frame between 120px and 720px and scrolls taller content.
- Create and edit tools validate inline script syntax before saving. If one returns
widget_script_syntax_error, use its detail to repair the existing source and retry the same write. Let later runtime failures throw; the sandbox catches them and offers the user an Ask AI to fix action.
Compose the experience before coding it:
- Choose one primary interaction or visual and make it dominant. Group its controls together and keep supporting explanation secondary.
- Prefer the runtime's standard controls and
.tx-stack,.tx-row,.tx-panel,.tx-muted, and.tx-visualhelpers over rebuilding structural styles. Mark at most one main button withdata-variant="primary". - Theme structural UI with the semantic background, foreground, card, primary, secondary, muted, accent, border, input, ring, radius, and font variables. Use
--success,--warning,--info, and--destructivefor status, and--chart-1through--chart-6for data and expressive visuals. The root also hasdata-theme="light|dark"and the.darkclass. Hard-code a color only when its literal identity carries meaning. - Keep interface text compact, make layouts wrap on narrow widths, label controls, and ensure every visible control works. Use motion to explain state changes rather than as decoration.
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 51 lines · 49 tokens per session scan A 37ef3f94f068
widget-authoring is a skill published in the GitHub repository ThinkEx-OSS/thinkex (55 stars, last pushed today), licensed MIT. It adds 49 tokens to every session and 1,024 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
ingest
Turn messy source notes into structured wiki pages (frontmatter, wikilinks, one folder per type) and update the vault's index, log and hot cache. Use when the user drops files into inbox/ and asks to process them, points at a note or URL to ingest, or pastes raw content to file. Triggers on: "ingest", "ingesta"…
save
File the current conversation's valuable content (analysis, decision, session summary) as a structured wiki note so it isn't lost in chat history. Triggers on: "save this", "guarda esto", "guárdalo en el wiki", "/save", "$save", "file this", "apunta esto", "guarda esta conversación", "save this session".
plan-update
Use when you need to update a plan document with deep research across all compiler passes. Launches parallel subagents to analyze how a topic affects every compiler phase, then consolidates findings into the plan doc.
powerpoint
Create designed, editable PowerPoint .pptx presentations with PptxGenJS. Use when the user asks to create, generate, update, or inspect a deck, slide deck, presentation, or .pptx file.
design-mcp-server
Design the tool surface, resources, and service layer for a new MCP server. Use when starting a new server, planning a major feature expansion, or when the user describes a domain/API they want to expose via MCP. Produces a design doc at docs/design.md that drives implementation.
add-tool
Scaffold a new MCP tool definition. Use when the user asks to add a tool, create a new tool, or implement a new capability for the server.