Agent skill · software engineering · sickn33
frontend-ui-dark-ts
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.
Why this skill is useful
Provides a modern UI system with specific Tailwind CSS and Framer Motion configurations that enhance React applications.
What it needs
Requires autoprefixer, postcss, tailwindcss, vite installed locally. About 1k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/frontend-ui-dark-ts--220999