skills.rest
kiprotichgidii
kiprotichgidiiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-dark-ts

Implements a dark-themed React UI system with Tailwind CSS and Framer Motion.

Updated May 8, 2026
Search Tags:#typescript#react#tailwind css#glassmorphism#dark theme#framer motion#dashboard ui
One-click install
npx skills add https://github.com/kiprotichgidii/agent-skills --skill frontend-ui-dark-ts-kiprotichgidii
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-dark-ts
Source: https://github.com/kiprotichgidii/agent-skills/tree/main/skills/frontend-ui-dark-ts
Command: npx skills add https://github.com/kiprotichgidii/agent-skills --skill frontend-ui-dark-ts-kiprotichgidii

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, react-router-dom, framer-motion, clsx, tailwindcss, vite, typescript.

What problem does it solve? Building a consistent dark-themed dashboard or admin panel from scratch requires configuring Tailwind, defining a color system, setting up fonts, and writing animation patterns, which is repetitive and error-prone. This Skill provides a complete, ready-to-use design system with configuration files, component patterns, and animation variants. ## Core Features & Use Cases - Complete Design Token System: Predefined brand, neutral, text, border, status, and data visualization colors in both Tailwind config and CSS custom properties. - Glassmorphism Utilities: Ready-made glass, glass-card, glass-panel, glass-overlay, and glass-input CSS classes for modern frosted-glass effects. - Framer Motion Patterns: Reusable animation variants including fade-in, slide-up, stagger containers, page transitions, and modal animations. - Use Case: Scaffold a dark-themed analytics dashboard with a glass sidebar, animated page transitions, and consistent typography without designing the system from scratch. ## Quick Start Ask the AI to scaffold a new dark-themed React dashboard using this UI system with Tailwind and Framer Motion.

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 set up a dark theme React app with Tailwind CSS?▼

Create a Vite React TypeScript project, install tailwindcss with postcss and autoprefixer, then extend the Tailwind config with dark background colors, brand colors, and text colors. Apply the base background class to the body element in globals.css.

How to add glassmorphism effects in Tailwind CSS?▼

Combine backdrop-blur utilities with semi-transparent backgrounds and subtle borders, such as backdrop-blur-md bg-white/5 border border-white/10. Define reusable component classes like glass-card and glass-panel in a CSS @layer components block.

How do I animate page transitions with Framer Motion and React Router?▼

Wrap your Routes component with AnimatePresence using mode="wait", then wrap each page in a motion.div with initial, animate, and exit props. Use opacity and y transforms with a 0.3 second easeOut transition for smooth page changes.

Does this Tailwind dark theme support mobile devices?▼

Yes, the configuration includes safe-area-inset spacing utilities for notched devices, 44px minimum touch target sizes via min-h-touch and min-w-touch, and a viewport meta tag with viewport-fit=cover in index.html.

What are the limitations of CSS backdrop-blur glass effects?▼

Backdrop-blur requires browser support for backdrop-filter and can impact rendering performance when applied to large areas or many elements. Older browsers may need a solid semi-transparent background fallback instead of blur.

Related Skills

Explore More Software Engineering Skills→
mauriciodelriomauriciodelrio
3

vite-project-structure

Create feature-first Vite + React SPA structures with centralized routing and path aliases.

Community
Intermediate
ColbyRReichenbachColbyRReichenbach
1

React Dashboard Skill

Develop React dashboards with TypeScript, Tailwind CSS, and pre-built components.

Community
Intermediate
sswapnil2sswapnil2

write-vitest

Classify unit, hook, and component tests for Vitest with Testing Library and axe.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced