foryourhealth111-pixel/datavis
bundled/skills/datavis/SKILL.md
Comprehensive data visualization toolkit for creating beautiful, mathematically elegant visualizations with D3.js, Chart.js, and custom SVG. Use when (1) building interactive data visualizations, (2) designing color palettes for charts, (3) choosing scales and visual encodings, (4) creating data pipelines from Census/SEC/Wikipedia APIs, (5) crafting narrative-driven data stories, (6) making perceptually accurate charts, or (7) implementing force-directed networks, timelines, or geographic maps.
$ install --global
skillsauthnpx skillsauth add foryourhealth111-pixel/vco-skills-codex datavisInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 20, 2026, 9:53 AM39.0s1 file scanned
SKILL.md
- name:
- datavis
- description:
- Comprehensive data visualization toolkit for creating beautiful, mathematically elegant visualizations with D3.js, Chart.js, and custom SVG. Use when (1) building interactive data visualizations, (2) designing color palettes for charts, (3) choosing scales and visual encodings, (4) creating data pipelines from Census/SEC/Wikipedia APIs, (5) crafting narrative-driven data stories, (6) making perceptually accurate charts, or (7) implementing force-directed networks, timelines, or geographic maps.
Data Visualization Skill
Create beautiful, mathematically elegant, emotionally resonant data visualizations.
Philosophy: "Life is Beautiful"
Every visualization should:
- Reveal truth through data
- Evoke wonder through design
- Respect the viewer through accessibility
- Honor complexity through elegant simplification
Core Capabilities
1. Visual Encoding
Scale Selection: | Scale | Use When | Example | |-------|----------|---------| | Linear | Evenly distributed data | Temperature | | Log | Multiple orders of magnitude | Population (100 to 1B) | | Sqrt | Encoding area (circles) | Bubble chart radius | | Time | Temporal data | Dates |
Perceptual Honesty - Area scales with square of radius, so use sqrt:
// WRONG: Linear radius exaggerates large values
const badScale = d3.scaleLinear().domain([0, max]).range([0, maxRadius]);
// RIGHT: Sqrt maintains perceptual accuracy
const goodScale = d3.scaleSqrt().domain([0, max]).range([0, maxRadius]);
2. Color Design
Palette Types:
- Categorical - Distinct hues for nominal data (max 8)
- Sequential - Single hue gradient for ordered data
- Diverging - Two hues meeting at meaningful midpoint
Colorblind-Safe Palette (8 colors):
const colorblindSafe = [
'#332288', '#117733', '#44AA99', '#88CCEE',
'#DDCC77', '#CC6677', '#AA4499', '#882255'
];
Always use redundant encoding - don't rely on color alone:
node.attr('fill', d => colorScale(d.category))
.attr('d', d => symbolScale(d.category)); // Shape too!
3. D3.js Patterns
Force Simulation:
const simulation = d3.forceSimulation(nodes)
.force('charge', d3.forceManyBody().strength(-300))
.force('link', d3.forceLink(links).id(d => d.id))
.force('center', d3.forceCenter(width/2, height/2))
.force('collision', d3.forceCollide().radius(d => d.r + 2));
Responsive SVG:
const svg = d3.select('#chart')
.append('svg')
.attr('viewBox', `0 0 ${width} ${height}`)
.attr('preserveAspectRatio', 'xMidYMid meet');
Touch-Friendly (44x44px minimum):
node.append('circle')
.attr('class', 'hit-area')
.attr('r', Math.max(actualRadius, 22))
.attr('fill', 'transparent');
4. Narrative Structure
Three Acts:
- Invitation - What draws viewer in? Why should they care?
- Discovery - What patterns emerge? What surprises?
- Reflection - What should they feel/understand/do?
Progressive Disclosure:
Level 1: Overview → Level 2: Exploration → Level 3: Detail → Level 4: Context
5. Data Pipeline
Structure:
scripts/
├── 01_fetch_raw.py # API calls with caching
├── 02_clean_data.py # Transformation
├── 03_validate.py # Quality checks
└── 04_export.py # Final format
Source Documentation (every dataset needs):
- URL, access date, update frequency
- License and confidence level
- Field descriptions and limitations
Scripts
Generate Color Palette
scripts/color-palette.py --type sequential --hue blue --steps 9
scripts/color-palette.py --type categorical --count 6 --colorblind-safe
scripts/color-palette.py --type diverging --low red --high blue
Analyze Data Distribution
scripts/analyze-distribution.py data.csv --column value
# Outputs: min, max, skew ratio, recommended scale
Scaffold D3 Project
scripts/d3-scaffold.py my-viz --type force-network
scripts/d3-scaffold.py my-viz --type timeline
scripts/d3-scaffold.py my-viz --type choropleth
Anti-Patterns to Avoid
- 3D charts (distorts perception)
- Pie charts with >6 categories
- Dual y-axes
- Rainbow color scales (perceptually uneven)
- Truncated y-axes without disclosure
- Animation without purpose
Quality Checklist
- [ ] Scale choice justified for data distribution
- [ ] Color palette is colorblind-safe
- [ ] Minimum 44x44px touch targets
- [ ] Clear entry point for viewer
- [ ] Sources documented
- [ ] Responsive on mobile
Related Skills
foryourhealth111-pixel/shap
development
VerifiedTrustedCommunity
Model interpretability and explainability using SHAP (SHapley Additive exPlanations). Use this skill when explaining machine learning model predictions, computing feature importance, generating SHAP plots (waterfall, beeswarm, bar, scatter, force, heatmap), debugging models, analyzing model bias or fairness, comparing models, or implementing explainable AI. Works with tree-based models (XGBoost, LightGBM, Random Forest), deep learning (TensorFlow, PyTorch), linear models, and any black-box model.
1,760SKILL.mdUpdated Apr 27, 2026
foryourhealth111-pixel/sentry
development
VerifiedTrustedCommunity
Use when the user asks to inspect Sentry issues or events, summarize recent production errors, or pull basic Sentry health data via the Sentry API; perform read-only queries with the bundled script and require `SENTRY_AUTH_TOKEN`.
1,760SKILL.mdUpdated Apr 27, 2026
foryourhealth111-pixel/senior-prompt-engineer
development
VerifiedTrustedCommunity
World-class prompt engineering skill for LLM optimization, prompt patterns, structured outputs, and AI product development. Expertise in Claude, GPT-4, prompt design patterns, few-shot learning, chain-of-thought, and AI evaluation. Includes RAG optimization, agent design, and LLM system architecture. Use when building AI products, optimizing LLM performance, designing agentic systems, or implementing advanced prompting techniques.
1,760SKILL.mdUpdated Apr 27, 2026
foryourhealth111-pixel/senior-ml-engineer
development
VerifiedTrustedCommunity
World-class ML engineering skill for productionizing ML models, MLOps, and building scalable ML systems. Expertise in PyTorch, TensorFlow, model deployment, feature stores, model monitoring, and ML infrastructure. Includes LLM integration, fine-tuning, RAG systems, and agentic AI. Use when deploying ML models, building ML platforms, implementing MLOps, or integrating LLMs into production systems.
1,760SKILL.mdUpdated Apr 27, 2026