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

ui-components

Build React UI components with shadcn/ui and Tailwind for Mars Greenhouse dashboards.

2|Updated Mar 18, 2026
Search Tags:#react#nextjs#tailwind#design-system#shadcn-ui#ui-components#dark-theme
One-click install
npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill ui-components-nattergabriel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-components
Source: https://github.com/nattergabriel/oasis-greenhouse/tree/main/frontend/.claude/skills/ui-components
Command: npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill ui-components-nattergabriel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ready-to-use React UI components for the Mars Greenhouse Command Center, reducing frontend boilerplate and ensuring a consistent dark-theme design using shadcn/ui and Tailwind CSS.

Core Features & Use Cases

  • Composable primitives for dialogs, dropdown menus, and tabs that align with a Mars-themed design system.
  • Guidance and references for integrating PillTabs, toasts, and other patterns in Next.js apps.
  • Fast assembly of dashboards, control panels, and modals in internal tooling with consistent styling.

Quick Start

Install the UI components and render sample blocks by importing from the library and applying the Mars dark theme.

Frequently Asked Questions about ui-components

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

FAQPage Schema
How do I build a React dashboard with a consistent dark theme?▼

You can build a React dashboard with a dark theme by using pre-built UI components styled with Tailwind CSS and shadcn/ui, which provide ready-to-use primitives for control panels and reduce frontend boilerplate.

Can I use shadcn/ui components in a Next.js project?▼

Yes, you can use shadcn/ui components in a Next.js project to assemble dialogs, dropdown menus, and tabs with consistent styling, ensuring fast integration for internal tooling and dashboards.

What is the best way to add dialogs and toast patterns to a Next.js app?▼

The best way to add dialogs and toast patterns is by importing composable primitives from a React UI library that includes guidance for integrating these features directly into Next.js apps.

Do I need Tailwind CSS to use these React UI components?▼

Yes, you need Tailwind CSS to use these React UI components because they rely on it for styling to ensure a consistent design system and dark theme across your dashboard interfaces.

How do I implement PillTabs and dropdown menus in a React design system?▼

You implement PillTabs and dropdown menus by utilizing composable primitives designed for React design systems, which offer documented guidance for integrating these specific patterns into your Next.js interfaces.

Related Skills

Explore More Software Engineering Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
nattergabrielnattergabriel
2

design-system

Standardizes a Mars-themed UI design system for cockpit dashboards.

Community
Advanced
RamonsDkaRamonsDka
1

ckm:ui-styling

Standardize accessible UI styling across React apps with shadcn/ui and Tailwind CSS.

Community
Advanced
docaohieu2808docaohieu2808

ui-styling

Style user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate