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.
Start a fresh conversation. Replace the highlighted placeholders.
Use frontend-ui-dark-ts to build a dark React TypeScript dashboard for [application and user goals] in [target project or files], with [required pages, data states, and interactions], using the documented Tailwind design tokens and restrained Framer Motion transitions.
Required inputs
[application and user goals]
[target project or files]
[required pages, data states, and interactions]
User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗
SKILL.md
name: frontend-ui-dark-tsdescription: "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: criticalsource: communitydate_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.