skills.rest
davidrrowley
davidrrowleyCOMMUNITY
Explore all skills by this author →
Website𝕏@davidrrowleyGitHub

frontend-ui-dark-ts

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building polished, consistent dark-themed React interfaces requires assembling many design and engineering pieces — design tokens, Tailwind configuration, motion patterns, and accessible UI components — which is time-consuming and error-prone for teams starting a dashboard or admin project.

Core Features & Use Cases

  • Provides a ready Tailwind configuration and CSS tokens tuned for a refined dark aesthetic and glassmorphism effects.
  • Includes TypeScript-ready component patterns (Button, Card, Input, Dialog, Tabs, Toast, Avatar) with accessibility and mobile touch target considerations.
  • Supplies Framer Motion animation variants, page transition wrappers, layout patterns (AppShell, Responsive Shell, Sidebar, Mobile Drawer), and design token documentation for data-rich dashboards, analytics consoles, and admin panels.

Quick Start

Use this skill to scaffold a TypeScript React app with Tailwind, Framer Motion, and a dark design system that includes tokenized colors, glass utilities, and ready-made UI components.

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 Tailwind CSS and Framer Motion?▼

To build a dark-themed React dashboard, use this Skill to scaffold a TypeScript app with a Tailwind configuration, glassmorphism utilities, Framer Motion variants, and ready-made UI components like AppShell and Sidebar.

Can I use this Skill to create glassmorphism effects in a React admin panel?▼

Yes, you can create glassmorphism effects in a React admin panel using the provided CSS tokens and Tailwind configuration tuned specifically for a refined dark aesthetic and glass utilities.

Do I need TypeScript to use these dark React UI components?▼

TypeScript is not strictly required, but the component patterns provided are TypeScript-ready, including accessible Button, Card, Input, Dialog, Tabs, Toast, and Avatar components optimized for mobile touch targets.

What is the best way to add page transitions to a dark React dashboard?▼

The best way to add page transitions to a dark React dashboard is by using the included Framer Motion animation variants and page transition wrappers supplied by this Skill.

Does this Skill provide responsive layout patterns for data-rich analytics consoles?▼

Yes, this Skill provides responsive layout patterns including AppShell, Responsive Shell, Sidebar, and Mobile Drawer specifically designed for building data-rich analytics consoles and admin panels.

Are Vite entry points included for setting up a dark React dashboard?▼

Yes, Vite-compatible entry points are included alongside the Tailwind configuration and design token documentation to help you quickly scaffold your dark-themed React application.

Related Skills

Explore More Software Engineering Skills→
liujiayi3703liujiayi3703

web-artifacts-builder

Initialize React projects with TypeScript, Tailwind CSS, and shadcn/ui.

Community
Intermediate
shobhit-16shobhit-16

interactive-widgets

Stream interactive Flutter widgets within AI conversation streams via Nexus.

Community
Advanced
STier-AiSTier-Ai
5

frontend-ui-dark-ts

Build dark-themed React UIs with Tailwind CSS and Framer Motion.

Official
Intermediate
auxi-wardrobeauxi-wardrobe
1

ck:ui-styling

Generate accessible, responsive UIs with shadcn/ui and Tailwind CSS.

Official
Advanced