Nine skills, one React page: what each skill cost in tokens

A skill is sold as context on demand: the agent loads a small file only when the task needs it. That pitch implies a skill makes a run cheaper, or at least no more expensive. We tested it on one frontend task with nine arms.

Every arm got the same brief (13 acceptance points), the same prompt, the same model and an empty directory of its own. The only variable was which skill sat in the agent's skill directory. The baseline arm had none.

The page is a workspace settings screen with four tabs, a validated profile form, two plan cards and three notification toggles. Deleting a workspace means typing its name into a dialog.

1.Tokens per arm

Total tokens include input, output and cache reads, so they measure context volume rather than spend. Input grows with what the agent reads, including the skill and its own output. Output is the code and prose it writes.

One arm came in under the baseline, and it is a skill. impeccable used 0.79 M tokens because most of its work ran in local scripts instead of model calls. Every other skill added context.

2.What the skill file contains

A skill is not one file. impeccable ships 62 files and 555,720 tokens of material, of which 114,095 tokens are markdown an agent can read. Its SKILL.md, the only part loaded up front, is 2,912 tokens.

Payload size did not predict cost. web-design-guidelines ships 308 tokens, the smallest set here, and still added +136% total tokens. ponytail ships 874 and added +11%.

3.What the code looked like

Tokens are the bill; code is the product. Code LOC counts ts, tsx and js only, because several design skills also emit markdown and token JSON that would otherwise inflate the count.

ponytail is the only arm that halved the code: 409 lines, no extra dependency, 13 of 13 checks. shadcn went the other way with 1,949 lines and 25 dependencies, and only shadcn missed checks.

4.Two arms hit the cap

impeccable and shadcn both ran to the 1,500 s cap and were killed. impeccable had already built and passed all 13 checks. shadcn had built too, but left 2 of the 13 checks failing.

A killed process never writes the usage file, so their token counts came from the profile's state.db. Read them as spend until killed, not as cost to finish; the table marks them with a cap.

• impeccable: 15 API calls in 25 minutes, so the wall clock went into local browser and review scripts
• shadcn: 56 API calls, 25 dependencies, 11 of 13 checks, the most tokens of any arm

Limits of this run

• n=1 per arm. Run to run spread is unmeasured, and one run is a smoke test rather than a rate.
• One model and one provider (deepseek-v4.1-flash via opencode-go). Another model may read the same skills differently.
• Spec checks are string presence in source, not runtime behaviour. Keyboard tabs, focus trap and Escape were never driven in a browser.
• Code LOC is a size proxy. It says nothing about whether the page looks good or feels right.
• Skills were copied from upstream at one commit. A skill updated later could behave differently.

Use ponytail when diff size is the bill

409 code LOC against 759 with no skill, 13 of 13 checks, no extra dependency, 338 s against 317 s.

• -46% code LOC, +11% total tokens
• Same build gate and same 13 checks

Skip shadcn for a one off settings page

6.05 M total tokens, 25 dependencies, 1,949 code LOC, and the only arm that missed 2 of 13 checks.

• +281% total tokens against baseline
• The build passed, so the misses are spec misses

Watch the clock, not only the counter

impeccable spent 0.79 M tokens and still needed the full 1,500 s cap for local review work.

• 15 API calls over 25 minutes
• Cheap tokens, expensive wall time

Verdict

No skill made this page cheaper than no skill. Skills changed the shape of the code, and that is what to buy them for.

Raw rows: docs/analysis/2026-10-17-nine-skills-one-page.jsonl. Harness and per arm sources live in ~/Documents/work/skill-token-poc. Measured 17 Oct 2026 on one machine, not a benchmark for other models.