skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

frontend-ui-dark-ts

Build dark-themed React applications with Tailwind CSS, glassmorphism effects, and Framer Motion animations.

1|Updated Dec 29, 2025
Search Tags:#typescript#React#Framer Motion#tailwind css#glassmorphism#dark theme#dashboard ui
One-click install
npx skills add https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com --skill frontend-ui-dark-ts-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-dark-ts
Source: https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com/tree/main/.claude/skills/frontend-ui-dark-ts
Command: npx skills add https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com --skill frontend-ui-dark-ts-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Setting up a consistent dark-themed React UI from scratch requires configuring Tailwind tokens, fonts, glassmorphism utilities, and animation patterns manually, which is repetitive and error-prone. ## Core Features & Use Cases - Complete Design Token System: Predefined Tailwind config with brand colors, neutral backgrounds, status colors, dataviz palette, and safe-area spacing for mobile. - Glassmorphism Utilities: Ready-made glass, glass-card, glass-panel, glass-overlay, and glass-input CSS component classes built on backdrop-blur. - Framer Motion Patterns: Reusable animation variants for fade-in, slide-up, staggered lists, page transitions, and modal overlays. - Use Case: Scaffold a dark-themed analytics dashboard with a glass sidebar, animated page transitions, and consistent typography without writing theme configuration from zero. ## Quick Start Create a new Vite React TypeScript app with a dark theme using Tailwind CSS, glassmorphism cards, and Framer Motion page transitions.

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

Extend the Tailwind config with custom neutral background colors, text colors, and border tokens, then set color-scheme: dark in CSS. Apply the background and text classes to the body element for a consistent dark base.

How to add glassmorphism effects in Tailwind CSS?▼

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

What animation library works with React and Tailwind?▼

Framer Motion works well with React and Tailwind, providing declarative variants for fade, slide, scale, and stagger animations. Use AnimatePresence with React Router for smooth page transitions between routes.

Does this dark theme setup support mobile devices?▼

Yes, the configuration includes viewport-fit=cover, env(safe-area-inset) spacing tokens for notched devices, and 44px minimum touch target sizes following Apple and Google guidelines.

Can I use this Tailwind config with Next.js instead of Vite?▼

The Tailwind config and globals.css are framework-agnostic and work with Next.js by adjusting the content paths. The routing and main.tsx entry examples are Vite-specific and would need replacement with Next.js App Router conventions.

Related Skills

Explore More Software Engineering Skills→
MaiconGambiniMaiconGambini

frontend-ui-dark-ts

Builds dark-themed React applications with Tailwind CSS, glassmorphism effects, and Framer Motion animations.

Community
Intermediate
cathayriskcathayrisk

developing-with-streamlit

Build Streamlit apps with layout, caching, session state, and Snowflake connections.

Community
Intermediate
marquesfelipmarquesfelip

frontend-testing-strategy

Develop frontend testing strategies for React, Vue, and Angular applications.

Community
Advanced
rafaelcallejarafaelcalleja
2

ui-styling

Generate Tailwind CSS configurations and integrate shadcn/ui components for React-based UIs.

Community
Advanced