Cut calculator
StableTwo sliders estimate the tokens idle skills add to every turn, beside a grid with one square per skill.
Set how many skills are installed (5 to 200, starting at 80) and how many your team uses (0 up to that number, starting at 10). It multiplies the idle ones by about 100 tokens each, the figure in Anthropic’s Agent Skills docs, per turn and across a 50-turn session. The constants live in home/CutCalculator.tsx; the only prop is className.
Updated View source
Estimate
import { CutCalculator } from '@rchursin/home/CutCalculator'
/** Move either slider: the totals update as you go and are read out politely. */export default function CutCalculatorEstimate() { return <CutCalculator className="w-full" />}Usage
import { CutCalculator } from '@rchursin/home/CutCalculator'<CutCalculator className="mt-16" />API
Cut calculator props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | – | Extra classes on the grid. Two columns on screens 1024 pixels and wider, one below. |
Accessibility
Keyboard
| Key | What it does |
|---|---|
| Left arrowDown arrow | Lowers the focused slider by 1. |
| Right arrowUp arrow | Raises the focused slider by 1. |
| Page UpPage Down | Moves the focused slider in larger steps (the browser picks the size). |
| HomeEnd | Jumps to the slider’s minimum or maximum. |
- Both sliders are native <input type="range"> with a <label>, so they are announced with their name and value and work with every input method.
- Each value is also shown in an <output> next to its label.
- The results are a <dl> with aria-live="polite": after a change, screen readers hear the new totals.
- The used slider’s maximum follows the installed count, so “used” can never be more than “installed”: lowering installed below it lowers used too.
- The grid of squares is aria-hidden; the numbers carry the same information.
Guidelines
Do
- Say where the numbers come from, as the note under the totals does.
- Keep the estimate labelled as an estimate (the “~” and the note).
Don’t
- Don’t present the result as a bill: prompt caching makes repeats cheaper, as the note says.
- Don’t add a submit button; it updates as you move.
In use
Related
- Range sliderThe lux-range finish for a native range input: a hairline track that fills to the thumb and a lit pearl thumb.
- The FrameThe logo becomes a viewfinder: frame the few skills that work and cut the rest, with an estimator and a floating header.
- Run wallA month of agent runs as a wall of squares, with a sweeping day highlight you can pause.
- Dashboard mockA still picture of the product: four headline numbers, a bar list of skill runs and a ledger with verdicts, on sample data.
Source
The component’s own files, exactly as they run on this site.
/** * "What your idle skills cost every turn" — a small, honest estimator. * Uses Anthropic's documented ~100 tokens per skill for the always-loaded name + description. * https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview */import { useId, useState, type CSSProperties } from "react"import { cx } from "../components/cx"
const TOKENS_PER_SKILL = 100const TURNS = 50const fmt = new Intl.NumberFormat("en-US")
export function CutCalculator({ className }: { className?: string }) { const id = useId() const [skills, setSkills] = useState(80) const [used, setUsed] = useState(10) const usedClamped = Math.min(used, skills) // Fewer installed skills also lowers "used" for good, so raising "installed" again never makes // the used slider jump back up on its own function changeSkills(next: number) {