·tremor-design-system
*

tremor-design-system

✓
fefogarcia/approved-skillsGitHub: fefogarcia/approved-skillsSource: fefogarcia/approved-skills

Build dashboards, analytics interfaces, and data-rich UIs using the Tremor design system (React + Tailwind CSS + Recharts). Use when the user asks to create dashboard components, KPI cards, charts, data tables, analytics pages, monitoring interfaces, or any data visualization UI that should use Tremor. Triggers include mentions of "Tremor", "tremor.so", "@tremor/react", requests for dashboard UIs with charts and tables, or when the user's project already uses Tremor components. Supports both Tremor Raw (copy-and-paste, tremor.so) and Tremor NPM (@tremor/react) versions. Do NOT use for general frontend work unrelated to dashboards or data visualization, or when the user explicitly requests a different component library.

fefogarcia·tremor·design·system
3Installs·0Trend·@fefogarcia

Installation

GitHub: fefogarcia/approved-skills
$npx skills add https://github.com/fefogarcia/approved-skills --skill tremor-design-system

How to Install tremor-design-system

Quickly install tremor-design-system AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/fefogarcia/approved-skills --skill tremor-design-system
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: fefogarcia/approved-skills.

SKILL.md

View raw

Build production-grade dashboards and analytics interfaces using Tremor's React component library.

Tremor has two distribution models. Detect which the user's project uses before writing code:

If unclear, ask the user. Default to Tremor Raw for new projects, as it is the actively developed version (acquired by Vercel in Jan 2025).

Build dashboards, analytics interfaces, and data-rich UIs using the Tremor design system (React + Tailwind CSS + Recharts). Use when the user asks to create dashboard components, KPI cards, charts, data tables, analytics pages, monitoring interfaces, or any data visualization UI that should use Tremor. Triggers include mentions of "Tremor", "tremor.so", "@tremor/react", requests for dashboard UIs with charts and tables, or when the user's project already uses Tremor components. Supports both Tremor Raw (copy-and-paste, tremor.so) and Tremor NPM (@tremor/react) versions. Do NOT use for general frontend work unrelated to dashboards or data visualization, or when the user explicitly requests a different component library. Source: fefogarcia/approved-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/fefogarcia/approved-skills --skill tremor-design-system
Source
fefogarcia/approved-skills
Category
*Creative Media
Verified
✓
First Seen
2026-02-26
Updated
2026-03-11
URL
https://www.learn-skills.dev/en/skills/fefogarcia/approved-skills/tremor-design-system

Browse more skills from fefogarcia/approved-skills

Quick answers

What is tremor-design-system?

Build dashboards, analytics interfaces, and data-rich UIs using the Tremor design system (React + Tailwind CSS + Recharts). Use when the user asks to create dashboard components, KPI cards, charts, data tables, analytics pages, monitoring interfaces, or any data visualization UI that should use Tremor. Triggers include mentions of "Tremor", "tremor.so", "@tremor/react", requests for dashboard UIs with charts and tables, or when the user's project already uses Tremor components. Supports both Tremor Raw (copy-and-paste, tremor.so) and Tremor NPM (@tremor/react) versions. Do NOT use for general frontend work unrelated to dashboards or data visualization, or when the user explicitly requests a different component library. Source: fefogarcia/approved-skills.

How do I install tremor-design-system?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/fefogarcia/approved-skills --skill tremor-design-system Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/fefogarcia/approved-skills

Details

Category
*Creative Media
Source
skills.sh
First Seen
2026-02-26

Related Skills

carbon-design-system
3 Installs
ux-researcher-designer
3 Installs