---

name: frontend-ui-dark-ts description: "A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations." risk: critical source: community date_added: "2026-02-27"

Frontend UI Dark Theme (TypeScript)

A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.

Detailed Guide

Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

Color Usage

Use Case	Color	Class
Primary action	Brand purple	bg-brand text-white
Primary hover	Brand hover	hover:bg-brand-hover
Page background	Neutral bg1	bg-neutral-bg1
Card background	Neutral bg2	bg-neutral-bg2
Elevated surface	Neutral bg3	bg-neutral-bg3
Input background	Neutral bg2	bg-neutral-bg2
Input focus	Neutral bg3	focus:bg-neutral-bg3
Border default	Border default	border-border
Border subtle	Border subtle	border-border-subtle
Success	Status success	text-status-success
Warning	Status warning	text-status-warning
Error	Status error	text-status-error

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.