frontend-ui-dark-ts

Create modern, dark-themed React user interfaces using Tailwind CSS and Framer Motion. This skill provides a foundation for building dashboards, admin panels, and other data-rich applications with a refined dark aesthetic. It incorporates glassmorphism effects and tasteful animations to enhance the user experience.

This skill includes a pre-configured Tailwind CSS setup with custom theming, including brand colors, neutral backgrounds, text colors, and border styles. It also provides reusable React components like Button, Card, Input, and Dialog, and animation patterns using Framer Motion for engaging user interactions. The project structure is organized for maintainability and scalability, with clear separation of concerns.

Leverage this skill to rapidly prototype and develop visually appealing and performant dark-themed web applications. It offers a solid starting point for projects that require a sophisticated UI with attention to detail.

What It Does

Provides a pre-configured React UI system with a dark theme, using Tailwind CSS for styling and Framer Motion for animations. Includes custom theming, reusable components, and example layouts.

When To Use

When starting a new React project that requires a dark theme, a modern UI aesthetic, and smooth animations. Suitable for dashboards, admin panels, and data visualization applications.

Installation

Copy SKILL.md to your skills directory