composition

composition is a skill for Claude Code, Codex from lvndry/jazz. It costs 88 tokens per session (1,217 once invoked), scanned A, original, MIT.

A tool for creating visual or interactive artifacts with code, such as charts, dashboards, diagrams, planners, simulations, small games, and polished web pages.

In plain words
What is it for?
It is for building browser-based visual explanations, interactive calculators, trackers, maps, and other compositions when a visual communicates better than text or a table.
Why use it?
It helps present relationships, processes, comparisons, or calculations in a form that can be inspected or manipulated more easily than prose.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit It is for building browser-based visual explanations, interactive calculators, trackers, maps, and other compositions when a visual communicates better than text or a table.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/lvndry/jazz/composition
Install

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.

Any agent
npx skills add lvndry/jazz --skill composition
Clone the repo
git clone --depth 1 https://github.com/lvndry/jazz

Made for: Claude Code, Codex.

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

agentmods badge for composition

README.md
[![agentmods](https://agentmods.dev/badge/skills/lvndry/jazz/composition/github.svg)](https://agentmods.dev/skills/lvndry/jazz/composition)
Your own site
<a href="https://agentmods.dev/skills/lvndry/jazz/composition"><img src="https://agentmods.dev/badge/skills/lvndry/jazz/composition/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for composition

Your own site · 80×15
<a href="https://agentmods.dev/skills/lvndry/jazz/composition"><img src="https://agentmods.dev/badge/skills/lvndry/jazz/composition.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 88 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,217 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00088 $0.01217
Opus 5.5 $0.00035 $0.00487
Sonnet 5 $0.00018 $0.00243
Haiku 4.5 $0.00009 $0.00122

Measured 7d ago against content hash 57bc54a2b2e9, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-28, from the pricing page.

Security

Grade A, and why

composition 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 7d 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.

skills/composition/SKILL.md · 118 lines

How it starts

The opening of the file, as written. The whole thing — 118 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Composition

Turn information into a useful, polished visual artifact. A composition is not decoration for an answer: it earns its place by making a relationship clearer, faster to inspect, or easier to act on than prose or a table.

Use create_composition to produce it. Jazz stores the HTML under ~/.jazz/compositions/<session-id>/<composition-name>.html; a local interactive session opens the finished composition in the default browser. Chat surfaces deliver a static image or an interactive link when they support it.

Decide whether a composition earns its cost

Use a composition when it helps someone see one of these things:

  • a trend, distribution, ranking, or comparison;
  • a process with three or more steps or branches;
  • a system, hierarchy, map, or state transition that is awkward in prose;
  • a calculation or planner the person should manipulate;
  • a compact briefing someone will revisit or share.

Do not create one for a single fact, a short answer, a simple list, or as a substitute for missing data. If a small table is clearer, use the table.

Choose the right visual grammar

Start with the question, then choose the smallest form that answers it.

Question Best default
How does a value change over time? Line chart; use bars only for discrete periods.
Which categories are larger? Sorted horizontal bars.
How do two quantities relate? Scatter plot with labeled axes.
What makes up a whole? Stacked bars; use a pie only for a few unmistakable parts.
What happens next? Timeline, flow, or state diagram.
What can the person change? Small form plus immediate, visible result.
What should someone scan quickly? A restrained dashboard with one primary insight.

Read the full file on GitHub · 118 lines

Changes

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.

  1. 7d ago First seen · 118 lines · 88 tokens per session scan A 57bc54a2b2e9

Subscribe to this mod's changes

composition is a skill published in the GitHub repository lvndry/jazz (53 stars, last pushed yesterday), licensed MIT. It adds 88 tokens to every session and 1,217 once invoked, about $0.0004 per session on Opus 5.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-09-22.

Related

Other skills, from other repositories

web-design

Penguin visual language for generated web pages and app UIs — GitHub-style simplicity with a single blue accent, light and pure-black dark themes, design tokens, component and chat-interface recipes, plus an opt-in warm paper editorial theme.

Prism-Shadow/penguin-harness · 51 tokens

ui-craft

Design, build, redesign, or modify browser-visible web interfaces with product-quality composition, visual systems, interaction states, responsive behavior, accessibility, and browser visual QA. Use for HTML, CSS, JavaScript, React, Vue, or Svelte pages and components, landing pages, dashboards, admin tools, settings…

MemTensor/memmy-agent · 86 tokens

vibe-ui-methodology

A set of design rules for creating HTML, CSS, SVG, visualisations, presentations, and PDFs with planned colours, patterns, design tokens, and accessibility checks.

huangrichao2020/pretty-skills · 401 tokens

design-skill

Use BEFORE building or restyling anything a user will see — web/mobile UIs, landing pages, dashboards, components, emails, AND creative work like Three.js/WebGL/canvas/SVG scenes, data-viz, games, and animations — to make it look intentional and polished, not generic; covers tokens, type, color, layout, motion…

Overbrilliant/ob-1 · 82 tokens

theme-builder

Create or customize a site theme interactively. Walks through site purpose, audience, visual direction, and design specifics before generating a complete base.html template with all SEO, accessibility, search, pagination, and i18n requirements.

seite-sh/seite · 49 tokens

frontend-design

Guidance for distinctive, intentional visual design when building or reshaping UI, HTML/React artifacts, dashboards, charts, and visual reports. Use before implementation to choose a content-specific structure, typography, and visual system that does not read as a templated default.

spytensor/openmozi · 56 tokens