Agent skill · design visual · dpearson2699
swift-charts
Implement, review, or improve data visualizations using Swift Charts. Use when building bar, line, area, point, pie, donut, or iOS 26 3D charts; when adding chart selection, scrolling, annotations, axes, scales, legends, or foregroundStyle grouping; when plotting functions with BarPlot, LinePlot, AreaPlot, PointPlot, Chart3D, or SurfacePlot; or when creating heat maps, Gantt charts, grouped bars, sparklines, threshold lines, or spatial visualizations.
Why this skill is useful
Provides specific patterns and configurations for creating complex data visualizations using Swift Charts that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-07-31. 973 stars on the source repository.
What this skill does
Swift Charts Build data visualizations with Swift Charts targeting iOS 26+. Compose marks inside Chart or Chart3D, configure axes and scales with view modifiers, and use vectorized plots or 3D plots when the data calls for them. See references/charts-patterns.md for extended patterns, 3D charts, accessibility, and theming guidance. Contents Workflow Chart Container Mark Types Axis Customization Scale Configuration Foreground Style and Encoding Selection (iOS 17+) Scrollable Charts (iOS 17+) Annotations Legend Vectorized Plots (iOS 18+) 3D Charts (iOS 26+) Common Mistakes Review Checklist References Workflow 1. Build a new chart 1. Define data as an Identifiable struct or use id: key path. 2. Choose mark type(s): BarMark, LineMark, PointMark, AreaMark, RuleMark, RectangleMark, SectorMark, or SurfacePlot. 3. Wrap 2D marks in Chart; use Chart3D only for real spatial or surface data. 4. Encode visual channels: .foregroundStyle(by:), .symbol(by:), .lineStyle(by:). 5. Configure axes with .chartXAxis / .chartYAxis. 6. Set scale domains with .chartXScale(domain:) / .chartYScale(domain:). 7. Add selection, scrolling, or annotations as needed. 8. For 1000+ 2D data points, use vectorized plots (BarPlot, LinePlot, etc.). 9. Render representative empty, typical, dense, large-text, high-contrast, and VoiceOver states; exercise selection and scrolling when present. 10. If an encoding, axis, selection, or accessibility check fails, restore the data fixture, fix one layer, and rerun the same matrix before adding decoration. 2. Review existing chart code Identify the data semantics before judging mark choice. Then trace every value through mark, scale, axis, style, selection, and accessibility output; run the same validation matrix used for new charts. Chart Container Use the data-driven initializer for a single collection. Use the content closure for mixed marks or multiple series, and pass id: when elements are not Identifiable. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills dpearson2699/swift-charts