# Feature Tabs

> A features section where the stage is the product doing the work. Each feature is a tab in a numbered rail, and the stage beside it is drawn from your config as real interface: a list, a bank match, a bar chart, an email, a form, a rate picker, a code request or a tracking timeline. Every view is built from the same shared objects, so a switch keeps what two views have in common and moves it into place, and bars grow out of the amounts they came from. The tour runs on a visible clock, pauses off screen and stops when the reader takes over. The build checks that totals and prices agree across views, and the checks fail any view that leaves an empty band in the stage.

- Output: Web, A features section built from one JSON config: 3 to 6 tabs beside one stage drawn as real UI, where switching tabs moves the same objects into a new view
- Price: Free
- Page: https://lookbk.dev/skills/feature-tabs-kit

## What you need

- Node.js 18 or later. Nothing to install from npm.
- Chrome, Chromium or Edge, for `check.mjs` and `record.mjs` (found automatically, or set `CHROME_PATH`).
- ffmpeg, only to record the preview video.
- The features: 3 to 6, each with a short title, a one-sentence claim, a proof number and what the stage should show.
- The objects your product handles in those features, with real-looking values. Invent believable ones; never paste a customer's data.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add feature-tabs-kit
```

The first run prints a sign-in link; open it, approve, and run the command again.

Where it installs:

- Run by Claude Code: `~/.claude/skills/feature-tabs-kit` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/feature-tabs-kit`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/feature-tabs-kit` when `~/.claude` exists.

Add `--claude` or `--shared` to write only one of those folders, or `--project` to install into the current folder instead. Start a new agent session afterwards so it picks up the skill.

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

## Example request

> Build our how it works section with the feature tabs kit: four features, each with a claim, a proof number and a stage view of our product made from the same records, light theme