skills.rest
RobinMillford
RobinMillfordCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-dark-ts

Generates dark-themed React TypeScript interfaces using Tailwind CSS and Framer Motion.

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

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, wiring animations, and creating reusable components, which is repetitive setup work for every new project. ## Core Features & Use Cases - Complete design token system: Predefined Tailwind config with brand colors, neutral backgrounds, status colors, dataviz palette, and CSS custom properties for a cohesive dark UI. - Glassmorphism component patterns: Ready-made glass card, panel, overlay, and input utility classes plus layout components like AppShell, Sidebar, and PageHeader. - Framer Motion animation presets: Fade-in, slide-up, stagger, and page transition variants for tasteful UI motion. - Use Case: Scaffold a data-rich admin dashboard with a Vite + React + TypeScript stack, complete with routing, dark theme styling, mobile safe-area support, and animated page transitions. ## Quick Start Create a dark-themed React dashboard app with Tailwind CSS, Framer Motion animations, and glassmorphism components using this UI system.

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 with postcss and autoprefixer, then apply the provided tailwind.config.js with dark neutral backgrounds, brand colors, and the globals.css file containing base styles and glass utilities.

How to add page transition animations in React with Framer Motion?▼

Wrap your Routes in AnimatePresence and use a PageTransition component with motion.div that animates opacity and y-position on mount and exit. Predefined variants like fadeIn, slideUp, and staggerContainer cover common animation patterns.

What is glassmorphism and how do I implement it in Tailwind?▼

Glassmorphism combines backdrop blur with semi-transparent backgrounds and subtle borders. The skill provides glass, glass-card, glass-panel, glass-overlay, and glass-input utility classes built with backdrop-blur and white/alpha background utilities.

Does this Tailwind config support mobile safe areas and touch targets?▼

Yes, the config includes spacing utilities for env(safe-area-inset-*) values for notched devices and min-h-touch/min-w-touch utilities enforcing 44px minimum touch targets per Apple and Google guidelines.

What are the limitations of this dark UI system?▼

The system targets React 18 with Vite and Tailwind CSS 3 only, so it does not cover Next.js, light themes, or other frameworks. Output should be validated in your own environment with testing before production use.

Related Skills

Explore More Software Engineering Skills→
HouseGarofaloHouseGarofalo
3

dashboard-design

Design responsive dashboards with KPI cards and data tables using React and Tailwind CSS.

Official
Intermediate
TugoukezhangTugoukezhang
8

cloudbase

Build, deploy, and manage web apps, mini programs, and backends with CloudBase.

Community
Advanced
UnicornUnicorn

e2e-test-agent

Generate end-to-end test suites for web and full-stack applications.

Official
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate