frontend-ui-dark-ts

Create dark-themed React dashboards with Tailwind CSS and Framer Motion.

70|42|Updated Mar 27, 2026

Search Tags:#typescript #react #vite #tailwind #glassmorphism #framer-motion #dark-theme

Ready to run

npx skills add https://github.com/tranhieutt/software_development_department --skill frontend-ui-dark-ts-tranhieutt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-ui-dark-ts
Source: https://github.com/tranhieutt/software_development_department/tree/main/.claude/skills/frontend-ui-dark-ts
Command: npx skills add https://github.com/tranhieutt/software_development_department --skill frontend-ui-dark-ts-tranhieutt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Crafts consistent dark React dashboards with Tailwind CSS, Framer Motion, and reusable components so that teams no longer scramble to align theming, typography, motion, and glassmorphism effects across data-rich interfaces.

Core Features & Use Cases

Design tokens & theming: Provides curated color palettes, spacing, border radii, and typography utilities for neutral backgrounds, status colors, and brand gradients in dark mode.
Components & layout: Documents UI primitives like buttons, cards, inputs, dialogs, tabs, AppShell, sidebar, and page headers tailored to motion-aware experiences with glass effect utilities.
Motion & accessibility: Suggests Framer Motion variants for Fade, slide, scale, and staggered sequences, plus focus, scrollbar, and safety styles for polished dashboards and admin panels.

Quick Start

Tell the skill to scaffold a Vite React TypeScript project with Tailwind CSS, glassmorphism tokens, and Framer Motion transitions for your dark dashboard.

Frequently Asked Questions about frontend-ui-dark-ts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a dark-themed React dashboard with glassmorphism effects?▼

Build a dark-themed React dashboard by combining Tailwind CSS design tokens for neutral backgrounds and borders with Framer Motion animation variants. This provides glassmorphism surfaces, custom typography, and animated transitions for data-rich admin panels.

What's the best way to set up Vite, React 18, and TypeScript for an animated admin panel?▼

Set up Vite, React 18, and TypeScript by scaffolding a project with Tailwind CSS configuration and Framer Motion. This delivers reusable components, React Router-powered routes, and motion-aware UI primitives like buttons, cards, and dialogs.

Does Framer Motion work with Tailwind CSS for dashboard transitions?▼

Framer Motion works with Tailwind CSS to deliver polished dashboard transitions. It provides fade, slide, scale, and staggered animation sequences that integrate with Tailwind's design tokens for spacing, border radii, and typography.

Can I use this approach to create reusable components for data-rich UI workflows?▼

You can create reusable components for data-rich UI workflows using documented UI primitives like AppShell, sidebar, page headers, tabs, and inputs. These are tailored to motion-aware experiences with glass effect utilities for dark mode admin panels.

Why do my dark mode dashboard styles and animations look inconsistent across components?▼

Dark mode dashboard styles look inconsistent without curated design tokens for color palettes, spacing, borders, and typography. Applying standardized tokens with Framer Motion variants ensures consistent glassmorphism surfaces and animated transitions across all interfaces.

Do I need React Router to manage routes in a Tailwind CSS admin panel?▼

React Router is needed to manage animated transitions across routes in a Tailwind CSS admin panel. It powers the navigation workflow required to deliver polished, motion-aware experiences for data-rich dark-themed dashboards.