# Design library

> Components, skills and charts with their descriptions, for agents that design UI. Each entry links its verbatim docs.

## Skills

- [Stageshow](https://design.claude-web.com/components/stageshow/README.md): Faux product UI: stills, feature cards, cursor demos and bento grids, built in React.
- [Stageshow (skill/SKILL.md)](https://design.claude-web.com/components/stageshow/skill/SKILL.md): Faux product UI: stills, feature cards, cursor demos and bento grids, built in React.

## Components

- [Liveline](https://design.claude-web.com/components/liveline/README.md): A live number that changes over time: prices, metrics, heart rate, CPU.
- [Liveline (npm-readme.md)](https://design.claude-web.com/components/liveline/npm-readme.md): A live number that changes over time: prices, metrics, heart rate, CPU.
- [Drawesome](https://design.claude-web.com/components/drawesome/README.md): Drawing, annotating a screenshot, marking up a frame.
- [Drawesome (npm-readme.md)](https://design.claude-web.com/components/drawesome/npm-readme.md): Drawing, annotating a screenshot, marking up a frame.
- [Agentation](https://design.claude-web.com/components/agentation/README.md): Clicking on UI to give an agent precise feedback (selectors, positions, context).
- [Agentation (npm-readme.md)](https://design.claude-web.com/components/agentation/npm-readme.md): Clicking on UI to give an agent precise feedback (selectors, positions, context).

## Charts

- [Cash Flow Area Chart](https://design.claude-web.com/components/charts/cash-flow-area/README.md): Comparing this period with the last on one continuous measure, where the gap is the story.
- [Total Value Chart](https://design.claude-web.com/components/charts/total-value/README.md): One period of seven to twelve buckets where a single bucket is the focus.
- [Asset Overview Radial Chart](https://design.claude-web.com/components/charts/asset-overview-radial/README.md): A cyclical series (hours, months) with one total to put in the middle.
- [Finance Overview Stacked Bar Chart](https://design.claude-web.com/components/charts/finance-overview-stacked-bar/README.md): Showing how a total splits into two to four categories over days.
- [Finance Overview Diverging Bar Chart](https://design.claude-web.com/components/charts/finance-overview-diverging-bar/README.md): Two periods compared bar by bar, mirrored around one baseline.
- [Price Range Chart](https://design.claude-web.com/components/charts/price-range/README.md): Picking a range on a price series, with the distribution beside it.