skills.rest
nattergabriel
nattergabrielCOMMUNITY
Explore all skills by this author →
𝕏@eterdevGitHub

data-viz

Provide Recharts and CSS chart patterns for React dashboards.

2|Updated Mar 18, 2026
Search Tags:#charts#frontend#dashboard#recharts#data-visualization#data-formatting#css-charts
One-click install
npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill data-viz-nattergabriel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-viz
Source: https://github.com/nattergabriel/oasis-greenhouse/tree/main/frontend/.claude/skills/data-viz
Command: npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill data-viz-nattergabriel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides ready-to-use data visualization patterns and formatting utilities to build charts, dashboards, and UI components quickly.

Core Features & Use Cases

  • Recharts components for Line, Bar, Area, Pie charts with responsive containers and themed styling.
  • Pure CSS charts like Progress Bar, Circular Progress, Gauge, and Stat Cards to display metrics without libraries.
  • Data formatting utilities: mission day formatting, numbers, percentages, temperatures, dates for consistent Mars UI.

Quick Start

Import the provided components and utilities into your React project to begin building charts immediately.

Frequently Asked Questions about data-viz

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build responsive React dashboards with Recharts components?▼

You can build responsive React dashboards using ready-to-use Recharts components for Line, Bar, Area, and Pie charts with themed styling. These patterns include responsive containers to ensure your charts adapt seamlessly to different dashboard layouts.

What is the best way to display UI metrics without importing heavy charting libraries?▼

The best way to display UI metrics without heavy libraries is using pure CSS charts. You can render Progress Bars, Circular Progress indicators, Gauges, and Stat Cards directly in your frontend to visualize data efficiently without extra dependencies.

How do I format mission day numbers and percentages for data dashboards?▼

To format mission day numbers, percentages, temperatures, and dates for data dashboards, you can apply dedicated data formatting utilities. These ensure consistent UI data presentation across your mission-specific displays and frontend applications.

Can I use these data visualization patterns in an existing React project?▼

Yes, you can use these data visualization patterns in an existing React project. You simply import the provided Recharts components, CSS charts, and data formatting utilities to begin building frontend data dashboards immediately.

Do I need external dependencies to render CSS charts for my frontend?▼

No, you do not need external dependencies to render CSS charts for your frontend. The patterns include pure CSS implementations for visual elements like Progress Bars and Gauges, allowing you to display metrics without importing external charting libraries.

Related Skills

Explore More Data & Analytics Skills→
yangqiongyangqiong

Data Cleaning Skill

Cleans raw datasets by handling missing values, duplicates, and data types.

Community
Intermediate
qapdex-makerqapdex-maker

stitch::extract-static-html

Extract fully rendered HTML from web applications or React components.

Community
Intermediate
mqzkimmqzkim

dashboard-builder

Generate Recharts and Tremor dashboard pages with metric cards, charts, and data tables.

Community
Intermediate
lamm-mitlamm-mit
38

d3-viz

Create custom interactive SVG data visualizations with d3.js.

Community
Intermediate