Is tree-map safe to install?

SaferSkills independently audited tree-map (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.

CategoryWeightCategory scoreContribution

Securityprompt, exec, net, exfil, eval

35%

100

35.0 pts

Supply chainhash, typosquat, maintainer, lockfile

20%

100

20.0 pts

Maintenancestaleness, pinning, CI

15%

100

15.0 pts

TransparencySKILL.md, perms, README

15%

100

15.0 pts

Communityinstalls, verify, response

15%

100

15.0 pts

Findings & checks · 0 flagged

Securityscore 100 · 0 findings

✓—All security checks passedNo findings in this category for the latest scan.pass

Supply chainscore 100 · 0 findings

✓—All supply chain checks passedNo findings in this category for the latest scan.pass

Maintenancescore 100 · 0 findings

✓—All maintenance checks passedNo findings in this category for the latest scan.pass

Transparencyscore 100 · 0 findings

✓—All transparency checks passedNo findings in this category for the latest scan.pass

Communityscore 100 · 0 findings

✓—All community checks passedNo findings in this category for the latest scan.pass

The primary manifest — the file an agent reads to learn what this artifact does.

reaviz/charts/tree-map/SKILL.md · 1 file

reaviz/charts/tree-map/SKILL.md4.1 KB · Markdown

TreeMap

Rectangular treemap for hierarchical data. Rectangle size is proportional to value. Supports flat and nested data, text wrapping, label placement, and configurable padding.

Import

import { TreeMap, TreeMapSeries, TreeMapRect, TreeMapLabel } from 'reaviz';

TreeMap Props

Prop	Type	Default	Description
`data`	`ChartShallowDataShape[] \	ChartNestedDataShape[]`	—	Chart data (flat or hierarchical)
`width`	`number`	auto	Width in pixels
`height`	`number`	auto	Height in pixels
`margins`	`Margins`	`0`	Chart margins
`paddingInner`	`number`	`5`	Inner padding between rects
`paddingOuter`	`number`	`5`	Outer padding
`paddingTop`	`number`	`30`	Top padding (title spacing for nested groups)
`series`	`ReactElement<TreeMapSeriesProps>`	`<TreeMapSeries />`	Series component
`className`	`string`	—	SVG CSS class
`containerClassName`	`string`	—	Container div CSS class

TreeMapSeries Props

Prop	Type	Default	Description
`animated`	`boolean`	`true`	Enable animations
`colorScheme`	`ColorSchemeType`	`'cybertron'`	Color scheme name or function
`rect`	`ReactElement<TreeMapRectProps>`	`<TreeMapRect />`	Rectangle element
`label`	`ReactElement<TreeMapLabelProps>`	`<TreeMapLabel />`	Label element

TreeMapRect Props

Prop	Type	Default	Description
`cursor`	`string`	`'pointer'`	CSS cursor on hover
`tooltip`	`ReactElement<ChartTooltipProps> \	null`	`<ChartTooltip />`	Tooltip component
`onClick`	`(event, data) => void`	—	Click handler
`onMouseEnter`	`(event, data) => void`	—	Mouse enter handler
`onMouseLeave`	`(event, data) => void`	—	Mouse leave handler

TreeMapLabel Props

Prop	Type	Default	Description
`placement`	`'start' \	'middle' \	'end'`	`'start'`	Text placement within rect
`wrap`	`boolean`	`true`	Wrap long text
`fill`	`string`	`'#FFF'`	Text color
`fontSize`	`number`	`14`	Font size
`fontFamily`	`string`	`'sans-serif'`	Font family

Basic Usage

const data = [
  { key: 'AWS', data: 100 },
  { key: 'SendGrid', data: 45 },
  { key: 'Okta', data: 75 },
  { key: 'Twilio', data: 25 },
];

<TreeMap
  height={450}
  width={450}
  data={data}
/>

Nested Data

const data = [
  { key: 'Windows', data: [
    { key: 'WinXP', data: 15 },
    { key: 'Win10', data: 20 },
    { key: 'Win7', data: 50 },
  ]},
  { key: 'MacOS', data: [
    { key: 'Sierra', data: 20 },
    { key: 'Catalina', data: 30 },
  ]},
];

<TreeMap
  height={450}
  width={450}
  data={data}
/>

Label Placement

// Centered labels
<TreeMap
  data={data}
  series={
    <TreeMapSeries
      label={<TreeMapLabel placement="middle" />}
    />
  }
/>

// End-aligned labels
<TreeMap
  data={data}
  series={
    <TreeMapSeries
      label={<TreeMapLabel placement="end" />}
    />
  }
/>

No Text Wrapping

<TreeMap
  data={data}
  series={
    <TreeMapSeries
      label={<TreeMapLabel wrap={false} />}
    />
  }
/>

Click Handling

<TreeMap
  data={data}
  series={
    <TreeMapSeries
      rect={
        <TreeMapRect
          onClick={(event, d) => console.log(d)}
        />
      }
    />
  }
/>

Custom Color Scheme

<TreeMap
  data={data}
  series={
    <TreeMapSeries colorScheme={['#FF5722', '#2196F3', '#4CAF50']} />
  }
/>

Tight Layout (No Padding)

<TreeMap
  data={data}
  paddingInner={0}
  paddingOuter={0}
  paddingTop={0}
/>

No Animation

<TreeMap
  data={data}
  series={<TreeMapSeries animated={false} />}
/>

Notes

Uses D3 treemap layout to compute rectangle positions and sizes
Nested data renders group titles using paddingTop space
Text color is automatically inverted based on background darkness for contrast
Labels wrap within rectangle bounds by default
Tooltip shows hierarchical path and value for nested data

tree-map— agent skill

Is tree-map safe to install?

TreeMap

Import

TreeMap Props

TreeMapSeries Props

TreeMapRect Props

TreeMapLabel Props

Basic Usage

Nested Data

Label Placement

No Text Wrapping

Click Handling

Custom Color Scheme

Tight Layout (No Padding)

No Animation

Notes

Audit the pieces. Scan the whole. Decide.