Loading the repository README…
Showing 10 of 10 collected skills.
Donut-chart-specific design tokens (colors, sizes, typography, spacing, hover/emphasize behavior, and validation rules), sourced from the Figma "S2 – Charts" file. Use when generating, styling, or reviewing a Donut chart to get exact values instead of…
Feature guidance for Donut chart advanced labels (swatch + segment name + value/% + optional detail row, connected to the slice by a leader line). Use when generating a Donut with advanced labels enabled. Token values referenced here are defined in…
Feature guidance for the Benchmark Donut variant (2-segment donut with a reference line/target marker). Use when generating a Donut with a benchmark comparison line. Token values referenced here are defined in donut-chart-tokens.
Feature guidance for the 2-segment (binary) Donut chart variant. Use when generating a Donut with exactly 2 segments and no separate swatch legend. Token values referenced here are defined in donut-chart-tokens.
Feature guidance for Donut chart direct labels (segment name + value text placed directly around the ring, no connector line). Use when generating a Donut with direct labels enabled. Token values referenced here are defined in donut-chart-tokens.
Shared collision-avoidance algorithm for donut chart labels (Direct or Advanced) that stack vertically within the same hemisphere. Use whenever multiple small/adjacent segments produce overlapping label positions.
Feature guidance for the Donut chart's center-hole metric total/label (the summary number shown in the middle of the ring). Use when generating a Donut with Metric value/Metric label enabled. Token values referenced here are defined in donut-chart-tokens.
Feature guidance for the regular (multi-segment, non-binary) Donut chart variant. Use when generating a standard Donut with 2-6 segments and no benchmark. Token values referenced here are defined in donut-chart-tokens.
Engine-agnostic catalog of every chart feature React Spectrum Charts implements (marks, decorations, chart-level features). Use when generating a chart spec for RSC, Vega, Chart.js, or D3 to confirm a requested feature exists and what it's configured with,…
Canonical Spectrum 2 design tokens (colors, typography, spacing) for React Spectrum Charts. Use whenever generating or styling a chart so colors/fonts/spacing match real Spectrum 2 values instead of invented ones.
Copy this prompt into the AI assistant you're using.
Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/adobe/react-spectrum-charts.The repository README could not be loaded. You can still explore its Skills below.