Funnel Stage Areav1.0.1
Use this Skill to make an infographic.
A funnel chart skill for Claude Fable 5: a figure and its change for each step above soft area lines, one per step, plus a period menu, as React source on ECharts.
Picked most often by
Updated Nov 6, 2026
Preview gallery
Similar Skills
View all
What you get
- Funnel Stage Area as editable source: the funnel card with its period menu, the ECharts panel and a usage example of a bookshop's order funnel.
- Theme tokens from references/theme.md covering palette, type, radius, icon stroke and motion timing.
- An ECharts option where each step is one series of plain values, ready for your own counts.
Good fit
- Shops and sign-up flows that report visits, product views, carts and paid orders side by side.
- Growth reviews where each step's change against the last period matters as much as its count.
- Product teams who want one funnel card built on a real charting library.
Not for
- Products that already follow a design system of their own; this block's palette and type scale would compete with it.
- Anyone wanting a versioned package from npm; you receive source code and keep it up to date yourself.
- Funnels where a later step can outgrow an earlier one; that data needs another chart.
About this Skill
Funnel Stage Area is a funnel chart skill for Claude Fable 5 that shows how many people make it through each step. The header carries a title and a period menu with the last 7 days, 30 days, quarter and 12 months. Under it sit the step figures, widest step first, each with its count and its change against the period before: green when it grew, red with its own icon when it fell. Choosing a period swaps those figures and changes while the chart holds still. The chart, drawn by ECharts, gives every step a smooth line over a light fill in the set's series colors, teal first, plus a legend and a tooltip listing every step for the point under the cursor. If a later step is larger than the one before, the agent flags it rather than drawing a funnel that widens.
How it works
- Say which page gets the block; the agent studies package.json and the framework config, then writes it in the project's own idiom.
- Swap in your own titles and labels; the theme tokens keep sizes and spacing in place.
- Hand over your real series; ECharts redraws them in the same colors and axes.
- Run scripts/check-blocks.mjs, then view the page at phone width before it goes live.
Checked before delivery
- Every step is drawn through ECharts as a smooth line over a light fill, in the set's series colours and the funnel's order
- Picking a period swaps the figures and the changes while the chart stays put, and a falling step shows red with its own icon
- scripts/check-blocks.mjs reports no symbol icons, no off-palette blue or violet and no remote files
What you need before you start
- You bring
- A title and the funnel's steps from the widest to the narrowest, each with a name for its figure · One set of rows for the chart, such as an ordinary week, with a count for every step, plus each period's totals and changes
- Dependencies
- ECharts 5 or newer, installed with your project's package manager
- Outside costs
- None
- Last tested
- v1.0.1 — Claude Code / Cursor
User reviews
Loading reviews…
FAQ
What should I hand over for the funnel?
A title, the steps from widest to narrowest with a name for each figure, one set of rows for the chart with a count per step, and each period's totals and changes. It ships as React; elsewhere the agent rebuilds it and keeps ECharts.
Does the block fetch anything online?
No. Fonts, icons and pictures stay as local files, and scripts/check-blocks.mjs flags any src, href or url() pointing at another host.
How do my own numbers get in?
ECharts reads one option object whose labels and values are plain arrays. Replace them and the colors, tooltip and animation stay put.