Free tool page
free-tool-pageA free one-purpose tool page for Next.js that ranks on its own text and keeps visitor input in the browser, with an audit that types every test case offline and fails if typed text leaves the page.
Full description
Builds a free single-purpose tool page (counter, checker, calculator, generator) in a Next.js App Router site that ranks, converts and keeps what visitors type in the browser. The tool is server-rendered with explanation, worked examples computed by the same code, sources and one call to action under it, an absolute self canonical, and WebApplication plus BreadcrumbList JSON-LD without invented ratings. An audit loads the running page in Chromium and checks title, description, canonical, h1, JSON-LD and words in the server HTML, third-party requests, the JavaScript budget (gzip), labels and a live result region, then turns the network off, types every test case, compares results and reports any request made while typing (an error if it carries the typed text). Ships a working sample (an X post length checker that matches the official twitter-text parseTweet, tested on 20,000 generated texts). Use when the user wants a free tool, calculator or checker page, a lead magnet without an email gate, or to audit one.
A first draft of an X post length checker with three problems seeded in: it counts characters as you see them, it posts drafts to an analytics endpoint, and it loads a font from Google. The audit catches all three, the agent fixes them, the counter is compared with X's own library, and the page is used with the network off. · Recorded 2026-11-03
- 1tool_audit on the first draft: all 7 cases wrong with the network off, requests to fonts.googleapis.com and fonts.gstatic.com, and the typed text sent in POST /api/log; FAIL with 3 errors
- 2The agent swaps in the X counter, deletes the /api/log effect and drops the font link; after a rebuild the audit passes: 7 of 7 cases right offline, no third-party requests, 111.9 KB of JavaScript under the 130 KB budget, 15 checks
- 3compare_with_twitter_text runs the counter and X's official twitter-text library on 20,011 texts: 0 differences, and the 7 test cases in the config agree with the library
- 4The page in a browser with the network off: a link counts 23 and Chinese 2 per character, a long post goes over the limit and the part X would cut is highlighted, then the rules and computed examples; 0 requests since load (sped up 1.25x)
Previews
What it does
A free one-purpose tool page for Next.js that ranks on its own text and keeps visitor input in the browser, with an audit that types every test case offline and fails if typed text leaves the page.
- A Next.js App Router template in the order that works: h1, lead, a true privacy line, the tool, how it works, examples computed by the same code, what it leaves out, sources, one call to action
- The tool is a pure function and the input lives in React state only: no fetch, no storage, no third-party script
- Absolute self canonical plus WebApplication and BreadcrumbList JSON-LD, with no invented ratings, reviews or offers
- tool_audit loads the running page in Chromium: title, description, canonical, one h1, JSON-LD and word count in the server HTML, third-party origins, a gzip JavaScript budget, labels and a live result region
- Then it turns the network off, types every test case, compares results, and fails if any request made while typing carries the typed text
- Ships a working sample: an X post length checker ported from twitter-text parseTweet, equal to the official library on 20,000 generated texts and 411 recorded cases
Use the free-tool-page skill to build a free tool page for my site: help me pick a tool I can test against a real source, write the page around it, and run the audit until it passes.Full instructions are included with purchase
This is a paid skill. Buy it on its own or get every skill with a plan. Buyers download it from this page or their account.
Outline
- 01When to use / when not to
- 02What you get
- 03Workflow
- 04Rules
- 05Checks
- 06How to verify
What's inside
22 files: SKILL.md, 8 scripts, 3 references, 9 templates and assets, 1 tests.
- SKILL.md6.9 KB
assets/(9)53.3 KB
nextjs/(9)53.3 KB
src/(8)51.6 KB
app/(3)10.6 KB
tools/(3)10.6 KB
x-post-length/(3)10.6 KB
- page.tsx5.9 KB
- tool.css2.4 KB
- XPostCounter.tsx2.2 KB
components/(1)312 B
- JsonLd.tsx312 B
lib/(4)40.7 KB
- tool-site.ts504 B
- x-count-data.mjs33.0 KB
- x-count.d.mts662 B
- x-count.mjs6.5 KB
- tool.config.json1.7 KB
references/(3)8.1 KB
- privacy-and-speed.md2.3 KB
- tool-page.md3.8 KB
- x-counting.md2.1 KB
scripts/(9)74.8 KB
fixtures/(1)43.3 KB
- x-count.cases.json43.3 KB
template-check/(1)2.2 KB
- tool.test.tsx2.2 KB
- _args.mjs435 B
- _audit-core.mjs6.2 KB
- check_nextjs_template.sh1.9 KB
- compare_with_twitter_text.mjs4.1 KB
- gen_x_data.mjs2.8 KB
- selftest.mjs5.1 KB
- tool_audit.mjs8.9 KB
Questions
What does Free tool page do?
A free one-purpose tool page for Next.js that ranks on its own text and keeps visitor input in the browser, with an audit that types every test case offline and fails if typed text leaves the page.
Which agents does it work with?
Claude Code, Codex, Cursor and any other agent that reads the Agent Skills format (a folder with SKILL.md). Paste the install prompt into your agent, or unzip the folder into its skills directory.
What is in the download?
22 files: SKILL.md, 8 scripts, 3 references, 9 templates and assets, 1 tests.
How much is it?
$6.99 one-time on its own, with 12 months of updates. Yearly and lifetime plans include every paid skill.
Can I get a refund?
A first payment can be refunded in full within 14 days if no paid skill was downloaded. After a download, no refund unless a skill is defective and we can't fix it.
How do updates work?
One-time purchases get 12 months of updates; yearly and lifetime get updates while active. Download again from this page or your account. Current version: 1.0.0.