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

frontend-ui-dark-ts

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

1|Updated Aug 17, 2025
Search Tags:#typescript#react#dashboard#tailwind css#glassmorphism#dark theme#framer motion
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --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/mdconverter/tree/main/.claude/skills/frontend-ui-dark-ts
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --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, defining a design token system, building glassmorphism utilities, and wiring animations, which is repetitive and error-prone. This Skill provides a complete, ready-to-use dark UI system so you can start building dashboards and admin panels immediately. ## Core Features & Use Cases - Complete Design Token System: Predefined Tailwind config with brand colors, neutral backgrounds, text hierarchy, status colors, and data-visualization palettes. - Glassmorphism Utilities: Ready-made glass, glass-card, glass-panel, glass-overlay, and glass-input CSS component classes for frosted-glass interfaces. - Framer Motion Patterns: Reusable animation variants for fade-in, slide-up, staggered lists, page transitions, and modal overlays. - Use Case: You need to build a dark-themed analytics dashboard. Use this Skill to scaffold the Vite + React + TypeScript project, apply the dark design system, and add animated glass cards and page transitions without designing tokens from scratch. ## Quick Start Ask the AI to scaffold a dark-themed React dashboard using Tailwind CSS and Framer Motion with the glassmorphism design system from this skill.

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?▼

Scaffold a Vite React TypeScript project, install tailwindcss, framer-motion, clsx, and react-router-dom, then apply the provided tailwind.config.js with dark neutral backgrounds, brand purple accents, and glass utility classes in globals.css.

How to create glassmorphism effects with Tailwind CSS?▼

Use backdrop-blur utilities combined with semi-transparent backgrounds and subtle borders, such as backdrop-blur-md bg-white/5 border border-white/10. The skill provides prebuilt glass, glass-card, glass-panel, and glass-overlay component classes.

What Framer Motion animation patterns work for page transitions?▼

Use AnimatePresence with a PageTransition wrapper that animates opacity and vertical position on mount and exit. Stagger container and item variants handle sequential list animations with configurable delays.

Does this dark UI system support mobile devices?▼

Yes, the Tailwind config includes safe-area-inset spacing for notched devices and 44px minimum touch target sizes per Apple and Google guidelines. The index.html template includes viewport-fit=cover and theme-color meta tags.

Can I use this design system with Next.js instead of Vite?▼

The design tokens, Tailwind config, and CSS utilities are framework-agnostic and portable to Next.js. However, the documented quick start and entry files target Vite with react-router-dom, so routing setup would need adjustment.

Related Skills

Explore More Software Engineering Skills→
LeandelosantosLeandelosantos

senior-architect

Generate architecture diagrams and analyze dependencies for Node.js/Express and React dashboards.

Community
Advanced
aryan083aryan083
1

express-serverless-api

Build, test, and deploy Express.js REST APIs with MongoDB on Vercel.

Community
Advanced
sswapnil2sswapnil2

write-vitest

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

Community
Advanced
rafaelcallejarafaelcalleja
2

ui-styling

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

Community
Advanced