Preview
What it is.
The marketing use is interactive content: a pricing calculator, a benchmark explorer, a scorecard that gives someone a number. This skill sets up the project, and the bundling step collapses it into one HTML file with everything inlined.
The stack is React with TypeScript, Tailwind and shadcn/ui, and the initialization script arrives with 40+ shadcn components already installed plus path aliases configured. Tailwind is pinned at 3.4.1 and it detects your Node version.
It also carries a design warning worth reading out in your next review: avoid excessive centered layouts, purple gradients, uniform rounded corners and the Inter font, because that combination reads as machine-made.
What you get.
- A configured React and TypeScript project in one command
- 40+ shadcn/ui components and the Radix dependencies already installed
- A bundle step that inlines all JavaScript and CSS into a single HTML file
- A stated design warning about the look that reads as generated
- An optional test pass with a browser driver once the piece exists
How to set it up.
Install the example-skills plugin from the anthropics/skills marketplace.
Run the initialization script with a project name. It configures React, Tailwind, path aliases and the component library in one step.
Confirm Node 18 or newer. The script detects the version and pins the build tool accordingly.
Build the piece around one number the visitor cares about. An interactive tool with three outputs gets used less than one with a single answer.
Read the design warning before styling. Centered layouts, purple gradients, uniform rounded corners and the Inter font are named as the look to avoid.
Run the bundle script, which needs an index.html in the project root and produces a single self-contained file.
Pricing Plans
Free. Apache 2.0 license.
Included in Anthropic's example-skills plugin. Checked against the repo in July 2026.
Use cases
ROI calculator in a file
Sales wants a calculator prospects can play with. Run the initialization script and build the piece around the one number a visitor came for, then the bundle step collapses it into a single HTML file with no backend behind it.
A report made explorable
The benchmark report is finished and static. Hand over the data and it becomes a filterable explorer built on the preinstalled component library, bundled into one file you can embed anywhere.
Scorecard lead magnet
You want a better trade for an email address than a gated PDF. Build a scorecard where a visitor answers questions and gets a number back, packaged as one self-contained file.
Dodging the generated look
Interactive pieces from AI tools share a telltale style. The skill names it, centered layouts, purple gradients, uniform corners and the Inter font, so you style away from all four before anyone reviews the piece.
Best for
An ROI or pricing calculator
A single HTML file with no dependencies is easy to embed, easy to send, and it works with no backend behind it.
Turning a report into something explorable
The same benchmark data gets more attention as a filterable explorer than as a chart in a PDF.
A scorecard lead magnet
Someone answers questions and gets a number, which is a better reason to hand over an email than a gated PDF.