frontend-ui-dark-ts

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](references/detailed-guide.md) 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.