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.

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.

frontend-ui-dark-ts